CSS样式2 - Zoe233

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>

View Code

可以把c1，c2共有的style属性单独做出一个c来，可以加强css的重用性。
2.自适应和改变大小变形
左右滚动条的出现
宽度，百分比

如果页面全部使用百分比，就会出现网页变形；
解决方案：页面的最外层给网页设置像素的宽度，即最外层设置绝对宽度。

 1 <body>
 2     <div class='pg-header'>
 3         <div style='width:980px;'>
 4         <!--头部数据(在这里就可以用百分比了，这里面的层都是占980px的百分比，百分百的内部的宽度=980px)-->
 5         </div>
 6     </div>
 7     <div class='pg-body'>
 8         <div style='width:980px;'>
 9         中间内容
10         </div>
11     </div>
12     <div class='pg-footer'>
13         <div style='width:980px;'>
14         底部菜单
15         </div>
16     </div>
17 </body>

View Code

自适应：CSS的media属性
使用css的特殊方法,伪代码实现：

1 <style>
2 如果整个页面的宽度>900px时，
3 下面的写的触发器的设置才会生效。
4     {
5     .cl{
6     ...
7         }
8     }
9 </style>

View Code

实例：www.bootcss.com

posted on 2017-09-10 21:49 Zoe233 阅读(167) 评论(0) 编辑收藏举报