CSS开发总结_2012-3-22

网站开发完了, 几乎一夜间被变成了CSS熟手.

跨浏览器CSS开发注意事项:
[位置]
1. Div的高度问题
 设定Height固定值时,
 CSS标准: 高度为固定大小 
 IE6:  Div内容超出值范围时,自动调整高度
 静态内容可以设置固定高度; 动态内容设置为auto; IE6须对应设置position:relative.

2. Div居中方法:
 margin-left:auto;
 margin-right:auto;

3. Float的应用:
 尽量用上一层Div包起来;
 使用 float:right时, 留意总宽度是否会超出; 如果效果不理想, 可以使用absolute作为代替方案;

4. Position:
 CSS标准: 默认值为static;
 IE6: 需要设置值为relative, 以防止错位; (relative用处: 相对父层进行定位)
 位置设定: 使用absolute, 配合margin-left/margin-top,或left/right的方法进行定位;

5. 中文英文换行的问题
 (网上参考方案)
 用 word-wrap:break-word;overflow:hidden;
 而不是 word-wrap:break-word;word-break:break-all;

 

[样式]
6. 导航栏样式:
 当前页的标题的CSS设置: 使用后台判断url的字符串进行处理.(要设计好各个子标题的路径尽量不要有重复或包含的字符串)
 判断到当前标题后, 可以去除当前标题的链接, 然后设置加亮样式;

7. 字体大小:
 pt: 固定大小;
 em: 可被IE调节大小的格式;
 一般情况无针对老年用户时, 可以全用pt作为单位;

8. 美工:
 IE6不支持透明png图片, 需另外用js处理, 或用相同背景色的图片;
 或者, 不理IE6...(目前IE6的中国市场份额仍有20%.[2012-1数据])

 

CSS开发流程:
(基于VS.NET IDE开发)

1) 确定美工方案;
2) 剪切美工图片素材;
3) 确定整体框架的Div
 参考方式:
 <div id="page">
  <div id="header"></div>
  <div id="main"></div>
  <div id="footer"></div>
 </div>
4) 加入图片背景,实现整体版面样式;
5) 调整文字/链接/按钮等样式;
6) 加入对应js脚本,控制特殊处理的样式;

注: 第4)步完成后, 即可交付后台开发.