当前位置：首页 > article >正文

【前端基础】Day 3 CSS-2

article 2026/3/31 8:24:59

1. Emmet语法

1.1 快速生成HTML结构语法

1.2 快速生成CSS样式语法

2. CSS的复合选择器

2.1 后代选择器

2.2 子选择器

2.3 并集选择器

2.4 伪类选择器

2.4.1 链接伪类选择器

2.4.2 focus伪类选择器

2.5 复合选择器总结

3. CSS的元素显示模式

3.1 什么是元素显示模式

3.2 块元素

3.3 行内元素

3.4 行内块元素

3.5 元素显示模式总结

3.6 元素显示模式转换

3.7 snipaste工具

3.8 单行文字垂直居中

4. CSS背景

4.1 背景颜色

4.2 背景图片

4.3 背景平铺

4.4 背景图片位置

4.5 背景图像固定（背景附着）

4.6 背景复合写法

4.7 背景色半透明

4.8 背景总结

5. 综合案例

6. CSS三大特性

6.1 层叠性

6.2 继承性

6.3 优先性

1. Emmet语法

1.1 快速生成HTML结构语法

<body><!-- p*3 --><p></p><p></p><p></p><!-- 父子关系 > ，例ul>li --><ul><li></li></ul><!-- 兄弟关系 + ，例div+p --><div></div><p></p><!-- .nav ，默认div --><div class="nav"></div><!-- #banner --><div id="banner"></div><!-- p.red --><p class="red"></p><!-- ol>li#two --><ol><li id="two"></li></ol><!-- .demo$*3 --><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><!-- div{今年是2025年$}*5 --><div>今年是2025年1</div><div>今年是2025年2</div>
</body>

1.2 快速生成CSS样式语法

    <style>.one {/* tac */text-align: center;/* ti2em */text-indent: 2em;/* w100 */width: 100px;/* h200 */height: 200px;/* lh26px */line-height: 26px;/* tdn */text-decoration: none;}</style>

2. CSS的复合选择器

2.1 后代选择器

2.2 子选择器

2.3 并集选择器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 后代选择器 */ol li {color: aqua;}.red li a {color: red;}/* 子选择器 */div>a {color: brown;}/* 并集选择器 竖着写*/span,.pig li {color: pink;}</style>
</head><body><ol>我在ol内不在li内<li>我是ol的孩子</li><li>我是ol的孩子</li><li><a href="#">我是ol-1的孩子</a></li></ol><ol class="red"><li>我是ol的孩子</li><li>我是ol的孩子</li><li><a href="#">我是ol-2的孩子</a></li></ol><div><a href="#">我是div的儿子</a><p><a href="#">我是div的孙子</a></p></div><span>熊大</span><span>熊二</span><ul class="pig"><li>佩奇</li><li>猪妈妈</li></ul>
</body></html>

2.4 伪类选择器

2.4.1 链接伪类选择器

    <style>/* 1.未访问的链接 a:link 把没有点击过的链接选出来  */a:link {color: #333;text-decoration: none;}/* 2.点击过的链接 */a:visited {color: orange;}/* 3.选择鼠标经过的链接 */a:hover {color: skyblue;}/* 4.选择的是鼠标正在按下还没有弹起的那个链接 */a:active {color: green;}</style>

链接伪类选择器实际开发中的写法

        a {color: #333;text-decoration: none;}a:hover {color: skyblue;}

2.4.2 focus伪类选择器

焦点就是光标，把获得光标的input表单元素选取出来

    <style>input:focus {background-color: pink;}</style>

2.5 复合选择器总结

3. CSS的元素显示模式

3.1 什么是元素显示模式

3.2 块元素

3.3 行内元素

3.4 行内块元素

3.5 元素显示模式总结

3.6 元素显示模式转换

    <style>a {width: 150px;height: 50px;background-color: pink;/* 把行内元素a 转换为块级元素 */display: block;}div {width: 300px;height: 100px;background-color: purple;/* 把div 块级元素转换成行内元素 */display: inline;}span {width: 300px;height: 30px;background-color: skyblue;/* 行内元素转换成行内块元素 */display: inline-block;}</style>

3.7 snipaste工具

3.8 单行文字垂直居中

简洁版小米边框栏

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {display: block;width: 230px;height: 40px;line-height: 40px;background-color: #55585a;font-size: 14px;color: #fff;text-decoration: none;text-indent: 2em;}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>

4. CSS背景

4.1 背景颜色

background-color: 颜色值; /*（默认transparent，透明）*/

4.2 背景图片

4.3 背景平铺

背景图片和颜色可以同时设置，只不过背景颜色会被背景图片覆盖

    <style>div {width: 300px;height: 300px;background-color: pink;background-image: url(../上一级路径.jpg);/* 1.背景图片不平铺 (默认情况下背景平铺）background-repeat: no-repeat; *//* 2.沿着x轴平铺background-repeat: repeat-x; *//* 3.沿着y轴平铺background-repeat: repeat-y; */}</style>

4.4 背景图片位置

4.5 背景图像固定（背景附着）

4.6 背景复合写法

background: black url() no-repeat fixed center top;

4.7 背景色半透明

4.8 背景总结

5. 综合案例

    <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() no-repeat;}.nav .bg1:hover {background-image: url();}</style><body><div class="nav"><a href="" class="bg1">五彩导航</a><a href="">五彩导航</a><a href="">五彩导航</a><a href="">五彩导航</a><a href="">五彩导航</a></div>
</body>

6. CSS三大特性

6.1 层叠性

6.2 继承性

行高的继承性

6.3 优先性

    <style>div {color: red !important;}.test {color: pink;}#demo {color: green;}/* 不管父元素权重多高，子元素继承的权重都是0 */body {color: #000 !important;}/* a链接浏览器默认制定了一个样式，即 a {color: blue;} */a {color: aquamarine;}</style><body><div class="test" id="demo" style="color: purple;">hahaha</div><a href="#">a标签</a>
</body>

权重虽然会叠加，但不会进位

【前端基础】Day 3 CSS-2

目录 1. Emmet语法 1.1 快速生成HTML结构语法 1.2 快速生成CSS样式语法 2. CSS的复合选择器 2.1 后代选择器 2.2 子选择器 2.3 并集选择器 2.4 伪类选择器 2.4.1 链接伪类选择器 2.4.2 focus伪类选择器 2.5 复合选择器总结 3. CSS的元素显示模式 3.1 什么是元素显示…...

编程日记 2026/3/25 3:50:48

windows电脑上安装llama-factory实现大模型微调

一、安装环境准备这是官方给的llama-factory安装教程，安装 - LLaMA Factory，上面介绍了linux系统上以及windows系统上如何正确安装。大家依照安装步骤基本能够完成安装，但是可能由于缺少经验或者相关的知识导致启动webUi界面运行相应内容时…...

编程日记 2026/3/31 0:02:57

汽车无人驾驶系统中的防撞设计

一、系统方案介绍无人驾驶汽车的防撞系统是保障行车安全的核心模块，本文设计的系统以STM32F103C8T6单片机为主控制器，结合超声波测距、WiFi通信、人机交互等模块，实现障碍物实时检测、动态阈值设置、多级报警和数据可视化功能。系统通过软…...

编程日记 2026/3/30 17:22:32

sql server 版本更新日期

SQL Server 2019 内部版本（KB4518398） - SQL Server | Microsoft Learn SQL Server 的最新更新和版本历史记录 - SQL Server | Microsoft Learn sql server 2019 版本更新时间和补丁版本号...

编程日记 2025/8/14 11:39:03

Linux网络 DNS

DNS(Domain Name System) TCP/IP 中使用 IP 地址和端口号来确定网络上的一台主机的一个程序 ， 但是 IP 地址不方便记忆。于是人们发明了一种叫主机名的东西, 是一个字符串 , 并且使用 hosts 文件来描述主机名和 IP 地址的关系。最初 , 通过互连网信息中…...

编程日记 2026/3/27 7:11:53

EMQX中不同端口对应的接入协议

使用tcp接入时应使用mqtt://IP:1883 使用ws接入时应使用ws://IP:8083...

编程日记 2026/3/27 1:01:07

SpringBoot原理-03.自动配置-方案

一.自动配置原理探究自动配置原理，就是探究spring是如何在运行时将要依赖JAR包提供的配置类和bean对象注入到IOC容器当中。我们当前准备一个maven项目itheima-utils，这里面定义了bean对象以及配置类，用来模拟第三方提供的依赖，首…...

编程日记 2026/3/26 10:42:17

Python 如何实现烟花效果的完整代码

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons：JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram，自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 ？ 5 IDEA必装的插件&…...

编程日记 2026/3/23 13:37:42

Winbox5怎样设置上网

要让连接到交换机的设备都能上网，需在MikroTik路由器（通过WinBox配置）上完成以下步骤。假设您的网络拓扑是：外网IP配置在路由器的WAN口，内网设备通过交换机连接到路由器的LAN口。步骤 1：配置内网接口&…...

编程日记 2026/3/27 21:14:56

(KTransformers) RTX4090单卡运行 DeepSeek-R1 671B

安装环境为：ubuntu 22.04 x86_64 下载模型编辑文件vim url.list 写入如下内容 https://modelscope.cn/models/unsloth/DeepSeek-R1-GGUF/resolve/master/DeepSeek-R1-Q4_K_M/DeepSeek-R1-Q4_K_M-00001-of-00009.gguf https://modelscope.cn/models/unsloth/Dee…...

编程日记 2026/3/27 1:01:02

【软考-架构】1.2、指令系统-存储系统-cache

GitHub地址：https://github.com/tyronczt/system_architect ✨资料&文章更新✨ 指令系统计算机指令执行过程：取指令一一分析指令一一执行指令三个步骤，首先将程序计数器PC中的指令地址取出，送入地址总线，CPU依据…...

编程日记 2026/3/27 1:00:44

CI/CD与容器化技术核心知识点的QA

CI/CD与容器化技术核心知识点的Q&A 以下是CI/CD和容器化技术的经典必考面试题及详解，结合行业实践与理论核心整理而成：一、CI/CD核心概念与流程简述CI/CD的核心目标与实现价值答案：通过自动化流水线实现快速、可靠的软件交付，减少人工干预，提升开发与运维协作效率…...

编程日记 2026/3/24 11:32:42

动态规划刷题

文章目录动态规划三步问题题目解析代码动态规划 1. 状态表示：dp[i]，表示dp表中i下标位置的值 2. 状态转移方程：以i位置位置的状态，最近的一步来划分问题，比如可以将状态拆分成前状态来表示现状态，dp[i] …...

编程日记 2026/3/29 16:48:09

不谓侠--记录

音乐《不谓侠》衣襟上别好了晚霞余晖送我牵匹老马正路过烟村里人家恰似当年故里正飞花醉过风喝过茶寻常巷口寻个酒家在座皆算老友碗底便是天涯天涯远无处不为家蓬门自我也像广厦论意气不计多或寡占三分便敢自称为侠刀可捉拳也耍偶尔闲来…...

编程日记 2026/3/1 17:21:32

2025-03-01 学习记录--C/C++-C语言整数类型对比

C语言整数类型对比类型位数范围（有符号）范围（无符号）格式化符号char8-128 到 1270 到 255%c 或 %hhdshort16-32,768 到 32,7670 到 65,535%hdint32-2,147,483,648 到 2,147,483,6470 到 4,294,967,295%dlong32 或 64-2,147,483…...

编程日记 2026/3/29 9:51:37

Python核心技术，Django学习基础入门教程（附环境安装包）

文章目录前言1. 环境准备1.1Python安装1.2选择Python开发环境1.3 创建虚拟环境1.4 安装 Django 2. 创建 Django 项目3. Django项目结构介绍4. 启动开发服务器5. 创建 Django 应用6. 应用结构介绍7. 编写视图函数8. 配置 URL 映射9. 运行项目并访问视图10. 数据库配置与模型创建…...

编程日记 2026/3/30 13:25:36

MFC中CMutex类和CSingleLock类，配合使用疑惑

在使用CMutex过程中，看到别人使用了CSingleLock类，想着明明CMutex已经可以实现线程同步了，为什么还有使用CSingleLock类呢？ 在MFC中，虽然CMutex类本身可以实现线程同步，但通常会与CSingleLock类一起使用&am…...

编程日记 2026/3/30 18:21:13

爬虫系列之【数据解析之正则】《二》

目录前言一、正则基本使用 1.1 导包 1.2 接口方法 1.3 换行匹配问题二、实战案例完整代码前言在爬虫工作中，我们主要会遇到两种类型的文本数据： JSON格式数据 HTML文档数据对于JSON字符串数据，通常使用Python的字典操作进行键…...

编程日记 2026/3/30 22:56:02

HTML AI 编程助手

HTML AI 编程助手引言随着人工智能技术的飞速发展，编程领域也迎来了新的变革。HTML，作为网页制作的基础语言，与AI技术的结合，为开发者带来了前所未有的便利。本文将探讨HTML AI编程助手的功能、应用场景以及如何利用它提高编程…...

编程日记 2026/2/15 14:34:57

RFID工具柜DW-G104R|智能存储，便捷高效

一、行业背景 RFID智能工具柜（DW-G104R）RFID工具管理柜是一种结合RFID技术和智能柜设备的新型工具管理设施，通过自动化管理可以提高工具管理的效率和准确性。在工业生产中，工具柜是工具存储和管理的重要设备。传统工具柜存在管…...

编程日记 2026/3/27 1:00:53

【前端面试】如何不通过正则：验证IP地址合法性

前言在 Web 开发中，验证用户输入的 IP 地址是否合法是一个常见需求面试中也会问到通常，我们会使用正则表达式来完成这个任务，因为它简洁高效。然而，正则表达式对于初学者来说可能有些晦涩难懂。本文将介绍一种不使用正则表达…...

编程日记 2026/2/24 19:00:25

中间件专栏之Redis篇——Redis的三大持久化方式及其优劣势对比

Redis是内存数据库，它的数据一般存放在内存中，一旦断电或者宕机，存在内存中的数据就会丢失。当然，它也具备数据持久化的能力，本文就将介绍Redis的三种持久化方式及其优劣势对比。一、RDB（Redis Database&…...

编程日记 2026/3/8 9:57:13

Linux软连接与时区日期

软连接使用ln命令创建软连接。在系统中创建软连接，可以将文件，文件夹连接到其他为止。类似于Windows系统的快捷方式。语法：ln -s 参数1 参数2 -s选项，创建软连接。参数1，被链接的文件或文件夹。参数2&#xff0…...

编程日记 2026/3/27 1:00:45

安全测试之五：SQL Server注入漏洞几个实例

示例 1：在 GET 请求中测试 SQL 注入最简单且有时最有效的情况是针对登录页面进行测试。当登录页面请求用户输入用户名和密码时，攻击者可以尝试输入以下字符串 “ or 11”（不包含双引号）： https://vulnerable.web.ap…...

编程日记 2026/2/15 2:26:02

2024 ChatGPT大模型技术场景与商业应用视频精讲合集（45课）.zip

2024ChatGPT大模型技术场景与商业应用视频精讲合集，共十三章，45课。 01. 第一章 ChatGPT：通用人工智能的典范 1.1 ChatGPT概述 .mp4 1.2 通用能力 .mp4 1.3 通用人工智能风口 .mp4 02. 第二章大模型：ChatGPT的核心支撑 2.1 底层…...

编程日记 2026/3/27 1:00:59