abstract:<!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基础样式。
Correcting teacher:查无此人Correction time:2019-04-17 09:16:59
Teacher's summary:完成的不错,前端主力还是样式。继续加油。