主程序的部分代码: app = Flask(__name__)@app.route(/, methods=[GET, POST])def home(): return render_template(home.html) Welcome, {{ username }} #这里的url无效 Welcome, {{ username }}! 我直接运行home.html是可以显示图片的的 但是一旦通过python返回的html模板就不能显示图片了,就像这样: 两个网页的html源码在图片部分是一样的,但是通过python返回给浏览器的html就不能显示图片...
首先，在开发React之前，我认为应该是一件不太难的事，因为有比较丰富的backbone.js, marionette.js的开发经验，再加上大体了解它的思想，简单的认为和定义View的render，template的方法大同小异，只不过用了JSX奇怪的语法用javascript来代替html形式的模版。刚开始开发的时候，一个页面一个页面的像玩具一样的写，觉得还行，然后开始重构，把一些公共的部分，header，footer开始往layout组件上分配，然后一下子懵圈了，这怎么搞？...
rem/em/px/pt的基友关系 px像素相对长度单位,相对于显示器屏幕分辨率而言 em相对长度单位,根据其父元素来设置字体大小 ptpoint，是印刷行业常用单位，等于1/72英寸 remCSS3新增的一个相对单位,是根据网页的跟元素（html）来设置字体大小 rem应用于适配 rem的特性同样适用于width和height，我们可以根据根元素的font-size值来改变元素的宽高值，由此我们应该可以联想到我们可以根据屏幕大小动态地给html设定不同的...
我们知道在页面上载入小图标有多种方式，比如我们使用比较多的是css sprite背景图片定位，就是将很多小图标集成到一张大图，然后使用CSS定位背景。还有一种比较现代的方式是使用font字体图标，它利用@font-face原理载入图标字体库，然后调用图标。 查看演示 下载源码 使用css sprite方式非常方便，可以有很多色彩缤纷的图标，而且兼容性好，但是缺点就是图标不能缩放，或者说缩放了会失真，另外维护也不方便，修改...
× 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法，本文主要介绍动画animation的三个效果 漂浮的白云 【效果演示】 【简要介绍】 漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片，通过改变其背景定位来实现白云移动效果，通过设置不同的动画持续时间来实现交错漂浮的效果 ...
原文： Learn Vuex by Building a Notes App ，有删改。 本文假设读者熟悉 Vuex 文档 的内容。如果不熟悉，you definitely should！ 在这个教程里面，我们会通过构建一个笔记应用来学习怎么用 Vuex。我会简单地介绍一下 Vuex 的基础内容， 什么时候该用它以及用 Vuex 的时候该怎么组织代码，然后我会一步一步地把这些概念应用到这个笔记应用里面。 这个是我们要构建的笔记应用的截图： 你可以从 Github ...
本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术，但是它有缺点：高清屏会模糊、无法动态变化如hover时候反色。而使用图标字体可以完美解决上述问题，同时具备兼容性好，生成的文件小等优点。 雪碧图 雪碧图实例：淘宝PC端 将多张小图放至一张大图 使用的时候，通过background-position调整显示的位置，如下图所示： 雪碧图的使用方法 使用雪碧图唯...
最近看到一篇非常好的文章，关于开发无障碍的web网页的内容，其实我们的工作中很少会去要求这方面的需求，但是其实如果我们能在开发过程中稍微留心的去安下文中的方法去做也耗费不了多少功夫，但是这么小的举动却可以帮助很多残疾人士，希望转载过来这篇文章可以让更多从事前端的同学看到。 Web无障碍设计（Accessibility in Web design，也叫网站可及性 ）是要让所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力...
× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐 [4]输入框按钮 [5]等分布局 [6]自适应布局 [7]悬挂布局 [8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用 元素居中 【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items .parent{ display: flex; justify-content: center...
发表于 2013-03-20 15:24:00 阅读量(3351) Accessibility简称A11Y，指的是软件产品的可访问性，易用性。A11Y 的出发点是让所有的群体所有的人都可以访问 Web 或者软件应用，本文主要关注 Web 应用的可访问性，主要针对访问 Web 应用有障碍的人士，下面针对几类主要人群对 Web 应用提出的挑战以及我们开发时应该解决得问题加以介绍： 视力有障碍的人士，无法像正常人一样用眼睛浏览网页。此时的解决办法就是用读屏软件将网页...
.box{ display:block; height:350px; width:250px; background:#ddd; cursor:pointer; -webkit-transition: 0.4s; -moz-transition: 0.4s; -ms-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .box:hover{ border-top-right-radius:180px 120px;background: rgba(246,246...
前言 最近在 前端观察 看见了这篇老文章，看见了元素居中的5种办法，其中提到了 display:table-cell 这个css显示的新属性，按照当时的浏览器市场来说想必兼容性会是糟糕的一比，但是现在这坛老酒其实可以用到移动端来。 在PC端，应该很少用到 display:table-cell 这个属性，究其原因在于兼容性【IE8+以及现代浏览器才支持】，或者说很少去关注这个标签。此标签的用处就是垂直居中布局功能，这个功能可以让我们不用依赖 ma...
基于Vue的简单的单页面应用 在对Vue和webpack有了一定了解后，我们就可以开始利用所了解的东西做一个简单的webapp了，不了解的同学可以看下我的前两篇关于vue和webpack的基本应用： webpack+vue起步 利用webpack和vue实现组件化 构建项目 首先创建各个组件，我的目录结构如下： //没有后缀名的都是文件夹|-wechat |-dist |-src | |-components //存放vue组件 | | |-t...
本帖最后由 u013414547 于 2014-01-12 18:45:18 编辑 找了半天没找到仿chrome网上应用商店的主题 回复讨论(解决方案) 继续找。才半天 你?找到的，我看好你。 人一定要有一?精神，那就是?持，不管是一年，?年，?是十年，二十年，我相信你一定能找到的! 小伙子，我真的很看好你...
本帖最后由 phf0313 于 2011-10-21 12:27:24 编辑 .qiandao { width:210px; height:267px; background:url(http://192.168.1.3/image/my_qd_bg.jpg) no-repeat;}.qd_circle { border:1px solid #d0ccc3; width:196px; height:35px; margin-top:6px; margin-left:5px; } qd_circle用了margin-top,但是qiandao也被撑下来了，求解？ 回复讨论(解决方案) 恩 如果 父标签有边框...