前端学习———用css实现顶部导航条及下拉框

最新推荐文章于 2024-05-06 13:04:38 发布

安念、

最新推荐文章于 2024-05-06 13:04:38 发布

阅读量4.1k

点赞数 7

分类专栏：前端 # css 文章标签：开发语言前端 css

本文链接：https://blog.csdn.net/qq_63606575/article/details/123305470

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

css实现顶部导航条及下拉框

一、原理
二、HTML
三、CSS

一、原理

1. 设置外部盒子来充当导航条

2. 设置内部盒子来盛放导航条中元素

3. 导航条中元素使用无序列表并去掉下划线及小圆点，使其浮动以达到水平摆放的效果

4. 鼠标移入时显示下拉框（隐藏元素），则鼠标移入的元素和下拉框元素为兄弟关系，而且两者必须要有相同的父元素

5. 隐藏的元素使用决定定位，兄弟元素使用相对定位，使隐藏的元素相对于兄弟元素定位

6. 将伪类：hover绑定给父元素，使父元素触发引出下拉框事件

7. 设置下拉框的层级比其他元素高，使其悬浮时盖住其他元素以显示出来

二、HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boke</title>
    <link rel="stylesheet" href="./boke.css">
</head>
<body>
<!--    外部容器-->
    <div class="top-bar-wrapper">
<!--     内部容器-->
      <div class="top-bar clearfix">
<!--          设置父元素-->
        <div class="top-nav">
<!--            鼠标移入出现下拉框元素-->
            <ul class="nav">
                 <li>
                    <a href="#">X系列</a>
                 </li>
                 <li>
                    <a href="#">S系列</a>
                 </li>
                 <li>
                     <a href="#">T系列</a>
                 </li>
                 <li>
                     <a href="#">Y系列</a>
                 </li>
                 <li>
                     <a href="#">iQOO手机</a>
                 </li>
                 <li>
                     <a href="#">智能硬件</a>
                 </li>
                 <li>
                     <a href="#">商城</a>
                 </li>
                 <li>
                     <a href="#">服务</a>
                 </li>
            </ul>
<!--            下拉框元素-->
            <div class="list"></div>
        </div>
      </div>
    </div>

</body>
</html>

三、CSS

1.设置外部容器样式

/*设置外部容器样式*/
.top-bar-wrapper{
    background-color: dimgray;
    height:60px;
    margin: 0 auto;
}

2.设置内部容器样式

/*设置内部容器样式*/
.top-bar{
    /*固定宽度*/
    width: 900px;
    /*水平居中*/
    margin: 0 auto;
    position: relative;
}

3.设置导航条中的元素

.nav li{
    float: left;
    /*去除无序列表中的下划线*/
    list-style: none;
    /*文字在父元素中居中*/
    line-height: 40px;
}
.nav a{
    /*将行内元素变为块元素*/
    display: block;
    /*去除无序列表中的小圆点*/
    text-decoration: none;
    /*字体颜色*/
    color: white;
    /*字体大小*/
    font-size: 17px;
    /*设置内边距*/
    padding: 0 27px;
}
/*鼠标移入时a的效果*/
.nav a:hover{
    color: deepskyblue;
}

4.设置下拉框元素

/*列表样式*/
.top-nav .list{
    display: none;
    width:900px;
    height: 400px;
    background-color: dimgray;
    top: 0 ;
    position: absolute;
    z-index: 999;
}

5.设置父元素

.top-nav{
    float: left;
}

.top-nav:hover .list{
    display: block;
}

.nav{
    position: relative;
    z-index: 9999;
}

6.效果展示

导航条
在这里插入图片描述

安念、

关注

7
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
前端学习———用css实现顶部导航条及下拉框

css实现顶部导航条及下拉框一、原理二、HTML三、CSS1.设置外部容器样式2.设置内部容器样式3.设置导航条中的元素4.设置下拉框元素5.设置父元素6.效果展示一、原理1. 设置外部盒子来充当导航条2. 设置内部盒子来盛放导航条中元素3. 导航条中元素使用无序列表并去掉下划线及小圆点，使其浮动以达到水平摆放的效果4. 鼠标移入时显示下拉框（隐藏元素），则鼠标移入的元素和下拉框元素为兄弟关系，而且两者必须要有相同的父元素5. 隐藏的元素使用决定定位，兄弟元素使用相对定位，使隐藏的元素相
复制链接

扫一扫