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

【前端基础】Day 3 CSS-2

news 2026/4/10 8:46:48

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

小白也能懂：Clawdbot整合Qwen3:32B的Web网关配置指南

小白也能懂：Clawdbot整合Qwen3:32B的Web网关配置指南 1. 这个镜像能帮你做什么想象一下，你已经在本地成功运行了Qwen3:32B大模型，通过Ollama命令行调用也很顺畅。但每次想测试模型效果，都要打开终端输入命令，既不方…...

编程新知 2026/4/10 8:46:02

突破信息壁垒：Bypass Paywalls Clean的非典型应用指南

突破信息壁垒：Bypass Paywalls Clean的非典型应用指南在信息自由日益受到限制的数字时代，内容解锁工具成为知识获取的重要桥梁。Bypass Paywalls Clean作为一款开源浏览器扩展，以其轻量高效的特性，为用户提供了突破付费内容限制的…...

编程新知 2026/4/10 8:31:49

Hunyuan-MT-7B翻译模型部署问题排查：启动失败、内存不足解决方案

Hunyuan-MT-7B翻译模型部署问题排查：启动失败、内存不足解决方案 1. 问题概述部署Hunyuan-MT-7B翻译模型时，最常见的两类问题都与资源分配相关： 启动失败：模型加载过程中报错退出内存不足：推理过程中出现OOM&#…...

编程新知 2026/4/10 8:06:58

分享种 .NET 桌面应用程序自动更新解决方案骋

一、Actor 模型：不是并发技巧，而是领域单元 Actor 模型的本质是： Actor 是独立运行的实体 Actor 之间只通过消息交互 Actor 内部状态不可被外部直接访问 Actor 自行决定如何处理收到的消息 Actor 模型真正解决的是： 如何在不共享状…...

编程新知 2026/4/10 7:29:05

G-Helper技术深度评测：轻量化华硕笔记本控制工具的革新之路

G-Helper技术深度评测：轻量化华硕笔记本控制工具的革新之路【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, Stri…...

编程新知 2026/4/10 7:20:37