網頁導航欄 html + css的程式碼實現
一般來講，我們的網頁導航欄
是這麼個模式來構建
在結構上：
1.首先我們需要給導航欄的div 給個類名 一般為nav
2.然後就是一個無序表格
3.由於導航欄的文字一般都是連結用來跳轉頁面 要在li裡面包含一個a
<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">云云商城</a></li>
<li><a href="#">智慧門店</a></li>
<li><a href="#">營銷平臺</a></li>
<li><a href="#">媒體聯盟</a></li>
<li><a href="#">關於雲道</a></li>
</ul>
</div>在樣式上： 目前我見過的分為兩種
導航欄的文字 裸露 也就是沒有滑動門的那種
比如這種
1.首先寫網頁之前就要取消 網頁預設的邊距，不然不管你寫什麼都跟別人的不一樣。但是後期就不能這麼寫了。
* {
margin: 0; // *是通配選擇器 選擇所有的標籤
padding: 0;
}
2.對於表格中的樣式 也就是li中的小點點 要進行初始化
因為不同瀏覽器對小點點的相容不支援 而且 小點點也沒有那麼美觀好看 顯得很雞肋
ul {
list-style: none;
}
3.對於連結 我們一般都取消下劃線的寫法 因為不夠美觀處理如下
a {
text-decoration: none;
}
1.2.3 三點都是寫導航欄之前的初始化問題
接下來就是讓表格裡面的li 排列在一行，並且使得li垂直居中，而且要控制之間的距離，我們一般用浮動來做比較好，浮動的最大的作用就是讓多個div在一行顯示 並且脫標 不再佔有位置。
.nav li {
float: left;
margin: 0 10px;
}
4.由於文字長度不能確定 又因為是純文字沒有必要轉換為塊級元素 所以不能夠給a轉換成塊級元素 賦予寬 和 高（高根據字型大小會自動確定） 把a當作文字一樣用的好處是 容易居中對齊
一般垂直居中對齊用的就是行高 等於高 也就是 line-height == height
5.接下來再給li之間設定間距
有兩種寫法 在這裡使用起來基本沒有什麼效果的差距
接著複習一下margin 和 padding的區別把
padding 會撐開盒子 內邊距 如圖
、
margin會真正意義上的隔開距離 外邊距 如圖
由於寫部落格的人是個菜逼 分不清楚用這兩個哪個好 大家就問一下大佬們把 問到的也給我說一下哈哈哈哈哈
好了接下來是另一種導航欄的寫法 有推拉門的那種
這種寫法跟我上述中講的不太一樣 因為在這裡面的 a標籤 需要轉換成塊級元素
轉換成塊級元素的目的呢 就是滑動門的原理了
滑動門的原理簡單來講 是這麼個結構
<a>
<span> </span>
</a>
通過給 標籤a 一個背景圖片定位到左端
給標籤span 一個背景圖片定位到右端
如圖
左端綠色部分 作為a的背景 右端綠色部分 作為 span 的背景 （左a 右s）
這樣實現起來的話 無論文字有多長都可以滑動剛好是這個樣子 大概如微信官網 如圖
由於字型不一樣長而背景又需要相同的樣式 也就是滑動門原理
跟上述純文字 導航欄不同的是 不能夠再利用行高=高來垂直居中這些個a了
我們在垂直居中的時候就可以利用padding-top 這個屬性來操作（我查了微信的程式碼 也是這麼做的）
不再贅述 程式碼如下
<!doctype html>
<html lang="en">
<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">
<title>微信，是一種生活方式</title>
<style>
/*標題導航欄開始*/
* {
margin: 0;
padding: 0;
} body { background: url(wx.jpg) repeat-x; } li { list-style: none ; } a { text-decoration: none; } .nav li { float: left; margin: 0 40px; padding-top:21px; } .nav a{ height: 33px; background: url("to.png") no-repeat left; padding-left: 10px; color: #fff; display: block; line-height: 33px; font-weight: 700; font-size:14px; } .nav span { height: 33px; display: block; background: url("to.png") no-repeat right; padding-right: 10px; } .nav a:hover { background: url("ao.png") no-repeat left; } .nav a:hover span { background: url("ao.png") no-repeat right; } </style> </head> <body> <div class="top"> <div class="nav"> <ul> <li><a href="#"><span>首頁</span></a></li> <li><a href="#"><span>聯絡電話</span></a></li> <li><a href="#"><span>活動中心</span></a></li> <li><a href="#"><span>使用者指導</span></a></li> <li><a href="#"><span>關於我們</span></a></li> </ul> </div> </div> </body> </html>