前端css基础篇(四)导航栏和隔行变色

本文介绍了前端CSS的基础知识,包括垂直导航条、水平导航栏的实现,以及导航栏下拉菜单和选项卡的创建。此外,还讲解了如何使用CSS3的:nth-child()选择器进行奇偶行的隔行变色效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、垂直导航条

固定在左侧的垂直导航条

<style>
        body{
            margin:0;
        }
        ul{
            list-style-type: none;/*去除li有序列表默认样式*/
            margin:0;
            padding:0;
            width:25%;
            background-color:#f1f1f1;
            position:fixed;/*固定定位*/
            height:100%;
        }
        li a {
            display:block;
            color:#000;
            padding:8px 16px;
            text-decoration:none;/*去除a链接默认样式下划线*/
        }
        li a.active{
            background-color:#4CAF50;
            color:white;
        }
        li a:hover:not(.active)/*选择器,选鼠标划过不是active的标签*/{
            background-color: #555;
            color:white;
        }
    </style>
<ul>
    <li><a class="active" href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>

在这里插入图片描述

二、水平导航栏

   <style>
        body{
            margin:0;
        }
        ul{
            list-style-type: none;/*去除li有序列表默认样式*/
            margin:0;
            padding:0;
            background-color:#333;
            overflow:hidden;/*清除浮动*/
        }
        li{
            float:left;
        }
        li a {
            display:block;
            color:white;
            text-align:center;
            padding:8px 16px;
            text-decoration:none;/*去除a链接默认样式下划线*/
        }
        li a:hover/*鼠标移动到选项上修改背景颜色*/{
            background-color: #111;

        }
    </style>
    
<ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>

在这里插入图片描述

三、 导航栏下拉菜单

 <style>
        body{
            margin:0;
        }
        ul{
            list-style-type: none;/*去除li有序列表默认样式*/
            margin:0;
            padding:0;
            background-color:#333;
            overflow:hidden;
        }
        li{
            float:left;/*让li标签左浮动*/
        }
        li a , .dropbtn/*让li中a标签和div中a标签变成行内块元素在一行显示*/{
            display:inline-block;
            color:white;
            text-align:center;
            padding:14px 16px;
            text-decoration:none;/*去除a链接默认样式下划线*/
        }
        li a:hover,.dropdown:hover,.dropbth/*鼠标移动到选项上修改背景颜色*/{
            background-color: #111;

        }
        .dropdown/*让下拉列表整个div盒子变成行内块元素*/{
            display:inline-block;
        }
        .dropdown-content/*让下拉列表的链接内容隐藏*/{
            display:none;
            position:absolute;
            background-color:#f9f9f9;
            min-width:160px;
            box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2)
        }
        .dropdown-content a/*让下拉列表的a标签变成块级元素独占一行*/
        {
            color:black;
            padding:12px 16px;
            text-decoration:none;
            display:block;
        }
        .dropdown-content a:hover/*下拉列表的a标签鼠标划过变的颜色*/
        {
            background-color:#3059fa;
        }
        .dropdown:hover .dropdown-content/*下拉列表的内容变成块级元素显示*/{
            display: block;
        }


    </style>
    <ul>
    <li><a class="active" href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
    <div class="dropdown">
        <a href="#" class="dropbtn">下拉菜单</a>
        <div class="dropdown-content">
            <a href="#">链接1</a>
            <a href="#">链接2</a>
            <a href="#">链接3</a>
        </div>
    </div>
</ul>

在这里插入图片描述

四、选项卡

利用css3中新添的伪类选择器,选择奇偶数,进行隔行变色
:nth-child(n) n表示具体的第几个

<style>
    li{
        list-style: none;
    }
    .list li{
        display: block;
        width:300px;
        height: 50px;
    }
    .list li:nth-child(2n){
        background-color:orange;
    }
    .list li:nth-child(2n-1){
        background-color: deepskyblue;
    }
</style>



div class="list">
    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>4</li>
    </ul>
  </div>

在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值