1.You Might Not Need jQuery
不用jQuery
,原生js
如何实现,可以参考这里:You Might Not Need jQuery 。原生js
越来越好了,如果是简单的页面,没必要引入一个庞大的jQuery
,尤其在手机端,对速度流量敏感的地方,另外最好自己简单封装一些常用的函数,比如toggleClass
等。。。
2.Firefox
查看源代码功能检查页面错误
页面写完后,记得用Firefox
查看页面源代码功能,可以一眼发现未闭合标签、未转义的HTML
字符,如果不嫌麻烦,可以提交代码到 http://validator.w3.org/ 验证HTML
、CSS
,下面图片来自CSDN
当前首页源码,可以看到Firefox
红色高亮了错误的HTML
代码,_blank
后面多了一个双引号。
3.少用id
如果不在页面中用js
引用元素,尽可能不要设置元素的id
,也尽量不要用#main{}
来设置元素css
样式,而是用class
方式.main{}
,因为
可以防止
ID
重复,造成错误可以方便引入新
CSS
复写样式,另外应当绝对避免行内css
样式.
4.max-device-width
使用 max-device-width
检测而不是max-width
来兼容手机、平板等,可以避免桌面浏览器因为窗口小,而看到丑陋的手机页面效果。
@media only screen and (max-device-width:980px){}
5.flex布局
多列布局,不考虑低级浏览器可以使用CSS3
的flex
布局,可以做到比浮动更好控制,如我写的样例代码,垂直、水平居中可以很容易实现:
6.二维码生成当前网址的插件
装个二维码生成当前网址的插件,以方便查看手机实际显示效果,现在移动端日益重要,作为前端,一定不能忽视移动端的显示效果,虽然浏览器都支持选择device来测试不同的设备显示效果,但毕竟和真实设备有差别,尤其在测试微信内的页面时候,非常方便。
7.让一个块级元素在某区域内上下左右居中
<div class="container">
<div class='box'></div>
</div>
<style type="text/css">
.container{
border: 1px solid #000;
width: 300px;
height: 300px;
position: relative;
}
.box{
border: 1px solid #000;
width: 50px;
height: 50px;
/*magic blow*/
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
效果:
解释:原理就是让 box
自己既要往左也要往右,既要往上也要往下。这时候它就不知所措了,只好待在中间。
8.chrome中隐藏元素
在 Chrome
浏览器的 Elements
里面选中某个元素,按 h
可以隐藏该元素。
9.适当使用localStorage缓存HTML表单内容.
适当使用localStorage
缓存HTML
表单内容,防止浏览器崩溃、死机造成填写丢失.
具体事例移步这里cache form.通过‘查看网页源代码’可以看到实现的js
,我还没研究明白。。。
10.liveload
使用一些chrome
的liveload
插件或者grunt
、glup
这些构建工具的liveload
插件,这样可以边写代码变自动刷新页面,实时看效果.
未完待续。。。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。