abstract：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css中的浮动导航条</title> <link rel="shortcut icon" type="image/x-icon" href=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css中的浮动导航条</title>
<link rel="shortcut icon" type="image/x-icon" href="images/php中文网.jpg">
<style type="text/css">
ul li{list-style:none;width:100px;height:40px;line-height:40px;text-align:center;background-color:#ccc;margin:5px 1px;float:left;}
.box{width:60px;height:200px;background-color:pink;text-align:center;/*float:left;*/}
.clear{clear:both;}
ul li a{text-decoration:none;color:blue;}
ul li a:hover{color:red;text-decoration:underline;}
</style>
</head>
<body>
<ul>
<li><a href="https:www.baidu.com">百度</a></li>
<li><a href="http:m.sbmmt.com">php中文网</a></li>
<li><a href="https://hao.360.cn">360导航</a></li>
<li><a href="https://www.sina.com.cn">新浪</a></li>
</ul>
<div class="clear"></div>
<div class="box">热点</div>
<div class="box">娱乐</div>
<div class="box">生活</div>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-01-13 10:18:53
Teacher's summary：清浮动用:after伪类更优雅, 不需要在页面中添加新元素:after { clear:both;content:'';display:block;}