1、文字垂直居中,需设置元素高height和行高line-height相等
2、不要使用过小的图片做背景平铺如:1px,宽高1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。
3、无边框,推荐的写法是 border:none;
4、慎用 * 通配符,所谓通配符,就是将 CSS 中的所有标签均起作用,大大的占用资源。
5、坚决不用 CSS 表达式,css就是css,扯上javascript的expression进来,不但性能影响了,独立性也不行。
6、使用引用样式表,而不是通过 @import 导入,引入样式表是加载完css才渲染页面,用户体验比较好,不会出现界面初始化紊乱的现象。
8、IE6浮动标签的margin双倍边距bug问题:加上display:inline解决
9、div层居中于浏览器
水平居中: div { width:400px; height:400px; margin:0 auto; } //注:html代码前面一定要加上下列w3c声明,否则无法居中。
居中居中: div{position:absolute;top:50%; left:50%; margin:-100px 0 0 -100px;width:200px; height:200px; border:1px solid red;}
11、经常用的命名规则
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
12、为了兼容各浏览器需还原标签样式
页面声明统一采用XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
全局标签清除
<style type="text/css">
body,div,label,span,ul,li{border:none;padding:0;margin:0;}
body,button, input, select, textarea {font: 12px/1.5 '宋体', Arial, sans-serif; }
a:focus{outline: none;-moz-outline-style: none; }
ul, ol, li {list-style: none; }
img{ border:0px;}
</style>
联系客服