ConsoleDot
2015-02-24 18:09
效果一样,不知道这样好不好
其实我也是自学的,有很多的地方也不知道好不好,前段时间自己研究了下,遇到有分割线的导航栏或者横向的列表,贴出来了,互相学习哈,求指点~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* reset */
body,ul,li { margin:0; padding:0; list-style:none; }
a { text-decoration:none; }
/* reset end */
/* common */
.clear {
clear:both;
}
.clear:after {
content:"";
display:block;
zoom:1;
}
/* common end */
/* nav */
.nav {
/* 便于观察 */
border:1px solid #eee;
float:left;
}
.nav li {
float:left;
width:100px;
height:50px;
text-align:center;
}
.nav a {
display:block;
height:16px;
border-left:1px solid #000;
color:#000;
font-size:16px;
margin-top:17px;
}
.nav .first a {
border:0;
}
.nav a:hover {
color:#aca;
}
/* nav end */
</style>
</head>
<body>
<!-- nav -->
<ul class="nav clear">
<li class="first"><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>
<!-- nav end -->
</body>
</html>企业网站综合布局实战
157078 学习 · 2157 问题
相似问题