css技巧总结(未完待续)

1.多列等高问题---padding补偿法

解决办法有：可以使用javascript，也可以使用边框模拟法。这里就介绍一种负边距的办法。

View Code

 1 <div id="content">
 2        <div class="first"></div>
 3        <div class="second"></div>
 4 </div>
 5 
 6 <script>
 7 #content{
 8     overflow: hidden;
 9 }
10 .first,.second{
11     padding-bottom: 500px;
12     margin-bottom: -500px;
13 }
14 </script>

2.纯css实现下拉列表

思路：使子菜单为绝对行为，并且使其移除页面，这样子菜单是不显示的，然后定义一个hover伪类，改变子菜单的left值，使其出现在页面中。

View Code

 1 <ul  class="drop">
 2     <li><a href="#">首    页</a></li>
 3     <li><a href="#">概    况</a></li>
 4     <li><a href="#">项目介绍</a></li>
 5     <li>
 6            <a href="#">科研人员</a>
 7         <ul>
 8             <li><a href="#">老师</a></li>
 9                     <li><a href="#">博士</a></li>
10             <li><a href="#">硕士</a></li>
11          </ul>
12      </li>
13      <li><a href="#">报考指南</a></li>
14     <li><a href="#">联系我们</a></li> 
15 </ul>    
16 
17 <script type="text/css">
18      ul.drop, ul.drop ul{
19          margin: 0;
20          padding:0;
21          list-style:none; 
22      }
23      ul.drop: after{
24          content:"";
25          display:block;
26          clear: both;
27          visility:hidden;
28          height: 0;
29     }
30     ul.drop li{
31           float: left;
32           width:6em;
33     }
34     ul.drop li ul{
35          position: absolute;
36          left: -999px;               //关键
37          width: 6em;
38     }
39     ul.drop li:hover ul{
40          left: auto;                   //代码的关键地方
41    }
42 
43 </script>

3.圆顶角技术

3.1使用背景图片

View Code

 1 <div class="box">
 2     <h2>hello</h2>
 3     <div class="content">
 4         <p>要加油，时间就是金钱，抓住现在非常重要！</p>
 5         <p>要加油，时间就是金钱，抓住现在非常重要！</p>
 6         <p>要加油，时间就是金钱，抓住现在非常重要！</p>
 7     </div>
 8 </div>
 9 
10 .box{
11     background: url(img/tile2.gif) repeat-y; 
12 }
13 .box h2{
14     background: url(img/top2.gif) no-repeat top left;
15     padding: 2px 200px;
16 }
17 .box .content{ 
18        background: url(img/bottom2.gif) no-repeat bottom left;
19        padding-bottom: 20px; 
20 }
21 .content p{
22     padding: 2px 10px;
23 }

3.2.纯css实现圆顶角---细快组合，模拟圆角

View Code

 1 <div class="box">  
 2     <b class="b1"></b>
 3     <b class="b2"></b>
 4     <b class="b3"></b>
 5     <b class="b4"></b>
 6     <div class="content">
 7         <p>hello world!</p><p>hello world!</p>
 8                 <p>hello world!</p><p>hello world!</p>
 9     </div>
10     <b class="b4"></b>
11     <b class="b3"></b>
12     <b class="b2"></b>
13     <b class="b1"></b>
14 </div>
15 
16 .b1,b2,b3,b4{
17       display: block;
18       height: 1px;
19       overflow: hidden;
20       color:#96C2F1;
21 }
22 .b1{
23      margin:0 5px;
24 }
25 .b2{
26      margin:0 3px;
27      border-left:1px solid;border-right:1px solid;
28 }
29 .b3{
30      margin:0 2px;
31      border-left:1px solid;border-right:1px solid;
32 }
33 .b4{
34      margin:0 1px;
35      border-left:1px solid;border-right:1px solid;
36 }
37 .content{
38       border-left:1px solid;border-right:1px solid;
39 }

4.绝对底部

<div id="wrap">
    <div id="main" class="clearfix">
          <div id="content"> </div>
          <div id="side"> </div>
     </div>
</div>

<div id="footer">
</div>

#main {padding-bottom: 150px;}  /* 必须使用和footer相同的高度 */
#footer {position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;
}

5.清楚浮动的方法

5.1、添加空标签

View Code

1 <div class="box">  
2     <img src="img/tang.jpg" width="200px" height="200px" /> 
3     <p>some textsome textsome </p>
4     <div class="clear"></div>
5 </div>
6 
7 .clear{
8     clear: both;
9 }

缺点：造成标签的浪费

5.2、使用afer伪类

View Code

 1 <div class="box  clear">  
 2     <img src="img/tang.jpg" width="200px" height="200px" /> 
 3     <p>some textsome textsome </p> 
 4 </div>
 5 
 6 .clear:after{
 7      display:block;
 8      content:"";
 9      height:0;
10      visibility: hidden;
11      clear: both;
12 }
13 .clear{
14     display: inline-block;
15 }
16 /*Holly Hack targets IE win only\*/
17 *html .clear{
18     height:1%;
19 }
20 .clear{
21     display: block;
22 }
23 /*end holly Hack*/

5.3、触发BFC（block formatting context）

View Code

 1 <div class="box">  
 2     <img src="img/tang.jpg" width="200px" height="200px" /> 
 3     <p>some textsome textsome </p>
 4     <div class="clear"></div>
 5 </div>
 6 
 7 /*  using overflow  8/
 8 .box{
 9     overflow: hidden;
10     zoom: 1;    //加入低版本的IE
11 }  
12 /*也可使用float来触发BFC，但是后面存在后遗症*/
13 .box{
14    float: left;
15 }

6. 关于布局的总结

6.1、两列定宽的布局

View Code

 1 <div id="container">
 2     <div id="mainBox"> 
 3         <p>hello</p> <p>hello</p> <p>hello</p> 
 4     </div>
 5     <div id="sideBox">
 6         <p>world</p>
 7     </div>
 8 </div>
 9 
10 #container{
11     width: 900px;
12         background: red;
13     overflow: hidden;
14 }
15 #mainBox{
16     float: left; 
17     background:#555; 
18     width: 600px;
19 }
20 #sideBox{
21     float: right;
22     width: 300px;
23     background: yellow;
24 }

6.2、两列自适应

View Code

 1 <div id="container">
 2     <div id="mainBox"> 
 3         <p>hello</p> <p>hello</p> <p>hello</p> 
 4     </div>
 5     <div id="sideBox">
 6         <p>world</p>
 7     </div>
 8 </div>
 9 
10 #container{
11     width: 900px;
12     background: red;
13     overflow: hidden;
14 }
15 #mainBox{
16     float: left; 
17     background:#555; 
18     width: 70%;
19 }
20 #sideBox{
21     float: right;
22     width: 30%;
23     background: yellow;
24 }

与6.1相比也就是将width设置为百分数

6.3、单列固定，单列自适应（参考详解）:使用绝对定位，缺点绝对定位无法撑开父容器的高度。

View Code

 1 <div id="container">
 2     <div id="mainBox"> 
 3         <p>hello</p>  
 4     </div>
 5     <div id="sideBox">
 6         <p>world</p>
 7     </div>
 8 </div>
 9 
10 #container{
11     position: relative; 
12     background: red;
13     overflow: hidden;
14 }
15 #mainBox{  
16     background:#555;
17     margin-right: 200px;
18 }
19 #sideBox{
20     position: absolute;
21     top: 0; right: 0;
22     width: 200px;
23     background: yellow; 
24 }

该实例使用了固定部分使用绝对定位，自适应元素使用margin。还可以使用float固定列，margin自适应列。

6.4、单列固定，单列自适应：float+margin

写法1

 1 <div id="content"> 
 2     <div id="left">
 3         <div class="aa">left</div>
 4     </div>
 5     <div id="right">right</div>    
 6 </div>
 7 
 8 <style>
 9     #left{
10         float: left;
11         width: 100%; 
12         background: red;
13         
14     }
15     .aa{
16         margin-right: 210px;
17     }
18     #right{
19         float: left;
20         width: 200px;
21         margin-left: -200px;
22         background: green;
23     }
24 </style>

写法2

 1 <div id="content"> 
 2     <div id="left">
 3         <div class="aa">left</div>
 4     </div>
 5     <div id="right">right</div>    
 6 </div>
 7 
 8 <style>
 9      #left{
10         float: left;
11         width: 100%; 
12         background: red;
13         margin-left: -210px;
14     }
15     .aa{
16         margin-left: 210px;
17     }
18     #right{
19         float: left;
20         width: 200px; 
21         background: green;
22     }
23 </style>

6.5、三列布局，两列定宽，一列自适应

<div id="container">
    <div class="mainBox">
        <div class="content"></div>
    </div>
    <div class="sub"></div>
    <div class="slide"></div>
</div>

#container{
    float: left;
    width: 100%;
}

.content{
    margin: 0 210px 0 310px;  
}

#sub{
    float: left;
    width: 300px;
    margin-left: 100%;
}
#slide{
   float: left;
   margin-left: -200px;
   width: 200px;
}

7.使浮动元素居中

View Code

 1 <div id="nav">
 2     <ul>
 3          <li><a href="#">a</li>
 4           <li><a href="#">a</li>
 5           <li><a href="#">a</li>
 6     </ul>
 7 </div>
 8 
 9 <script>
10  #nav{
11     float: left;
12     position:relative;
13     left:50%;
14 }
15 #nav ul{
16    position: relative;
17    left: -50%;
18    list-style: none;
19 }
20 
21 #nav ul li{
22    float: left;
23   position: relative;
24 }

8.自适应宽度的按钮 参见 1

<a href="javascript:void(0);" class="btn1"><cite>inline-block方法</cite></a>

.btn1 {
    display: inline - block;
    background: url(.. / image / sina_gray_btn.png) no - repeat left top;
    padding - left: 3px;
    color: #000000;
    font - size: 12px;
    text - decoration: none;
}
.btn1 cite {
    display: block;
    line - height: 26px;
    padding: 0 13px 0 10px;
    background: url(.. / image / sina_gray_btn.png) no - repeat right top;
}

<a href="javascript:void(0);" class="btn1"><cite>float方法</cite></a>

.btn2 {
    float: left;
    background: url(.. / image / sina_gray_btn.png) no - repeat left top;
    padding - left: 3px;
    color: #000000;
    font - size: 12px;
    text - decoration: none;
}
.btn2 cite {
    display: block;
    line - height: 26px;
    padding: 0 13px 0 10px;
    background: url(.. / image / sina_gray_btn.png) no - repeat right top;
}

posted @ 2013-04-23 14:57 沙漠孤鹰1140 阅读(471) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

沙漠孤鹰1140

前端开发---因为热爱，所以执着。

css技巧总结(未完待续)

公告