导航列表边框专题
页面导航栏列表中会有不同种类的边框，今天针对这种情况给大家列举出来几种不同种类的边框怎么添加。希望对大家有所帮助，另外大家在学习前端的过程中，一定要学会总结，分类总结，这样对学习很有帮助，理清思路。学习事半功倍。
<style type="text/css">
*{
margin: 0;
padding: 0;
}
h2{
margin: 50px;
}
body{
font-size: 12px;
}
/*导航有短边框，这个边框给的是a*/
.nav1{
height: 62px;
background: red;
}
.nav1 li{
float: left;
list-style: none;
line-height: 62px;
}
.nav1 li a{
border-right: 1px solid blue;
text-decoration: none;
padding-left: 20px;
padding-right: 20px;
color: #fff;
}
/*导航有长边框，这个边框给的是li*/
.nav2{
height: 62px;
background: red;
}
.nav2 li{
float: left;
list-style: none;
line-height: 62px;
padding-left: 20px;
padding-right: 20px;
border-right: 1px solid blue;
}
.nav2 li a{
text-decoration: none;
color: #fff;
}
/*导航有背景图，可以给li或者给a*/
.nav3{
height: 62px;
background: red;
}
.nav3 li{
float: left;
list-style: none;
line-height: 62px;
padding-left: 20px;
padding-right: 20px;
background: url(images/topbg.jpg) no-repeat left center;
}
.nav3 li a{
text-decoration: none;
color: #fff;
}
/*导航鼠标经过有背景色，给li添加hover*/
.nav4{
height: 62px;
background: red;
}
.nav4 li{
float: left;
list-style: none;
line-height: 62px;
padding-left: 20px;
padding-right: 20px;
}
.nav4 li a{
text-decoration: none;
color: #fff;
}
.nav4 li:hover{
background: pink;
}
/*导航有下边框，是给a添加下边框，然后添加padding-bottom*/
.nav5{
height: 62px;
background: red;
margin-bottom: 100px;
}
.nav5 li{
float: left;
list-style: none;
line-height: 62px;
padding-left: 20px;
padding-right: 20px;
}
.nav5 li a{
text-decoration: none;
color: #fff;
border-bottom: 2px solid blue;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h2>导航有短边框，这个边框给的是a</h2>
<ul class="nav1">
<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>
<h2>导航有长边框，这个边框给的是li</h2>
<ul class="nav2">
<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>
<h2>导航有背景图，可以给li更完美一些</h2>
<ul class="nav3">
<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>
<h2>导航鼠标经过有背景色，给li添加hover</h2>
<ul class="nav4">
<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>
<h2>导航有下边框，是给a添加下边框，然后添加padding-bottom</h2>
<ul class="nav5">
<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>
</body>