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

【前端基础】Day 3 CSS-2

news 2025/8/27 11:42:37

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

简易版抽奖活动的设计技术方案

1.前言本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/8/22 3:01:43

【Oracle APEX开发小技巧12】

有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示完整代码： SELECTSF.FE…...

编程新知 2025/8/22 4:03:20

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...

编程新知 2025/8/22 3:26:43

day52 ResNet18 CBAM

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

编程新知 2025/8/10 20:17:44

cf2117E

原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置或，也可以在执行上述操作前执行一次删除任意和。求…...

编程新知 2025/8/23 20:01:48

相机从app启动流程

一、流程框架图二、具体流程分析 1、得到cameralist和对应的静态信息目录如下：重点代码分析：启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/8/25 3:50:36

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

Device Mapper 机制

Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...

编程新知 2025/7/9 2:49:50

网站指纹识别

网站指纹识别网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...

编程新知 2025/8/22 4:32:31

SQL慢可能是触发了ring buffer

简介最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/7/27 0:38:54

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

相关文章：