代码：
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css" media="screen">
body,ul,li{
margin:0;
padding:0;
}
ul li{
list-style-type: none;
float:left;
}
ul{
height: 50px;
}
.firsta{
border-radius: 10px 0 0 10px;
}
.lasta{
border-radius: 0 10px 10px 0 ;
}
a{
text-decoration: none;
display:block;
background-color:#2f3e45;
color:white;
height: 50px;
width: 100px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<ul>
<li><a class="firsta" href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
<li><a class="lasta" href="#">下拉菜单</a></li>
</ul>
<h3>我是测试文字</h3>
</body>
</html>
一开始将ul放到一个div里面，发现只要内容变多 超出div，就掉出去了，看不到全部内容。看了别人的代码，发现可以不用div，直接用ul，可以给ul一个类名，以此设置其样式（我懒，没有通过类名给ul设置样式，这样是不好的，尤其代码很多很多的时候）。然后给a标签设置样式，首先将其转为block样式，设置宽高文字样式（字体颜色居中等），当给a设置宽高后，你在body标签里不论添加多少内容都可以实现一种一劳永逸的感觉，不需要额外设置样式了。
原理……我还不是很清楚。待写吧…………
扫一扫
274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
