代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻頁+導航條</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 958px;
height: 40px;
border: 1px solid #dddddd;
margin: 50px auto;
}
.box1-1{
width:510px;
height: 40px;
margin: 7px auto;
}
.box1-1 a:link{
display: inline-block;
color: black;
text-decoration: none;
background-color: gold;
text-align: center;
font: 12px "微軟雅黑";
padding: 5px 10px;
margin: 0px 5px;
}
.box1-1 a:hover{
background-color: red;
}
.box1-1 a:visited{
color:black;
}
span{
font-weight: bold;
}
.nav{
list-style: none;
width: 728px;
height: 27px;
border: 1px solid #8d8d8d;
padding: 6.5px 116px;
margin: 0px auto;
}
li{
float: left;
}
.menu:link{
display: block;
width: 90px;
text-align: center;
color: #333;
text-decoration: none;
font-size: 14px;
font-family: "微軟雅黑";
padding: 4px;
}
.menu:hover{
background-color: red;
}
.menu:visited{
color: #333;
}
</style>
</head>
<body>
<div class="box1">
<div class="box1-1">
<a href="#">上一頁</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<span>...</span>
<a href="#">17</a>
<a href="#">18</a>
<a href="#">19</a>
<a href="#">20</a>
<a href="#">下一頁</a>
</div>
</div>
<ul class="nav">
<li><a href="#" class="menu">首頁</a></li>
<li><p class="menu">|</p></li>
<li><a href="#" class="menu">網(wǎng)站建設</a></li>
<li><p class="menu">|</p></li>
<li><a href="#" class="menu">程序開發(fā)</a></li>
<li><p class="menu">|</p></li>
<li><a href="#" class="menu">網(wǎng)絡營銷</a></li>
<li><p class="menu">|</p></li>
<li><a href="#"class="menu">企業(yè)VI</a></li>
<li><p class="menu">|</p></li>
<li><a href="#" class="menu">案例展示</a></li>
<li><p class="menu">|</p></li>
<li><a href="#" class="menu">聯(lián)系我們</a></li>
</ul>
</body>
</html>
效果圖：
1.png
第二個導航圖第二種制作方法是在外部 又套了一個盒子，設置內(nèi)部列表所在盒子的內(nèi)邊距來調(diào)整位置。
代碼二如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>導航</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 958px;
height: 40px;
border:1px solid;
margin: 50px auto;
}
.nav{
width: 728px;
list-style-type: none;
margin: 0px 116px;
}
li{
float:left;
}
a:link,p{
display: block;
color: #333;
width: 56px;
height: 20px;
text-align:center;
font:14px "微軟雅黑";
text-decoration: none;
margin: 10px 0px;
}
a:hover{
background-color: yellow;
}
a:visited{
color: #333;
}
</style>
</head>
<body>
<div class="box1">
<ul class="nav">
<li><a href="#">首頁</a></li>
<li><p>|</p></li>
<li><a href="#">網(wǎng)站建設</a></li>
<li><p>|</p></li>
<li><a href="#">程序開發(fā)</a></li>
<li><p>|</p></li>
<li><a href="#">網(wǎng)絡營銷</a></li>
<li><p>|</p></li>
<li><a href="#">企業(yè)VI</a></li>
<li><p>|</p></li>
<li><a href="#">案例展示</a></li>
<li><p>|</p></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
</body>
</html>
效果如下：
2.png
