bootstrap實戰經驗

時間 2019-11-16

標籤 bootstrap 實戰經驗欄目 Bootstarp 简体版

原文原文鏈接

凡是基本的佈局須要float實現的，均可以考慮利用網格佈局。css

1，.jumbotron能夠造成一個青灰色的背景，並自動調節對應邊距html

2，.panel的應用十分普遍，能夠自動設置合適的padding.甚至利用它實現footer等(panel-footer)jquery

3, text-justify對齊方式的使用bootstrap

4，可使用網格佈局來控制圖片的大小，結合max-width:100%.api

5，top 和left是針對元素的左上角而言，absolute定位的佔據必定面積的元素而言，針對於父元素的水平居中對齊，使用left:50%後，還須要margin:-水平寬度的一半。app

6，外圍元素設定clearfix以後，能夠解決其中的浮動元素凸出的問題，但是若是外圍元素浮動定位，內層元素決定定位形成的凸出，不能使用這種方法來解決，只可以定義外圍元素的高度。ide

7，若是height，line-height比元素的默認高度還小，不可能獲得垂直居中的效果。wordpress

8，元素一旦脫離頁面流（float，絕對定位，相對定位），就至關於一個inline-block，能夠爲之設定寬度，爲內連元素設置寬度沒有效果。佈局

9，爲連接設置樣式要遵循love hate的順序（link,visited,hover,active）ui

10，bootstrap默認的樣式能夠被覆蓋，例如，對於輪播組件，能夠利用下列代碼更改左右導航的樣式。

11.建立響應式的佈局，對於外層div的width，margin等，要善於利用百分比做爲單位；同時限定max-width諸如：

.section{
    width:75%;
    max-width:600px;
    margin:5% auto 0;
    background-color:rgba(255,255,255,0.3);    
    padding:3%;
}

百分比響應式佈局

.carousel-control.left, .carousel-control.right {
  top: 40%;
  background: none;
  font-size: 50px;
}

輪播導航樣式覆蓋

12,善於使用rgba形成蒙版效果

13，bootstrap的col之間沒有margin，可是內部有必定的padding。

14,利用transform，transion能夠實現一些2d，乃至3d的旋轉效果，一個示意能夠參見：http://codepen.io/betdream/details/qiGrg

項目總結

1、<!--timeline--項目>

1.如何實現帶有箭頭的div，利用：before,:after以及對應的border屬性，其中，border-width以及偏移的設置是有規律而非隨意的。

2，如何實現貫穿頁面中間的豎線，利用before，top:0;bottom:0，width:50%來實現。

該項目值得好好琢磨，具體源代碼以下：

<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/timeline.css">
    <title>timeline佈局</title>
</head>
<body>
<div>
    <div class="container">
        <div class="page-header">
            <h1>Timeline</h1>
        </div>
        <ul class="timeline">
            <li class="timeline-item left"> 
                <div class="timeline-badge info">
                    <span class="glyphicon glyphicon-check"></span>
                </div>
                <div class="timeline-panel">
                    <div class="timeline-title">
                        <h4>Mussum ipsum cacilds</h4>
                        <p class="text-muted"><small><span class="glyphicon glyphicon-time"></span> 11 hours ago via Twitter</small></p>
                    </div>
                    <div class="timeline-body">
                        <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
                    </div>
                </div>
            </li>
            
            <li class="timeline-item right">
                <div class="timeline-badge primary">
                    <span class="glyphicon glyphicon-envelope"></span>
                </div>
                <div class="timeline-panel">
                    <div class="timeline-title">
                        <h4>Mussum ipsum cacilds</h4>
 
                    </div>
                    <div class="timeline-body">
                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.</p>
                    </div>
                </div>
            </li>
            
            <li class="timeline-item left">
                <div class="timeline-badge sucess">
                    <span class="glyphicon glyphicon-user"></span>
                </div>
                <div class="timeline-panel">
                    <div class="timeline-title">
                        <h4>Mussum ipsum cacilds</h4>
                         
                    </div>
                    <div class="timeline-body">
                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
                    </div>
                </div>
            </li>
            
            <li class="timeline-item right">
                <div class="timeline-panel">
                    <div class="timeline-title">
                        <h4>Mussum ipsum cacilds</h4>
                         
                    </div>
                    <div class="timeline-body">
                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
                    </div>
                </div>
            </li>
            
            <li class="timeline-item left">
                <div class="timeline-badge danger">
                    <span class="glyphicon glyphicon-user"></span>
                </div>
                <div class="timeline-panel">
                    <div class="timeline-title">
                        <h4>Mussum ipsum cacilds</h4>
                         
                    </div>
                    <div class="timeline-body">
                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
                    </div>
                    <div class="timeline-footer">
                        <button class="btn btn-primary"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
                    </div>
                </div>                
            </li>
            
            <li class="timeline-item left">
                <div class="timeline-panel ">
                    <div class="timeline-title">
                        <h4>Mussum ipsum cacilds</h4>
                         
                    </div>
                    <div class="timeline-body">
                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
                    </div>
                </div>
            </li>
            
            <li class="timeline-item right">
                <div class="timeline-badge warning">
                    <span class="glyphicon glyphicon-user"></span>
                </div>
                <div class="timeline-panel">
                    <div class="timeline-title">
                        <h4>Mussum ipsum cacilds</h4>
                         
                    </div>
                    <div class="timeline-body">
                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
                    </div>
                </div>                
            </li>
        <ul>
    </div>
</div>
</body>
</html>

timeline項目html代碼

ul.timeline{
    list-style:none;
    /*
    border:1px solid #000;
    */
    padding:0;
    position:relative;
}
/*實現頁面中間的豎線*/
ul.timeline:before{
    position:absolute;
    width:3px;
    height:auto;
    background:#eee;
    content:"";
    top:0;
    bottom:0;
    left:50%;
    margin-left:-1.5px;
}
.timeline > li{
    /*
    border:2px solid #345;
    */
    margin-bottom:15px;
    padding:20px;
    position:relative;
}    
.timeline >li>.timeline-badge{
    border-radius:50%;
    width:50px;
    height:50px;
    line-height:50px;
    position:absolute;
    top:28px;
    left:50%;
    margin-left:-25px;
    text-align:center;
    font-size:1.3em;
    color:#fff;
    background-color:#eee;
    z-index:1000;
}

.timeline > li > .timeline-panel{
    width:46%;
    border:2px solid #eee;
    box-shadow:0 3px 5px #eee;
    padding:20px;
    position:relative;
    text-align:justify;
}

.timeline > li.left>.timeline-panel{
    float:left;
}

.timeline > li.right>.timeline-panel{
    float:right;
}
.timeline > li:after{
    content:" ";
    display:table;
    clear:both;
}

/*實現帶有左箭頭的div*/
.timeline>li.left>.timeline-panel:before{
    content:"";
    border-left:18px solid #eee;    
    border-top:18px solid transparent;
    border-bottom:18px solid transparent;    
    position:absolute;
    top:12px;
    right:-18px;
    z-index:100;
}
.timeline>li.left>.timeline-panel:after{
    content:"";
    border-left:16px solid #fff;    
    border-top:16px solid transparent;
    border-bottom:16px solid transparent;    
    position:absolute;
    top:14px;
    right:-16px;
    z-index:100;
}


/*實現帶有右箭頭的div*/
.timeline>li.right>.timeline-panel:before{
    content:"";
    border-right:18px solid #eee;    
    border-top:18px solid transparent;
    border-bottom:18px solid transparent;    
    position:absolute;
    top:12px;
    left:-18px;
    z-index:100;
}
.timeline>li.right>.timeline-panel:after{
    content:"";
    border-right:16px solid #fff;    
    border-top:16px solid transparent;
    border-bottom:16px solid transparent;    
    position:absolute;
    top:14px;
    left:-16px;
    z-index:100;
}
.timeline>li .timeline-footer{
    padding-left:10px;
    padding-right:10px;
    border-top:1px solid #eee;
    padding-top:15px;
}

.timeline-badge.primary {
  background-color: #2e6da4 !important;
}
.timeline-badge.success {
  background-color: #3f903f !important;
}
.timeline-badge.warning {
  background-color: #f0ad4e !important;
}
.timeline-badge.danger {
  background-color: #d9534f !important;
}
.timeline-badge.info {
  background-color: #5bc0de !important;
}

timeline項目源代碼

2、<!--網格佈局和列表佈局的轉換>

　　1.如何實現網格佈局和列表佈局的轉換

　　2，如何實現圓角、圓角間隔和hover的動態效果。

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/myblog.css">
</head>
<body>
    <h1 class="banner text-center text-primary">My Blog</h1>
    <div class="container">
        <div class="switch btn-group pull-right">
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-th-large"></span></button>
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-th-list"></span></button>
        </div>
    </div>
    <div class="article_list container">
        <div class="row">
            <div class="article_wrapper col-xs-12">
                <a class="more_link" href="#">more</a>
                <div class="img_wrapper"><img src="img/blog/article1.jpg"/></div>
                <h2 class="article_title ">Lorem ipsum dolor</h2>
                <p class="article_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p>
            </div>
            <div class="article_wrapper col-xs-12">
                <a class="more_link" href="#">more</a>
                <div class="img_wrapper"><img src="img/blog/article2.jpg"/></div>
                <h2 class="article_title ">Lorem ipsum dolor</h2>
                <p class="article_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p>
            </div>
            <div class="article_wrapper col-xs-12">
                <a class="more_link" href="#">more</a>
                <div class="img_wrapper"><img src="img/blog/article3.jpg"/></div>
                <h2 class="article_title ">Lorem ipsum dolor</h2>
                <p class="article_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p>
            </div>
            <div class="article_wrapper col-xs-12">
                <a class="more_link" href="#">more</a>
                <div class="img_wrapper"><img src="img/blog/article4.jpg"/></div>
                <h2 class="article_title ">Lorem ipsum dolor</h2>
                <p class="article_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p>
            </div>
            <div class="article_wrapper col-xs-12">
                <a class="more_link" href="#">more</a>
                <div class="img_wrapper"><img src="img/blog/article5.jpg"/></div>
                <h2 class="article_title">Lorem ipsum dolor</h2>
                <p class="article_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p>
            </div>
        </div>
    </div>
    

        
    <script src="lib/jquery-2.1.4.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/myblog.js"></script>
</body>
</html>

佈局切換html代碼

body{
    background-color: #CDE;
}
.banner{
    font-family:"Times New Roman",Serif;
    font-size:46px;
    font-weight:bolder;
    padding-top:20px;
    padding-left:20px;
}
.switch{
    margin-bottom:10px;
}
 .article_wrapper{
    background-color:#fff;
    padding-left:175px;
    padding-right:75px;
    margin-bottom:30px;
    border-radius:100px;
    position:relative;
    height:150px;
    cursor:pointer;
    
 }
 
 .article_wrapper a{
    position:absolute;
    left:0;
    right:0;
    width:100%;
    height:150px;
    line-height:150px;
    text-align:center;
    font-weight:bolder;
    font-style:italic;
    font-size:40px;
    color:#428bca;
    opacity:0;
    text-decoration:none;
    background-color:#fff;
    border-radius:100px;
    
 }
 .article_wrapper:hover a{
    opacity:1;
 }
 
 .article_wrapper .img_wrapper{
    border-radius:100px;
    padding:10px;
    background-color:#CDE;
    position:absolute;
    left:-10px;
    top:-10px;
    padding:10px;
    height:170px;
    transition:all 0.2s;
 }
 .article_wrapper:hover .img_wrapper{
    padding:5px;
    transform:rotate(5deg);
 }
 
 .article_wrapper img{
    border-radius:100px;
    height:150px;
    transition:all 0.2s;
 }
 .article_wrapper:hover img{
    width:160px;
    height:160px;
 }

 .article_wrapper h2{
    font-size:20px;
    color: #428bca;
    border-bottom:2px solid #CDE;
    height:75px;
    line-height:75px;
    margin-top:0;
 }
 
.article_wrapper p{
    font-size:14px;
 }
 
 /*切換以後的佈局*/
 .blog{
    padding-left:10px;
    padding-right:10px;
    border-radius:5px;    
    height:auto;
    /*修復圖片的top形成的重疊*/
    margin-top:90px;
    /*防止圖片擋住文字*/
    padding-top:85px;
    border-left: 10px solid #CDE;
}

 .blog a{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    padding-top:40px;
    border-radius:5px;
    
 }
 
 
 .blog .img_wrapper{
    position:absolute;
    width:170px;
    top:-85px;
    left:50%;
    margin-left:-85px;
 }

 .blog h2{
    font-size:14px;
    height:37.5px;
    line-height:37.5px;
 }
 .blog p{
    font-size:12px;
    padding-bottom:10px;
 }

佈局切換項目css代碼

3、導航欄的實現

導航欄是本質上是連接列表，要實現水平導航欄的時候，有兩種方案：

首先都要爲a設置樣式:display：block；

1）基於浮動的思想，令li左浮動，這種方法的優勢是li之間不會存在空格，缺點是左浮動要想實現居中的效果須要藉助於其餘方法。

2）給li設置樣式：display:inline-block。這種方法的優勢是容易控制居中對齊（給ul設置樣式text-align:center），缺點是li之間存在空格。

2.多級導航欄

2.1一級導航欄水平，二級導航欄豎直

此時，利用bootstrap的導航組件很容易實現

2.2一級導航欄水平，二級，三級...等多級導航欄豎直

<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/menu.css">
    <title>多級菜單</title>
</head>
<body>
    <div id="mainnav" class="menu">  
        <ul>  
            <li><a href="#">Link</a></li>  
            <li><a href="#">Link</a></li>  
            <li class="expand"><a href="#">Link</a>  
                <ul>  
                    <li><a href="#">Link</a></li>  
                    <li><a href="#">Link</a></li>  
                    <li class="expand"><a href="#">很長很長很長很長很長很長很長很長很長很長</a>  
                        <ul>  
                            <li><a href="#">Link</a></li>  
                            <li><a href="#">Link</a></li>  
                            <li class="expand"><a href="#">LinkLink</a>  
                                <ul>  
                                    <li class="expand"><a href="#">Link</a>  
                                        <ul>  
                                            <li><a href="#">Link</a></li>  
                                            <li><a href="#">Link</a></li>  
                                            <li><a href="#">Link</a></li>  
                                            <li><a href="#">Link</a></li>  
                                            <li><a href="#">Link</a></li>  
                                        </ul>  
                                    </li>  
                                    <li><a href="#">Link</a></li>  
                                    <li class="expand"><span>span 菜單項</span>  
                                        <ul>  
                                            <li><span>span 菜單項</span></li>  
                                            <li><a href="#">Link</a></li>  
                                            <li><a href="#">Link</a></li>  
                                            <li><a href="#">Link</a></li>  
                                            <li><a href="#">Link</a></li>  
                                        </ul>  
                                    </li>  
                                    <li><a href="#">Link</a></li>  
                                    <li><a href="#">Link</a></li>  
                                </ul>  
                            </li>  
                            <li><a href="#">Link</a></li>  
                            <li><a href="#">Link</a></li>  
                        </ul>  
                    </li>  
                    <li><a href="#">Link</a></li>  
                    <li><a href="#">Link</a></li>  
                </ul>  
            </li>  
            <li><a href="#">Link</a></li>  
            <li><a href="#">Link</a></li>  
        </ul>  
    </div>  
    <script src="lib/jquery-2.1.4.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>

多級豎直導航html

.menu ul{
    margin:0;
    padding:0;
    list-style:none;
}

.menu a,.menu span{
    text-decoration:none;
    display:block;
    height:30px;
    line-height:30px;
    overflow:hidden;
}
.menu>ul>li{
    float:left;
    width:60px;
    overflow:visibility;
}
.menu>ul>li ul{
    display:none;
    width:160px;
    border:1px solid highlight;
}
.menu li:hover>ul{
    display:block;
}
.menu li:hover>a{
    background-color:highlight;
}
.menu>ul>li li{
    width:160px;
}
.menu>ul>li>ul>li ul{
    position:absolute;
    margin-left:155px;
    margin-top:-30px;
}
.menu>ul>li li.expand{
    padding-right:20px;
}

多級豎直導航css樣式

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>純 CSS 多級菜單</title>
    <style>
        .menu{}
        .menu ul,.menu li{margin:0; padding:0;list-style:none outside;}
        .menu>ul{overflow:auto; display:inline-block;}
        .menu a,.menu span{ cursor:default; height:30px; line-height:30px; padding:0 5px; display:block; text-overflow:ellipsis; overflow:hidden; text-decoration:none; color:MenuText;}
        .menu a:hover,.menu span:hover,.menu li:hover>a,.menu li:hover>span{color:HighlightText;}
        .menu li:hover{background-color:Highlight;}
        .menu li:hover>ul{display:block;}
        .menu>ul>li{float:left;}
        .menu>ul>li ul{display:none;float:left; background-color:#fff; border:1px solid Highlight; position:absolute;}
        .menu>ul>li li{padding-left:25px;margin:2px;background:transparent url(data:image/gif;base64,R0lGODlhEAAQAIAAAJmZmf///yH5BAAAAAAALAAAAAAQABAAAAIjhI9pwe2+nmRRIQrmjBrmYB1Y93Ak+IXVd6LtiIZwa5JqWAAAOw==) no-repeat 5px center; width:150px;}
        .menu>ul>li>ul>li ul{margin-left:140px; margin-top:-30px;}
        .menu li.expand>a,.menu li.expand>span{background:transparent url(data:image/png;base64,R0lGODlhAwAQAIABAAAAAP///yH5BAEAAAEALAAAAAADABAAAAIKjI8JBtv/wko0FQA7) no-repeat right center; padding-right:10px; margin-right:5px;}
        .menu>ul>li.expand>a,.menu>ul>li.expand>span{ background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAADCAYAAACwAX77AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAaSURBVBhXY2BgYPiPAwOFMSXBgjAA0wnmAwASVQv19UVKmwAAAABJRU5ErkJggg==);}
    </style>
</head>

<body>

    <div id="mainnav" class="menu">
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="expand"><a href="#">Link</a>
                <ul>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="expand"><a href="#">很長很長很長很長很長很長很長很長很長很長</a>
                        <ul>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li class="expand"><a href="#">LinkLink</a>
                                <ul>
                                    <li class="expand"><a href="#">Link</a>
                                        <ul>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Link</a></li>
                                    <li class="expand"><span>span 菜單項</span>
                                        <ul>
                                            <li><span>span 菜單項</span></li>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>

</body>
</html>

多級豎直導航完整版

上述案例中值得注意的是兩點：

1）height:30px;line-height:30px;overflow:hidden能夠控制，即便文本過長，依舊能保證樣式正常

2）絕對定位元素的非絕對定位用法，通常來講，position：absolute一般的用法是設置在position非static的父元素中（不然就是相對於body），經過設置top,left,bottom,right來控制佈局；在本例中，則是利用無定位值的margin屬性，將其佔據的原來位置讓出，推離原位置。能夠參見http://www.zhangxinxu.com/wordpress/2010/01/absolute%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%9A%84%E9%9D%9E%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%94%A8%E6%B3%95/（這篇博客有些結論是錯誤的，不過其思考的思路能夠借鑑）

3）width：100%寬度的指定

（1）對於不存在其餘關係的嵌套，width：100%是直接基於父元素（父元素爲塊狀元素或者寬度指定）

（2）對於存在float的嵌套，結論（1）依舊成立（由於float沒有脫離頁面流嘛）

（3）對於子元素是position：absolute的嵌套，要是其外層的全部元素中都沒有用position:relative/absolute/fixed，則width:100%是基於body，不然就是離基最近的一個position:relative/absolute/fixed的元素。(畢竟，position：absolute就是針對於最近一個非static定位的父元素進行定位的嘛)

（4）對於子元素是Postion：relative的嵌套，它是相對於其原本的位置進行定位，無論其父元素有沒有設置特殊定位，其width:100%都是相對於距離它最近的父元素。

（5）fixed元素的width：100%始終相對於body進行定位。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。