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

【前端基础】Day 3 CSS-2

news 2025/11/20 16:18:50

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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

day52 ResNet18 CBAM

在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...

编程新知 2025/11/9 1:27:18

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。然而，互联网…...

编程新知 2025/8/18 9:54:31

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个非 root 用户账号并切换到它运行 ns-3。一次性解决方案：创建非 roo…...

编程新知 2025/9/11 11:00:29

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作在…...

编程新知 2025/9/22 21:37:01

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。数据倾斜的主要表现部分节点内存使用率远高于其他节…...

编程新知 2025/11/17 6:08:52

企业如何增强终端安全？

在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/11/19 13:17:41

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。目录 …...

编程新知 2025/11/16 22:42:33

Git常用命令完全指南：从入门到精通

Git常用命令完全指南：从入门到精通一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01

客户案例 | 短视频点播企业海外视频加速与成本优化：MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战某短视频点播企业深耕国内用户市场，但其后台应用系统部署于东南亚印尼 IDC 机房。随着业务规模扩大，传统架构已较难满足当前企业发展的需求，企业面临着三重挑战： ① 业务：国内用户访问海外服…...

编程新知 2025/11/16 22:57:02

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

相关文章：