Web实训知识点——3.26

最新推荐文章于 2020-08-18 11:14:54 发布

余生隻靠浪丶

最新推荐文章于 2020-08-18 11:14:54 发布

阅读量204

点赞数

本文链接：https://blog.csdn.net/ZZhangLiangLiang/article/details/88915225

版权

导航栏二级菜单练习：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
    *{margin: 0;padding: 0}
    #nav{background-color: #ff5e48;width: 600px;height: 20px;margin: 0 auto;}
    ul li{list-style: none;float: left;line-height: 20px;text-align: center;position: relative}
    a {text-decoration: none;color: #c8e1de;padding: 0 20px;width: 100px}
    a:hover{background-color: #669900;color: #eee4cc}
    ul li ul{position: absolute;top: 20px;left: 0px}
    ul li ul li{float: none;background-color: #f2b179;margin: 1px 0;display: none}
    ul li ul li a{padding: 0;}
    ul li:hover ul li{display: block}
</style>.
</head>
<body>
<div id="nav">
<ul>
    <li><a href="#">首页</a>
        <ul>
            <li><a href="#">web网页战术</a></li>
            <li><a href="#">web网页战术</a></li>
            <li><a href="#">web网页战术</a></li>
        </ul>
    </li>
    <li><a href="#">课程大厅</a>
        <ul>
            <li><a href="#">web网页战术</a></li>
            <li><a href="#">服务端技术</a></li>
            <li><a href="#">python开发</a></li>
        </ul>
    </li>
    <li><a href="#">学习中心</a>
        <ul>
            <li><a href="#">web网页战术</a></li>
            <li><a href="#">web网页战术</a></li>
            <li><a href="#">web网页战术</a></li>
        </ul>
    </li>
    <li><a href="#">经典案例</a>
        <ul>
            <li><a href="#">web网页战术</a></li>
            <li><a href="#">web网页战术</a></li>
            <li><a href="#">web网页战术</a></li>
        </ul>
    </li>
    <li><a href="#">关于我们</a>
        <ul>
            <li><a href="#">web网页战术</a></li>
            <li><a href="#">web网页战术</a></li>
            <li><a href="#">web网页战术</a></li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>

余生隻靠浪丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web实训知识点——3.26

导航栏二级菜单练习：代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style> *{margin: 0;padding: 0} #nav{background-col...
复制链接

扫一扫