王卓成 1722230142

最新推荐文章于 2022-07-02 10:29:55 发布

原创最新推荐文章于 2022-07-02 10:29:55 发布 · 435 阅读

CC 4.0 BY-SA版权

课前装逼小知识: dos检索文件：
D：\新建文件夹进入文件夹
dos ----color c diR/S 遍历当前文件夹的所有文件

正课
1:
导航栏（变化菜单，多级菜单）
代码：<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
       a{color: #ffff99; text-decoration: none;}
       a:hover{color: #ffffff; text-decoration: underline;}
       .top-nav{padding:10px 10px 0; font-size: 12px; font-weight: bold;
       margin: 1px 0 0 0; list-style: none; border: 8px solid #dc4e1B; overflow: hidden; background-color: #33b5e5;}
       .top-nav li {float: left; margin-right: 1px;}
       .top-nav li a {position: relative; z-index: 0; line-height: 20px; text-decoration: none; background: #dddddd;
       color: #666666; display: block; width: 80px; text-align: center;}
       .top-nav li a span{position: absolute; visibility: hidden;}
       .top-nav li a:hover span{line-height: 20px; text-decoration: none; background: #dddddd; color: #666666;
       display: block; width: 80px; text-align: center; padding-top: 2px;
       visibility: visible; top: 0; left: 0;}
       </style>
   </head>
   <body>
       <div id="top">
           <ul class="top-nav">
               <li><a href="#">首页<span>home</span></a></li>
               <li><a href="#">课程大厅<span>courese</span></a></li>
               <li><a href="#">学习中心<span>learn</span></a></li>
               <li><a href="#">关于我们<span>about</span></a></li>
           </ul>
       </div>
   </body>
</html>