摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用的導航菜單</title> <style type="text/css"> * {/*初始
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用的導航菜單</title>
<style type="text/css">
* {/*初始化標簽 默認的內(nèi)外邊距 設置字體顏色*/
padding: 0;
margin: 0;
color: #666666;
}
a{text-decoration: none;color: #ffffff;}/*設置所有a標簽顏色*/
.headr{width: 1200px; margin: 0 auto;}/*設置總寬度1200 并左右居中*/
.logo{float: left; color: royalblue; font-size: 33px;}/*logo做浮動*/
.nav{float: right;}/*導航右浮動*/
ul li {/*讓所有的li左浮動 變成一行 設置內(nèi)外邊距*/
list-style: none;
float: left;
background: #9AA4FF;
margin: 5px;
padding: 10px;
border-radius: 5px;
color: #ffffff;
}
/*群組選擇器 讓鼠標經(jīng)過li 和 a變色*/
ul li:hover,
ul li:hover a{color: #004C96;}
ul li ul {/*默認隱藏二級菜單*/
display: none;
}
ul li:hover ul {/*鼠標經(jīng)過一級菜單顯示對應二級菜單*/
display: block;
}
ul li ul li {/*重置二級菜單浮動 內(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="/">首頁</a></li>
<li>一級菜單1
<ul>
<li>
<a href="">二級菜單</a>
</li>
<li>
<a href="">二級菜單</a>
</li>
<li>
<a href="">二級菜單</a>
</li>
</ul>
</li>
<li>一級菜單2
<ul>
<li>
<a href="">二級菜單</a>
</li>
<li>
<a href="">二級菜單</a>
</li>
<li>
<a href="">二級菜單</a>
</li>
</ul>
</li>
<li>一級菜單3
<ul>
<li>
<a href="">二級菜單</a>
</li>
<li>
<a href="">二級菜單</a>
</li>
<li>
<a href="">二級菜單</a>
</li>
</ul>
</li>
<li>一級菜單4
<ul>
<li>
<a href="">二級菜單</a>
</li>
<li>
<a href="">二級菜單</a>
</li>
<li>
<a href="">二級菜單</a>
</li>
</ul>
</li>
<li>一級菜單5
<ul>
<li>
<a href="">二級菜單</a>
</li>
<li>
<a href="">二級菜單</a>
</li>
<li>
<a href="">二級菜單</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
批改老師：查無此人批改時間：2019-07-08 09:21:49
老師總結(jié)：完成的不錯。css樣式學好，做出來的頁面很絢麗。繼續(xù)加油。