1.css重用
1 <style> 2 .cl{ 3 ... 4 } 5 .c2{ 6 ... 7 } 8 .c{ 9 ... 10 } 11 12 </style> 13 14 <div class='c c2'></div> 15 <div class='c c2'></div>
可以把c1，c2共有的style属性单独做出一个c来，可以加强css的重用性。
2.自适应 和 改变大小变形
左右滚动条的出现
宽度，百分比
如果页面全部使用百分比，就会出现网页变形；
解决方案：页面的最外层给网页设置像素的宽度，即最外层设置绝对宽度。
1 <body> 2 <div class='pg-header'> 3 <div style='980px;'> 4 <!--头部数据(在这里就可以用百分比了，这里面的层都是占980px的百分比，百分百的内部的宽度=980px)--> 5 </div> 6 </div> 7 <div class='pg-body'> 8 <div style='980px;'> 9 中间内容 10 </div> 11 </div> 12 <div class='pg-footer'> 13 <div style='980px;'> 14 底部菜单 15 </div> 16 </div> 17 </body>
自适应：CSS的media属性
使用css的特殊方法,伪代码实现：
1 <style> 2 如果整个页面的宽度>900px时， 3 下面的写的触发器的设置才会生效。 4 { 5 .cl{ 6 ... 7 } 8 } 9 </style>
实例：www.bootcss.com