摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>簡單CSS下拉菜單作業(yè)</t
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡單CSS下拉菜單作業(yè)</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
a {
color: #0a001f;
text-decoration: none;
font-size: 16px;
}
li {
list-style: none;
}
.droup {
background: #ccc;
height: 48px;
line-height: 48px;
}
.droup_cont {
text-align: center;
}
.droup_cont a {
display: inline-block;
}
.droup_a:hover {
background: #fff;
color: #ff552e;
}
.droup_cont ul {
display: none;
}
.droup_cont a:hover ul {
display: block;
}
.droup_cont li:hover {
background: #F5F5F5;
}
</style>
</head>
<body>
<div class="droup">
<div class="droup_cont">
<a href="#" class="droup_a">
我的下拉菜單
<ul>
<li>第一個菜單</li>
<li>第一個菜單</li>
<li>第一個菜單</li>
</ul>
</a>
</div>
</div>
</body>
</html>總結(jié)及理解：雖然聽了課程可以完成簡單的下拉菜單，但是自己的能力還有待提高，好多東西需要深入學(xué)習(xí)。現(xiàn)在明白了下拉菜單其實也不難，難就難在對標簽的一個認識上面，比如說行內(nèi)標簽和塊級標簽還不能靈活運用，在做這個下拉菜單還是有些吃力。接下來多學(xué)習(xí)認識標簽，才能更好運用CSS基礎(chǔ)樣式。
批改老師：查無此人批改時間：2019-04-17 09:16:59
老師總結(jié)：完成的不錯，前端主力還是樣式。繼續(xù)加油。