CSS利用复合选择器和背景设置实现简易导航栏

最新推荐文章于 2024-10-16 16:53:30 发布

LeTHElala

最新推荐文章于 2024-10-16 16:53:30 发布

阅读量148

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_58196292/article/details/121239120

版权

题目分析

相关知识点

复合选择器

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级的元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover 实际开发的写法
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写法

元素模式

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度高度	它本身内容的宽度

背景设置

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	urI(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是 x 和 y 坐标
background-attachment	背景附着	sroll(背景滚动) / fixed(背景固定)
背景简写	书写更简单	背景颜色背景图片地址背景平铺背景滚动背景位置;
背景色半透明	背景颜色半透明	background: rgba(0,0,0,0.3); 后面必须是4个值

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航</title>
    <style>
        .nav a {
            display: inline-block;/* 显示模式转换*/
            text-decoration: none;
            color: #fff;
            width: 120px;
            height: 58px;
            text-align: center;
            line-height: 48px;/*通过设置行高实现单行文字垂直居中*/
        }
        .nav .bg1 {
            background: url(../images/bg1.png) no-repeat;
        }
        .nav .bg1:hover {
            background-image: url(../images/bg11.png);
        }
        .nav .bg2 {
            background: url(../images/bg2.png) no-repeat;
        }
        .nav .bg2:hover {
            background-image: url(../images/bg22.png);
        }
        .nav .bg3 {
            background: url(../images/bg3.png) no-repeat;
        }
        .nav .bg3:hover {
            background-image: url(../images/bg33.png);
        }
        .nav .bg4 {
            background: url(../images/bg4.png) no-repeat;
        }
        .nav .bg4:hover {
            background-image: url(../images/bg44.png);
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
    </div>
</body>
</html>