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

【前端基础】Day 3 CSS-2

news 2026/2/10 1:51:31

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

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...

编程新知 2025/9/7 0:12:53

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。跨国回收网络：废料变黄金的全球棋局艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...

编程新知 2026/1/31 13:42:15

3.8 记事本项目总结项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2026/2/1 6:56:36

令牌桶滑动窗口-＞限流分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析限并发分布式信号量代码实现结果分析lua脚本实现原理双注解去实现限流并发结果分析： 实际业务去理解体会统一注…...

编程新知 2026/1/29 16:36:27

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题安装 flash-attn 会一直卡在 build 那一步或者运行报错解决办法是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

零基础设计模式——行为型模式 - 责任链模式

第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。核心思想：使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到跨域请求接口的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。什么是代理（proxy）？代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2026/1/31 3:52:49

【Elasticsearch】Elasticsearch 在大数据生态圈的地位实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/11/9 21:54:26

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

相关文章：