摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单CSS下拉菜单作业</t
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单CSS下拉菜单作业</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>总结及理解:虽然听了课程可以完成简单的下拉菜单,但是自己的能力还有待提高,好多东西需要深入学习。现在明白了下拉菜单其实也不难,难就难在对标签的一个认识上面,比如说行内标签和块级标签还不能灵活运用,在做这个下拉菜单还是有些吃力。接下来多学习认识标签,才能更好运用CSS基础样式。
批改老师:查无此人批改时间:2019-04-17 09:16:59
老师总结:完成的不错,前端主力还是样式。继续加油。