摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>yundao</title> <style> *{margin:0px;padding: 0px;} li { list-style:&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>yundao</title>
<style>
*{margin:0px;padding: 0px;}
li {
list-style: none;
}
a{
text-decoration: none;
}
.header{
width: 1002px;height: 100px;
background-color: #fafafa;
margin:0 auto;
}
.logo{
float: left;
}
.inner{
float: right;
}
.nav{
width: auto;
clear: both;
}
/*.nav::after{
content:"";
display:block;
clear:both;
}*/
.nav>li { /*導(dǎo)航欄li設(shè)置*/
float: left;
text-align: center;
margin-top: 20px;
margin-right:10px;
display: inline-table;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width: 75px;
height: 50px;
line-height: 50px;
position: relative;/*相對(duì)定位*/
}
.nav li a{
height: 20px;
color: #333;
/*display:inline-table;*/
}
.nav_ul{ /*下拉欄*/
display: none; /*隱藏下拉欄盒子*/
border: 1px #ccc;
height: 120px;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
/*padding-left: 10px;*/
position: absolute;/*絕對(duì)定位*/
}
.nav_ul li a{
display:block;
margin-top: 10px;
height: 22px;
line-height: 22px;
text-align: center;
width: 75px;
}
.nav_ul li{
/*float: none;*/
}
.nav li:hover > ul{
/* margin-top: -40px;*/
display: block;/*展開(kāi)下拉欄盒子*/
}
.nav_ul li a:hover{
background:linear-gradient(to bottom,red,green);
}
</style>
</head>
<body>
<div>
<div> <!-- logo左浮動(dòng) -->
<a href="#"><img src="images/logo.png" alt=""></a>
</div>
<div> <!-- 導(dǎo)航欄右浮動(dòng) -->
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">商城</a>
<ul>
<li><a href="http://tmall.com">天 貓</a></li>
<li><a href="http://jd.com">京 東</a></li>
<li><a href="#"> 亞馬遜</a></li>
</ul>
</li>
<li><a href="#">門店</a>
<ul>
<li><a href="http://tmall.com">青秀區(qū)</a></li>
<li><a href="http://jd.com">興寧區(qū)</a></li>
<li><a href="#">江南區(qū)</a></li>
</ul>
</li>
<li><a href="#">平臺(tái)</a></li>
<li><a href="#">媒體</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
</div>
</div>
</body>
</html><p> 利用display的特性來(lái)隱藏和展出div盒子，以達(dá)到下拉欄的效果</p>
批改老師：滅絕師太批改時(shí)間：2018-11-22 17:29:07
老師總結(jié)：布局有時(shí)候就是巧妙的運(yùn)用標(biāo)簽屬性的特性哦！