下拉菜单作业及总结

Original 2019-04-16 20:39:15 208
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:完成的不错,前端主力还是样式。继续加油。

Release Notes

Popular Entries