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

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

  • 一、原理
  • 二、HTML
  • 三、CSS
    • 1.设置外部容器样式
    • 2.设置内部容器样式
    • 3.设置导航条中的元素
    • 4.设置下拉框元素
    • 5.设置父元素
    • 6.效果展示

一、原理

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

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

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

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

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

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

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

二、HTML


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boketitle>
    <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.效果展示

前端学习———用css实现顶部导航条及下拉框_第1张图片
前端学习———用css实现顶部导航条及下拉框_第2张图片

你可能感兴趣的:(前端,#,css,开发语言,前端,css)