标签：
在做项目之前，先分析整个站的布局，然后再着手，如果有所有的设计图，可以看哪些模块是相似的，尽量把板块模块化，方便以后的复用。在细节方面，注意一下一些方面：
1.把整个网站的相似部分的模块隔离开来，比如淘金易的头部尾部
2.建立一个公共样式表，以供所有网页使用，每个网页再分别创建一个样式文件
*{
padding: 0px;
margin: 0px;
letter-spacing: -0.5px;
font-size: 14px;
}
body{
font-family: "Microsoft YaHei","宋体","Times New Roman",serif;
background-color: #fff;
}
img{
border: none;
outline: none;
}
ul{
list-style: none;
}
a{
outline: none;
cursor: pointer;
}
input{
border: none;
outline: none;
color: #b4b4b4;
font-family: "Microsoft YaHei",serif;
}
select{
border: none;
outline: none;
}
3.注意meta的写法
<meta name="Keywords" content="">预留关键字，
<meta name="description" content="">预留网站的描述
4.网页渲染，使360安全浏览器打开方式为兼容模式下的ie的最新版本
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
5.将js写在</body>之前，引用的jQuery库为
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
!window.jQuery && document.write(‘<script src="js/jquery.min.js"><\/script>‘);
</script>
6.重要的img图片，都要写上alt，给img标签外面加上div，给img的父元素写上固定的
width和height，img{width：100%；height：100%；}
7. input字体要重写
hack: IE6 & IE7 & IE8：selector{property:value\9;}
8. 颜色rgba()透明度兼容
filter: alpha(opacity=70);
background-color: rgba(0,0,0,.4);
9. 很多浏览器会将含有这些词的作为广告拦截： ad、ads、adv、banner、sponsor、gg、guangg、guanggao等 页面中尽量避免采用以上词汇来命名。
10. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
11.给元素取class名，尽量避免形如 div ul li a的写法，由于浏览器是从右往左渲染的，所以首先它会找到所有的a，这样会降低网站性能
12.class命名规则，具有语义化，结构类名不要添加样式
13.清除浮动
<div class="con">
<div class="con-left">
</div>
<div class="con-right">
</div>
<div class="clear"></div>
</div>
. con-left . con-right{
float:left;
}
.clear{
clear:both;
}
14.要注意控制文字溢出，overflow：hidden
单行文字溢出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
max-width:100px;
15.为了方便后台数据的调取，最好不要将width和height定死，可以用padding来
实现
16.属性顺序问题
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
17.尽量把图片做背景，一般的图片采用jpg格式，将图片优化到图片质量和图片大小更优
18.大模块必须养成注释的好习惯，小模块部分注释
标签：
原文地址：http://www.cnblogs.com/lsww/p/5672996.html
