2018-09-11 19-31-14.jpg
2018-09-11 19-31-32.jpg
很多网页都会有时候需要导航条或者翻页
比如淘宝网，你要找一个商品，根据导航条来找会更方便一些，今天我们一起来做一个简易的导航条，可以根据你的聪明才智把他做的更完美
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.nav{
/*去除项目符号*/
list-style: none;
border: 1px black solid;
width: 960px;
height: 42px;
/*设置居中*/
margin: 50px auto;
/*解决高度塌陷*/
overflow: hidden;
}
.nav li{
/*设置li向左浮动*/
float: left;
width: 12.5%;
}
.nav a{
/*将a转换为块元素*/
display: block;
/*!*设置文字居中*!*/
text-align: center;
/*设置一个内边距*/
padding: 15px 5px 30px 5px;
/*去除下划线*/
text-decoration: none;
/*设置字体*/
color: #333;
font-family: "微软雅黑";
font-size: 14px;
}
/*设置a的鼠标移入的效果*/
/*.nav a:hover{*/
/*background-color: #cc0000;*/
/*}*/
.nav li span{
padding: 20px;
}
</style>
<body>
<ul class="nav">
<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="#">企业VI<span>|</span></a></li>
<li><a href="#">案例展示<span>|</span></a></li>
<li><a href="#">联系我们<span>|</span></a></li>
</ul>
</body>
</html>
最后效果图如下，还可以做一些美化，使它看起来跟舒心
2018-09-11 19-46-15.jpg
而翻页更是经常见到，通常内容没有办法在一页上显示，这时候一个翻页是非常必要的
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻页</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.box1{
width: 960px;
height: 42px;
background-color: white;
border: 1px #deddd9 solid;
/*设置居中*/
margin: 50px auto;
/*解决高度塌陷*/
overflow: hidden;
text-align: center;
padding-top: 15px;
}
.box1 a{
background-color: gold;
padding: 5px 10px;
font-family: "微软雅黑";
font-size: 12px;
color: black;
/*去除下划线*/
text-decoration: none;
}
</style>
</head>
<body>
<div class="box1">
<a href="#">上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
...
<a href="#">17</a>
<a href="#">18</a>
<a href="#">19</a>
<a href="#">20</a>
<a href="#">下一页</a>
</div>
</body>
</html>
效果图如下：
2018-09-11 19-53-14.jpg
导航条存在一些小瑕疵，难以居中，希望哪位大神可以帮忙解决一下，先谢谢了！
