css第二部分总结

最新推荐文章于 2024-05-21 21:13:29 发布

人生苦若如初见

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量184

点赞数

分类专栏： css 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_63339948/article/details/121308411

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一，css复合选择器的总结
在这里插入图片描述
二，css的元素显示模式

2-1 什么是元素显示模式

2-2，块元素
在这里插入图片描述

在这里插入图片描述
2-3, 行内块元素

在这里插入图片描述
2-4 元素显示模式总结

2-5，元素显示模式转换

2-6案例如下简介版侧边栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>简单版小米侧边栏</title>
    <style>
        /* 1, 把a 转换为块级元素  */
        
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #747474;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }
        /* 2, 鼠标经过链接变换背景颜色 */
        
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>

2-7，单行文字垂直居中的原理
在这里插入图片描述

小技巧

三， css的背景

通过css背景属性，可以给页面元素添加背景样式
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等
3-1，背景颜色

3-2，背景图片

3-3，背景平铺

3-4，背景图片位置

3-5，背景图像固定(背景附着）

在这里插入图片描述
3-6，背景复合写法

3-7，背景色半透明

3-8，背景总结

3-9，综合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>综合案例-五彩导航</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 48px;
            color: #fff;
            text-decoration: none;
        }
        
        .nav .bg1 {
            background: url(../images/2021031111531821.png) no-repeat;
        }
        
        .nav .bg1:hover {
            background-image: url(../images/2021031111531821.png);
        }
        
        .nav .bg2 {
            background: url(../images/2021031111531826.png) no-repeat;
        }
        
        .nav .bg2:hoverv {
            background-image: url(../images/2021031111531826.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>

    </div>
</body>

</html>

四， css的三大特性

层叠性
继承性
优先级
1-1，层叠性

1-2，继承性

在这里插入图片描述

1-3, 优先级
在这里插入图片描述

第三周感想：晚上真抑郁，emo时刻，不过学你还是挺快乐.相信自己.未来掌握手中

人生苦若如初见

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css第二部分总结

一，css复合选择器的总结二，css的元素显示模式2-1 什么是元素显示模式2-2，块元素2-3, 行内块元素2-4 元素显示模式总结2-5，元素显示模式转换2-6案例如下简介版侧边栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简单版小米侧边栏</title> <style&
复制链接

扫一扫