????：<!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中文網(wǎng).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:ipnx.cn">php中文網(wǎng)</a></li>
<li><a href="https://hao.#">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>
?? ???：天蓬老師?? ??：2019-01-13 10:18:53
???? ??：清浮動用:after偽類更優(yōu)雅, 不需要在頁面中添加新元素:after { clear:both;content:'';display:block;}