css 导航栏

时间：2015-04-28 17:55:29 阅读：181 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<style type="text/css">
.nav{
width: 100%;
height: 40px;
background: #000000;
line-height: 20px;
text-align: center;
}
.nav ul{
display: inline-block;
}
.nav ul li{
display: inline-block;
width: 60px;
padding:10px;
text-align: center;
color: #fff;
}
.nav ul li a{
color: #fff;
}
/**
* first-child 获得第一个元素
* IE6、IE7不支持 first-child 属性
* */
.nav ul li:first-child{
background: dodgerblue;
}
.nav ul li:hover{
background: dodgerblue;
}
</style>
</head>
<body>
<nav class="nav">
<ul>
<li><a href="">home</a></li><li><a href="">home</a></li><li><a href="">home</a></li><li><a href="">home</a></li><li><a href="">home</a></li>
</ul>
</nav>
</body>
</html>

标签：

原文地址：http://www.cnblogs.com/jalja/p/4463228.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行