试着写一个简单的导航栏,给li标签设置了浮动,虽然li标签同行了,但是发现li标签不在div内(指如果高度不够长,我div高度是40px),试了好多,原来是忘了清楚浮动,上代码!!
我的是HTML5,至于其他的还没尝试过
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
//就是这个"*",清除所有标签的外边距和内边距,
* {
margin:0px;
padding:0px;
}
#div1 {
height: 40px;
width: 100%;
border: 1px solid red;
background-image: url(css/logo.png);
background-repeat: no-repeat;
background-size:70px 37px ;
background-position-x: 10px;
}
#div1 ul {
border: 1px solid green;
width: 300px;
height: 40px;
list-style: none;
margin-left: 100px;
}
#div1 ul li{
border: 1px solid black;
float: left;
margin:8px 28px 8px 0px;
}
a:link {
text-decoration: none;
color: #000000;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">留言板</a></li>
<li><a href="#">个人信息</a></li>
</ul>
</div>
</body>
</html>