Flask+Mysql搭建网站之网页设计

不得不说，本人极度讨厌网页设计，感觉太麻烦了。不过整好啦还蛮有成就感的。

关于网页设计，现在流行的是扁平化设计。

http://www.bootcss.com/

http://www.bootcss.com/p/flat-ui/

这个超好，很多样式： http://demo1.cssmoban.com/cssthemes3/npts_13_cvo/index.html#

http://demo1.cssmoban.com/cssthemes3/npts_5_cvg/index.html

一个在线调试html的网站： http://wow.techbrood.com/

一个特效资源： http://techbrood.com/

1. 路径以及css重叠问题。

采用的是bootstrap.css +mystyle.css 的方式。

所以调用的时候需要先调用bootstrap，然后再调用mystyle。这个很重要。

<link href="/static/css/bootstrap.css" rel="stylesheet" media="screen" />
    <link href="/static/css/mystyle.css" rel="stylesheet" type="text/css" />

2. 浏览器缓存不更新的问题

问题：更新mystyle.css 之后，重启服务器，浏览器样式依然不变。

解决方法： 后来通过 Ctrl+F5 强制刷新解决。整了好久，一直以为是我的css路径写错了呢。

3. bootstrap.css.map 404 问题

控制台遇到： GET /static/css/bootstrap.css.map HTTP/1.1" 404

解决方案：

删除bootstrap.css的最后一行即可：

/*# sourceMappingURL=bootstrap.css.map */

4. 表单样式设计

Flask的表单有其独有的格式 ：{{form.search(size=20)}}

这让我一个前端白痴实在是不知道往哪里放属性。后来琢磨了两种方法

1） {{search_case_form.search(size=20,class="form-control",placeholder="Search")}}

所有的属性放这里就可以啦。

2） 设计过程中需要对Textarea表单设定默认值，查了半天，说是Textarea没有“value"属性，事实上我也确实设定了"value"属性也不可以。无奈只能采用第二种方式改写Flask的表单。

<textarea id="caseComment" class="form-control" cols=32 rows=5 name="caseComment">{{case.comment}}</textarea>

5. 关于IE 和Firefox浏览器显示不一致问题。

有些确实是浏览器兼容的问题，但是有些我发现css翻译的成果就不一样。

结果发现是IE的 "Browser Mode"设定成 "IE9"之后， "Document Mode" 竟然是"Quirks Mode"，改成 "IE9 standards"就可以啦。

6. 关于文件选择器

http://plugins.krajee.com/file-basic-usage-demo