web前端开发0319

最新推荐文章于 2022-07-13 20:13:52 发布

卡卡莉莉丝

最新推荐文章于 2022-07-13 20:13:52 发布

阅读量75

点赞数

本文链接：https://blog.csdn.net/weixin_44781372/article/details/88767571

版权

利用js来实现导航栏变换菜单、多级菜单。
一、css定位（position）
页面布局相关特性
float（left、right、auto）
display（block、inline、inline-block、listitem）
overflow（auto、hidden、visible）
position属性
值描述
absolute 绝对定位，相对于最近定位的祖先元素进行定位，元素的定位位置通过left、 top、right和bottom属性值确定
fixed 固定定位，相对于浏览窗口窗口进行定位，元素的定位位置通过left、top、right和bottom属性值确定
relative 相对定位，相对于其正常位置进行定位，元素的定位位置通过left、top、right和 bottom属性值确定
static 默认值。没有定位，元素出现在正常的流中，忽略top、bottom、left、right或者z-index声明

代码
方法一、ul li实现：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul li实现</title>
</head>
<style>
    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-bottom: 8px solid #014d67;
        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;
        color: #FFFFFF;
        background: #dc4e1b;
    }
</style>
<body>
<div id ="top">
  <ul class="top_nav">
        <li><a href="#">首页<span>Home</span></a></li>
         <li><a href="#">课堂大厅<span>Course</span></a></li>
        <li><a href="#">学习中心<span>Learn</span></a></li>
         <li><a href="#">关于我们<span>About</span></a></li>
    </ul>             
</div>
</body>
</html>

二、div实现

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>div 实现</title>
  </head>
  <style>
  a { 
   color: #ffff99;
        text-decoration: none;
  }
   a:hover{
        color: #FFFFFF;
        text-decoration: underline;
    }
    #top{
        padding: 10px 10px 0;
        font-size: 12px;
          font-weight: bold;
        margin: 1px 0 0 ;
        list-style: none;
        border-bottom: 8px solid darkred;
        overflow: hidden;
         background-color: #014d67;
    }
   .top_nav{
        width: 80px;
        height: 20px;
        background-color: #dddddd;
        text-align: center;
        margin-right: 1px;
        line-height: 20px;
        float: left;
       position: relative;
    }
       .top_nav span{
        position: absolute;
       visibility: hidden;
    }
.top_nav:hover span{
         line-height: 20px;
         background: #dddddd;
        color: #666666;
       display: block;
        width: 80px;
       text-align: center;
        height: 20px;
        padding-top: 2px;
        visibility: visible;
        top: 0;
        left: 0;
        color: #FFFFFF;
        background: #dc4e1b;
     }
     </style>
<body>
<div id ="top">
    <div class="top_nav"><a href="#">首页</a><span>Home</span></div>
   <div class="top_nav"><a href="#">课堂大厅</a><span>Course</span></div>
    <div class="top_nav"><a href="#">学习中心</a><span>Learn</span></div>
    <div class="top_nav"><a href="#">关于我们</a><span>About</span></div>
</div>
</body>

卡卡莉莉丝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端开发0319

利用js来实现导航栏变换菜单、多级菜单。一、css定位（position）页面布局相关特性float（left、right、auto）display（block、inline、inline-block、listitem）overflow（auto、hidden、visible）position属性值描述absolute 绝对定位，相对于最近定位的祖先元素进行定位...
复制链接

扫一扫