1 纵向菜单：html:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>布局</title> <script type="text/javascript" src="demo.js"&
1 纵向菜单：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<nav class="list"><!--导航栏-->
<ul>
<li><a href='#'>链接1</a></li>
<li><a href='#'>链接2</a></li>
<li><a href='#'>链接3</a></li>
<li><a href='#'>链接4</a></li>
<li><a href='#'>链接5</a></li>
<li><a href='#'>链接6</a></li>
<li><a href='#'>链接7</a></li>
</ul>
</nav>
</body>
</html>css:
*{
margin: 0 ;
padding: 0;
}
nav{
width: 150px;
margin: 10px;
background: #ccc;
}
.list ul{
border: 1px solid #f00;
}
.list ul li{
list-style-type: none; /*去掉圆点*/
}
.list li + li a{ /*非首位子元素*/
border-top:1px solid blue;
}
.list ul li a{
text-align: center;
text-decoration: none;
/*background: #ffed53;*/
color: #000;
display: block;
padding: 3px 10px;
}
.list ul li a:hover{
color: red;
backgr
最低0.47元/天 解锁文章
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
