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

【前端基础】Day 3 CSS-2

news 2026/2/10 2:02:04

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 什么是元素显示…...

编程日记 2025/2/28 16:16:41

NAT 技术：网络中的 “地址魔术师”

目录一、性能瓶颈：NAT 的 “阿喀琉斯之踵” （一）数据包处理延迟 （二）高并发下的性能损耗二、应用兼容性：NAT 带来的 “适配难题” （一）端到端通信的困境 （二&…...

编程日记 2025/2/28 16:13:37

Ollama下载安装+本地部署DeepSeek+UI可视化+搭建个人知识库——详解！（Windows版本）

目录 1️⃣下载和安装Ollama 1. 🥇官网下载安装包 2. 🥈安装Ollama 3.🥉配置Ollama环境变量 4、🎉验证Ollama 2️⃣本地部署DeepSeek 1. 选择模型并下载 2. 验证和使用DeepSeek 3️⃣使用可视化工具 1. Chrome插件-Page …...

编程日记 2025/2/28 16:09:30

【JavaSE-1】初识Java

1、Java 是什么？ Java 是一种优秀的程序设计语言，人类和计算机之间的交流可以借助 Java 这种语言来进行交流，就像人与人之间可以用中文、英语，日语等进行交流一样。 Java 和 JavaScript 两者有关系吗？一点都没有关系!!! 前端内容：HTML CSS JS，称为网页三剑客 2、JDK 下…...

编程日记 2025/2/28 16:05:20

《基于Django和ElasticSearch的学术论文搜索推荐系统的设计与实现》开题报告

目录一、选题的背景和意义 （一）选题背景 （二）选题意义 2.1.提升科研效率 2.2 促进学术创新 2.3优化资源配置二、选题的国内外现状与总结 （一）国内现状 （二）国外现状 &am…...

编程日记 2025/2/28 16:04:17

Dify在Ubuntu20.04系统的部署

文章目录一、dify 介绍1.核心功能优势2.应用场景二、dify 安装(docker方式)1.代码库下载2.配置文件修改3.启动docker 容器三、遇到问题与解决1.使用sudo docker compose up -d报错2.使用service docker start报错一、dify 介绍 Dify 是一款开源的大语言模型（LL…...

编程日记 2025/2/28 16:03:16

第7天：结构体与联合体 - 复杂数据类型

第7天：结构体与联合体 - 复杂数据类型一、📚 今日学习目标 🎯 掌握结构体（struct）的定义与使用🔧 理解联合体（union）的特性与适用场景💡 完成图书馆管理系统实战&…...

编程日记 2025/2/28 16:00:12

vue富文本 vue-quill-editor + 上传图片到阿里云服务器 + 修改富文本内容

前言使用富文本编辑器，需要将图片上传到服务器，完成之后，还需要在修改页面完成修改富文本内容，使用的富文本插件是vue-quill-editor, 一、安装 vue-quill-editor npm i vue-quill-editor npm install quill --save npm inst…...

编程日记 2025/2/28 15:55:59

Java常见设计模式(中):结构型模式

🌈 引言：设计模式就像乐高积木适配器：让不同形状的积木完美拼接装饰器：给积木添加炫酷灯光效果代理：遥控积木完成复杂动作组合：将小积木搭建成宏伟城堡结构型模式主要用于描述对象之间的关系&#xff…...

编程日记 2025/2/28 15:53:45

DeepSeek R1 + 飞书机器人实现AI智能助手

效果 TFChat项目地址 https://github.com/fish2018/TFChat 腾讯大模型知识引擎用的是DeepSeek R1，项目为sanic和redis实现，利用httpx异步处理流式响应，同时使用buffer来避免频繁调用飞书接口更新卡片的网络耗时。为了进一步减少网络IO消耗&…...

编程日记 2025/2/28 15:51:40

【论文详解】Transformer 论文《Attention Is All You Need》能够并行计算的原因

文章目录前言一、传统 RNN/CNN 存在的串行计算问题二、Transformer 如何实现并行计算？三、Transformer 的 Encoder 和 Decoder 如何并行四、结论前言亲爱的家人们，创作很不容易，若对您有帮助的话，请点赞收藏加关注哦&#xff…...

编程日记 2025/2/28 15:46:32

51c嵌入式~电路~合集12

我自己的原文哦~ https://blog.51cto.com/whaosoft/12318429 一、单端、推挽、桥式拓扑结构变压器对比单端正激式单端：通过一只开关器件单向驱动脉冲变压器。正激：脉冲变压器的原/付边相位关系，确保在开关管导通，驱动脉冲…...

编程日记 2025/2/28 15:45:23

php 获取head参数

php 获取head参数在PHP中，获取HTTP头部（head）参数可以通过不同的方式实现，下面为你详细介绍几种常见的方法。 1. 使用$_SERVER超全局变量 $_SERVER 是PHP中的一个超全局变量，它包含了诸如头信息、路径、脚本位置等…...

编程日记 2025/2/28 15:42:15

蓝桥杯嵌入式备赛

前言嘿，小伙伴们！备战蓝桥杯嵌入式比赛的号角已经吹响啦！如果你还在为如何入手STM32G431RB这块比赛板子而发愁，别担心，今天我就来给你全方位介绍这块板子，带你快速上手备赛，一起冲向蓝桥杯的赛…...

编程日记 2025/2/28 15:40:05

基于PyTorch实现的自适应注意力卷积网络（AACN）详解

目录基于PyTorch实现的自适应注意力卷积网络（AACN）详解1. 引言2. 网络结构设计2.1 输入层2.2 初始特征提取层2.3 自适应注意力卷积块（AACB）2.4 下采样与高层特征提取层2.5 全局特征汇聚层2.6 输出层3. 模型优化策略4. 数据集介绍5. PyTorch实现代码详解5.1 完整代码实现5.…...

编程日记 2025/2/28 15:39:01

基于Javase的停车场收费管理系统

基于Javase的停车场收费管理系统停车场管理系统开发文档项目概述 1.1 项目背景随着现代化城市的不断发展，车辆数量不断增加，停车难问题也日益突出。为了更好地管理停车场资源，提升停车效率，需要一个基于Java SE的停车场管理…...

编程日记 2025/2/28 15:37:55

Cookie与Session：Web开发中的状态管理机制

引言在Web开发中，HTTP协议是无状态的，这意味着服务器默认不会记住客户端的任何信息。然而，许多应用场景（如用户登录、购物车等）需要服务器能够识别客户端并保持状态。为了解决这个问题，开发者引入了 Cook…...

编程日记 2025/2/28 15:35:47

python量化交易——金融数据管理最佳实践——qteasy创建本地数据源

文章目录 qteasy金融历史数据管理总体介绍本地数据源——DataSource对象默认数据源查看数据表查看数据源的整体信息最重要的数据表其他的数据表从数据表中获取数据向数据表中添加数据删除数据表 —— 请尽量小心，删除后无法恢复！！总结 qteas…...

编程日记 2025/2/28 15:33:44

手机放兜里，支付宝“碰一下”被盗刷？

大家好，我是小悟。近期，网络上关于“支付宝‘碰一下’支付易被盗刷”的传言甚嚣尘上，不少用户对此心生疑虑。首先，要明确一点：“碰一下”支付并不会像某些传言中所描述的那样容易被隔空盗刷。这一观点已经得到了支付…...

编程日记 2025/2/28 15:32:36

C/C++语言知识点一

目录 1. 请对这段代码进行解释：char *const *(*next)( ); 2. 函数指针数组：解释这个表达式char *(*c[10])(int **p); 3. 字符串常量：分析下面这段代码。 4. 访问指定内存地址 5. typedef 和 define 的区别 6. 函数返回局部变量地址问…...

编程日记 2025/2/28 15:30:31

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

Day131 | 灵神 | 回溯算法 | 子集型子集

Day131 | 灵神 | 回溯算法 | 子集型子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/23 12:37:51

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...

编程新知 2026/1/30 22:07:56

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/2/7 0:28:16

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30

【决胜公务员考试】求职OMG——见面课测验1

2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

JUC笔记(上)-复习涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2026/1/31 23:25:09

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 优先性

相关文章：