abstract：html代碼：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" hr
html代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style3.css"> <title>下拉菜單案例</title> </head> <body> <div class="header"> <div class="nav"> <a class="qnzx" href="#">千牛賣家中心 <ul> <li>免費開店</li> <li>已賣出的寶貝</li> <li>出售中的寶貝</li> <li>體檢中心</li> <li>問商友</li> </ul> </a> </div> </div> </body> </html>
css代碼：
*{
margin: 0;
padding: 0;
}
.header {
height: 35px;
width: 100%;
background-color: #F5F5F5;
border-bottom: 1px solid #EEEEEE;
}
.nav {
height: 36px;
width: 200px;
margin: 0 auto;
/*background-color: palevioletred;*/
}
a {
text-align: center;
line-height: 36px;
text-decoration: none;
color: #6C6C6C;
display: inline-block;
width: 200px;
height: 36px;
/*margin: auto;*/
}
a:hover{
color: #FF4400;
background-color: white;
}
.nav:hover {
background-color: white;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding-left: 1px;
}
.nav:hover ul{
display: block;
}
ul li:hover{
background-color: #F5F5F5;
}
ul li {
list-style: none;
text-align: left;
padding: 8px;
}
ul {
width: 201px;
border: 1px solid #cccccc;
border-top: none;
display: none;
position: relative;
right: 2px;
}效果圖：
總結(jié)：
1、首先清空瀏覽器自帶的邊距。
2、css盒模型熟悉掌握后，對元素的微調(diào)能很好把握。
3、案例中使用相對定位對其了下拉菜單上下的邊框線。
4、下拉菜單的實現(xiàn)原理和實現(xiàn)過程從案例中都有很好的體現(xiàn)。
Correcting teacher：天蓬老師Correction time：2019-06-29 13:06:44
Teacher's summary：下拉菜單, 一般都是用定位來做的, 也有其它方式實現(xiàn), 這是一個非常實用的技能..........