摘要：<!doctype html><html><head><meta charset="utf-8"><style type="text/css">body{background:url(http://p1.so.qhmsg.com/bdr/1440__/t010351904f140a2796.jpg)
<!doctype html>
<html><head><meta charset="utf-8">
<style type="text/css">
body{background:url(http://p1.so.qhmsg.com/bdr/1440__/t010351904f140a2796.jpg) no-repeat; background-position:center top /*31px 60px*/;}
.a01{width:200px;height:50px;background-color:pink;line-height:50px;text-align:center;font-size:20px}
.a02{width:200px;height:200px;background-color:#F0F0F0;line-height:50px;text-align:center;font-size:20px;display:none;}
.a01:hover .a02 {display:block;}
a{text-decoration:none;color:#000;}
a:hover{color:red;}
.box{width:200px;height:130px;border:5px solid;position:absolute;left:215px;top:8px;}
.box1{width:1200px;height:50px;position:absolute;top:160px;}
ul li{list-style:none;width:120px;height:50px;line-height:50px;text-align:center;background-color:#562; margin:0px 5px;float:left;top:0px;}
</style>
</head>
<body>
<div class=a01>下拉導(dǎo)航條
<div class=a02>
<a href="#" >下拉菜單一</a><br>
<a href="#" >下拉菜單一</a><br>
<a href="#" >下拉菜單一</a><br>
<a href="#" >下拉菜單一</a>
</div></div>
<div class=box></div>
<div class=box1>
<ul>
<li><a href="#">網(wǎng)站菜單01</a></li>
<li><a href="#">網(wǎng)站菜單01</a></li>
<li><a href="#">網(wǎng)站菜單01</a></li>
<li><a href="#">網(wǎng)站菜單01</a></li>
<li><a href="#">網(wǎng)站菜單01</a></li>
<li><a href="#">網(wǎng)站菜單01</a></li>
</ul></div>
</body>
</html>
批改老師：天蓬老師批改時間：2019-03-05 13:31:37
老師總結(jié)：元素通過絕對定位與浮動之后, 都會脫離文檔流, 且全部轉(zhuǎn)為塊級元素, 可以讓你按自己的想法, 進(jìn)行重新排列, 這是最常用的二種布局技術(shù)