摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>下拉框案例小結(jié)</title> <style type="text/css"> *{margin:0px;padding:0px;}/*頭部header*/.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉框案例小結(jié)</title>
<style type="text/css">
*{margin:0px;padding:0px;}
/*頭部header*/
.header{
height: 50px;
width: 100%;
background:pink;
}
.header .nav{
height: 50px;
width: 1000px;
margin: 0px auto;
background:pink;
}
.item{
list-style: none;
float: left;
height: 50px;
line-height: 50px;
margin-right: 20px;
}
li{list-style: none;}
.item a{
text-decoration: none;
color: #fff;
font-size: 16px;
padding: 15px;
position: relative;
}
.item:hover {background-color: #ccc;}
.item a:hover {color: red;}
.xiala{background-color:#ccc;position: absolute; display: none;}
.item:hover .xiala{display: block;}
.item a:hover .xiala li{background-color:#6c6c6c; color: pink;}
/*主體部分main*/
.container{
width: 1000px;
height: 600px;
margin:5px auto;
background-color: #ccc;
}
.wrap{
width: inherit;
min-height: 600px;
background-color: blue;
float: left;
}
.main{
padding-left: 200px;
padding-right: 200px;
}
.left{
width: 200px;
min-height: 600px;
background-color: yellow;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
min-height: 600px;
background-color: pink;
float: left;
margin-left:-200px;
}
/*底部footer*/
.footer{
width: 100%;
height:150px;
background-color: #000;
}
.footer_content{
width: 1000px;
height:150px;
margin:0 auto;
background-color: #000;
}
</style>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li class="item"><a href="">首頁</a></li>
<li class="item"><a href="">視頻教程</a></li>
<li class="item"><a href="">社區(qū)問答</a></li>
<li class="item"><a href="">編程詞典</a></li>
<li class="item"><a href="">手冊下載</a></li>
<li class="item"><a href="">工具下載</a></li>
<li class="item"><a href="">特色課程</a></li>
<li class="item"><a href="">菜鳥課堂</a>
<ul class="xiala">
<li><a href="">社區(qū)問答</a></li>
<li><a href="">編程詞典</a></li>
<li><a href="">手冊下載</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">主體部分</div>
</div>
<div class="left">
左邊11111111111111111111111111111111111
</div>
<div class="right">
右邊
</div>
</div>
<div class="footer">
<div class="footer_content">
<div class="footer_left">
<p style="color:#ccc">PHP中文網(wǎng)：獨家原創(chuàng)，永久免費的在線php視頻教程，php技術(shù)學(xué)習(xí)陣地！</p>
<p style="color:#ccc">Copyright 2014-2018 http://ipnx.cn/ All Rights Reserved | 皖B2-20150071-9</p>
</div>
</div>
</div>
</body>
</html>
下拉框制作的時候主要用到相對定位以及絕對定位的結(jié)合使用
批改老師：韋小寶批改時間：2019-02-12 16:12:07
老師總結(jié)：寫的很不錯 通過css來實現(xiàn)下拉菜單要比js的方便多了 我個人也是比較喜歡使用css來實現(xiàn) 課后記得要多練習(xí)哦！繼續(xù)加油吧！