一般來講，我們的網頁導航欄是這麼個模式來構建在結構上：1.首先我們需要給導航欄的div 給個類名 一般為nav2.然後就是一個無序表格 3.由於導航欄的文字一般都是鏈接用來跳轉頁面 要在li裡面包含一個a 在樣式上： 目前我見過的分為兩種導航欄的文字 裸露 也就是沒有滑動門的那種比如這種 1.首先寫 ...
一般來講，我們的網頁導航欄
是這麼個模式來構建
在結構上：
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>
