abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用的導(dǎo)航菜單</title> <style type="text/css"> * {/*初始
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用的導(dǎo)航菜單</title>
<style type="text/css">
* {/*初始化標(biāo)簽 默認(rèn)的內(nèi)外邊距 設(shè)置字體顏色*/
padding: 0;
margin: 0;
color: #666666;
}
a{text-decoration: none;color: #ffffff;}/*設(shè)置所有a標(biāo)簽顏色*/
.headr{width: 1200px; margin: 0 auto;}/*設(shè)置總寬度1200 并左右居中*/
.logo{float: left; color: royalblue; font-size: 33px;}/*logo做浮動(dòng)*/
.nav{float: right;}/*導(dǎo)航右浮動(dòng)*/
ul li {/*讓所有的li左浮動(dòng) 變成一行 設(shè)置內(nèi)外邊距*/
list-style: none;
float: left;
background: #9AA4FF;
margin: 5px;
padding: 10px;
border-radius: 5px;
color: #ffffff;
}
/*群組選擇器 讓鼠標(biāo)經(jīng)過(guò)li 和 a變色*/
ul li:hover,
ul li:hover a{color: #004C96;}
ul li ul {/*默認(rèn)隱藏二級(jí)菜單*/
display: none;
}
ul li:hover ul {/*鼠標(biāo)經(jīng)過(guò)一級(jí)菜單顯示對(duì)應(yīng)二級(jí)菜單*/
display: block;
}
ul li ul li {/*重置二級(jí)菜單浮動(dòng) 內(nèi)邊距0*/
float: none;
display: block;
padding: 0;
}
</style>
</head>
<body>
<div class="headr">
<div class="logo">logo</div>
<div class="nav">
<ul>
<li><a href="/">首頁(yè)</a></li>
<li>一級(jí)菜單1
<ul>
<li>
<a href="">二級(jí)菜單</a>
</li>
<li>
<a href="">二級(jí)菜單</a>
</li>
<li>
<a href="">二級(jí)菜單</a>
</li>
</ul>
</li>
<li>一級(jí)菜單2
<ul>
<li>
<a href="">二級(jí)菜單</a>
</li>
<li>
<a href="">二級(jí)菜單</a>
</li>
<li>
<a href="">二級(jí)菜單</a>
</li>
</ul>
</li>
<li>一級(jí)菜單3
<ul>
<li>
<a href="">二級(jí)菜單</a>
</li>
<li>
<a href="">二級(jí)菜單</a>
</li>
<li>
<a href="">二級(jí)菜單</a>
</li>
</ul>
</li>
<li>一級(jí)菜單4
<ul>
<li>
<a href="">二級(jí)菜單</a>
</li>
<li>
<a href="">二級(jí)菜單</a>
</li>
<li>
<a href="">二級(jí)菜單</a>
</li>
</ul>
</li>
<li>一級(jí)菜單5
<ul>
<li>
<a href="">二級(jí)菜單</a>
</li>
<li>
<a href="">二級(jí)菜單</a>
</li>
<li>
<a href="">二級(jí)菜單</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Correcting teacher：查無(wú)此人Correction time：2019-07-08 09:21:49
Teacher's summary：完成的不錯(cuò)。css樣式學(xué)好，做出來(lái)的頁(yè)面很絢麗。繼續(xù)加油。