CSS横向菜单
源码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/*去掉默认的内边距和外边距*/
* {
margin: 0;
padding: 0;
}
/*设置菜单的大小和位置*/
.list1 ul {
margin: 50px 0 0 40px;
width: 500px;
}
/*去掉项目符号，修改字体并为链接添加间距*/
.list1 li {
list-style: none;
font: 20px "Arial Black", helvetica;
float: left;
}
/*去掉链接下划线并添加内边距*/
.list1 li a {
display: block;
text-decoration: none;
padding: 1px 15px;
}
/*为除第一个项目之外的所有项目添加左边框*/
.list1 li + li a {
border-left: 2px solid #999;
}
/*悬停高亮*/
.list1 a:hover {
color: #069;
}
</style>
</head>
<body>
<nav class="list1">
<ul>
<li><a href="#">Alternative</a></li>
<li><a href="#">Country</a></li>
<li><a href="#">Jazz</a></li>
<li><a href="#">Rock</a></li>
</ul>
</nav>
</body>
</html> 相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18