翻页及导航栏制作
2018-09-11 本文已影响0人
zhaodadaya
代码：
<!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">网站建设</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">网络营销</a></li>
<li><p class="menu">|</p></li>
<li><a href="#"class="menu">企业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">联系我们</a></li>
</ul>
</body>
</html>
效果图：
1.png
第二个导航图第二种制作方法是在外部 又套了一个盒子，设置内部列表所在盒子的内边距来调整位置。
代码二如下：
<!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="#">网站建设</a></li>
<li><p>|</p></li>
<li><a href="#">程序开发</a></li>
<li><p>|</p></li>
<li><a href="#">网络营销</a></li>
<li><p>|</p></li>
<li><a href="#">企业VI</a></li>
<li><p>|</p></li>
<li><a href="#">案例展示</a></li>
<li><p>|</p></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
效果如下：
2.png
