用css實現各種導航欄
阿新 • • 發佈：2019-01-09
基本的垂直導航條
通過HTML建立一個無序列表<div> <ul class="nav"> <li><a href="#">home</a></li> <li><a href="#">home</a></li> <li><a href="#">home</a></li> <li><a href="#">home</a></li> <li><a href="#">home</a></li> <li><a href="#">home</a></li> </ul> </div>
利用css處理樣式
<style type="text/css"> ul.nav{ padding:0px; margin:0px; list-style-type:none; width:80px; background-color:#8bd400; border:1px solid #486b02; } /*IE6在列表項的上下添加了額外的空間，為了修復這個BUG，需要將列表上的display屬性設定為inline*/ ul.nav li{ display: inline; } /*不對列表項應用樣式 而是對其中包含的錨鏈接應用樣式，由此提供更好的瀏覽器相容性*/ ul.nav a{ display: block; color:#2B3f00; text-decoration:none; border-top:1px solid #e4ffd3; border-bottom:1px solid #486b02; background:url(img/arrow.gif) no-repeat 2px center; padding:5px 10px; } /*解決最後一個連結的底邊框與列表的底邊框形成雙線的問題*/ ul.nav { border:0; } ul.nav a:hover,ul nav a:focus,ul.nav .selected a{ color:#e4ffd3; background-color:#6da203; } </style>
結果
建立簡單的水平導航條
HTML程式碼<div> <ol class="pagination"> <!-- 如果要在標籤中顯示"<"或者">"等特殊字元，可以使用“&”開頭，“;”結尾，中間加上字元對應的編碼就可以啦 <對應< >對應>--> <li><a href="#" rel="prev"> <<Prev</a></li> <li><a href="#" >1</a></li> <li class="selected">2</a></li> <li><a href="#" >3</a></li> <li><a href="#" >4</a></li> <li><a href="#" >5</a></li> <li><a href="#" rel="next">Next > ></a></li> </ol> </div>
css程式碼
ol.pagination{
margin:0px;
padding:0px;
list-style-type:none;
}
ol.pagination li{
float:left;/*浮動列表項 使用外邊距把他們分開*/
margin-right:10px;
}
ol.pagination a,ol.pagination li.selected{
display: block;
padding:5px 10px;/*控制li中的元素與li之間的距離*/
border:1px solid #ccc;
text-decoration:none;
}
/*滑鼠懸停、獲得焦點時 改變背景和文字的顏色*/
ol.pagination a:hover,ol.pagination a:focus,ol.pagination li.selected{
background-color:blue;
color:white;
}
ol.pagination a[rel="prev"],ol.pagination a[rel="next"]{
border:none;
}
建立圖形化導航欄
html程式碼<div>
<ul class="nav">
<li class="first"><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
</ul>
</div><style type="text/css">
ul.nav{
padding:0px;
margin:0px;
list-style-type:none;
width:390px;
/*background-color:#8bd400;*/
background: #faa819 url("img/mainNavBg.gif") repeat-x;
/*float:left;*/
overflow: hidden;/*可以使用overflow:hidden;技術讓父元素包含浮動子元素*/
}
ul.nav li{
/*display: inline;*/
float: left;/*當元素浮動 將不再佔據文件流中的任何位置 父列表實際上沒有內容 就會收縮 從而隱藏列表背景*/
}
ul.nav a{
display:block;
padding:0 10px;/*每個按鈕的寬度由錨文字的尺寸決定 所以不設定顯示的寬度 而是在每個錨鏈接的左右設定一定的內邊距*/
line-height: 2.2;
text-decoration:none;
color:#fff;
background:url(img/divider.gif) repeat-y left top;
}
ul.nav .first a {
background-image: none;/*去掉第一個連結不必要的分割線*/
}
ul.nav a:hover, ul.nav a:focus{
color:#333;
}
</style>
“滑動門”標籤頁式導航
HTMl程式碼同上 css程式碼<style type="text/css">
ul.nav{
padding:0px;
margin:0px;
list-style-type:none;
width:500px;
overflow: hidden;/*可以使用overflow:hidden;技術讓父元素包含浮動子元素*/
}
ul.nav li{
float: left;/*當元素浮動 將不再佔據文件流中的任何位置 父列表實際上沒有內容 就會收縮 從而隱藏列表背景*/
background:url(img/tab-right.gif) no-repeat right top;/*將組成標籤頁的兩個影象中比較大的影象作為背景影象應用於列表項*/
}
ul.nav a{
display:block;
padding:0 10px;/*每個按鈕的寬度由錨文字的尺寸決定 所以不設定顯示的寬度 而是在每個錨鏈接的左右設定一定的內邊距*/
line-height: 2.2;
text-decoration:none;
color:#fff;
background:url(img/tab-left.gif) no-repeat left top;/*將標籤頁的左邊影象作為背景應用於錨並且左對齊 。當標籤頁改變尺寸時，該影象總是對準左邊，蓋在大影象上面，蓋住左邊的硬邊緣*/
}
ul.nav a:hover, ul.nav a:focus{
color:#333;
}
</style>執行結果
下拉選單
html程式碼<div>
<ul class="nav">
<li class="first"><a href="#">home</a></li>
<li><a href="#">home</a>
<ul>
<li><a href="#">meau</li>
<li><a href="#">meau</li>
<li><a href="#">meau</li>
<li><a href="#">meau</li>
</ul>
</li>
<li><a href="#">home</a></li>
<li><a href="#">home </a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
</ul>
</div>
<style type="text/css">
ul.nav,ul.nav ul{
padding:0px;
margin:0px;
list-style-type:none;
width:492px;
background-color: #8bd400;
float:left;
}
ul.nav li{
float: left;/*當元素浮動 將不再佔據文件流中的任何位置 父列表實際上沒有內容 就會收縮 從而隱藏列表背景*/
width:80px;
border:1px solid #fff;
}
ul.nav a{
display:block;
padding:0 10px;/*每個按鈕的寬度由錨文字的尺寸決定 所以不設定顯示的寬度 而是在每個錨鏈接的左右設定一定的內邊距*/
line-height: 2.2;
text-decoration:none;
color:#fff;
}
ul.nav a:hover, ul.nav a:focus{
color:#333;
}
ul.nav li ul{
width:80px;
position:absolute;
display: none;
margin-top:2px;
}
ul.nav li:hover ul{
display:block;
}
</style>
當滑鼠懸停在第二個導航框的時候
css3製作動態導航選單
.nav{
width:560px;
height: 50px;
font:bold 0/50px Arial;
text-align:center;
margin:40px auto 0;
background: #f65f57;
/*製作圓*/
/*製作導航立體風格*/
}
.nav a{
display: inline-block;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.nav a:hover{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
transform:rotate(10deg);
}
.nav li{
position:relative;
display:inline-block;
padding:0 16px;
font-size: 13px;
text-shadow:1px 2px 4px rgba(0,0,0,.5);
list-style: none outside none;
}
/*使用偽元素製作導航列表項分隔線*/
/*刪除第一項和最後一項導航分隔線*/
.nav a,
.nav a:hover{
color:#fff;
text-decoration: none;
}
當滑鼠放在連線上時 字型會向右傾斜十度