web实训总结（3.26）

最新推荐文章于 2023-06-28 16:12:49 发布

中国正能量

最新推荐文章于 2023-06-28 16:12:49 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/weixin_44772351/article/details/88862279

版权

1. 编写导航栏的二级菜单

编写代码：
方法一（ul li ）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{  margin: 0;padding: 0;  }
        #nav{background-color: #050201;width: 600px;height: 40px;margin: 0 auto}
        ul li{list-style: none;float: left;line-height: 40px;text-align: center;position: relative}
        a{text-decoration: none;color: white;padding: 0 20px;display: block}
        a:hover{background-color: #ff0502;color: white; }
        ul li ul{position: absolute;top: 40px;left: 0;}
        ul li ul li{float: none;background-color: #050205;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></li>
        <li><a href="#">课程大厅</a>
  <ul>
      <li><a href="#">web实战</a>
      <ul>
          <li><a href="#">大哥</a></li>
          <li><a href="#">二哥</a></li>
          <li><a href="#">三哥</a></li>
      </ul>
      </li>
      <li><a href="#">服务端技术</a></li>
      <li><a href="#">python开发</a></li>
  </ul>
  </li>
        <li><a href="#">学习中心</a></li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>
</body>
</html>>

最终效果：
在这里插入图片描述

方法二（js）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin: 0; padding: 0}
        #nav{  background-color: darkgrey;  width: 600px; height: 40px;  margin: 0 auto;}
        ul{list-style: none}
        ul li{float: left; line-height: 40px; text-align: center;position: relative}
        a{ text-decortion:none;  color: #0099cc; display: block;padding:0 10px;}
        a:hover{background-color: #99cc00;color: #edcc61}
        ul li ul li{float: none;background-color: #edcc61;margin-top: 2px}
        ul li ul{position: absolute;left: 0px;  top: 40px; display: none}
        ul li ul li a:hover{background-color: #9933cc;}
        ul li:hover ul{display: block}
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a><>
        <li><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">python</a><>
            </ul>
        <>
        <li><a href="#">学习中心</a><>
        <li><a href="#">经典案例</a><>
        <li><a href="#">关于我们</a><>
    </ul>
</div>
</body>
<ml>