前端笔记-day04
文章目录
- 01-后代选择器
- 02-子代选择器
- 03-并集选择器
- 04-交集选择器
- 05-伪类选择器
- 06-拓展-超链接伪类
- 07-CSS特性-继承性
- 08-CSS特性-层叠性
- 09-CSS特性-优先级
- 11-Emmet写法
- 12-背景图
- 13-背景图平铺方式
- 14-背景图位置
- 15-背景图缩放
- 16-背景图固定
- 17-background属性
- 18-显示模式
- 19-显示模式转换
- 20-综合案例-热词
- 21-综合案例-banner效果
01-后代选择器
<!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>/* 设置div里面的span标签包含的文字颜色 *//* 这叫做后代选择器 */div span{color: aqua;}</style>
</head>
<body><span>span 标签</span><div><span>这是div的儿子 span</span><p><span>这是孙子span</span></p></div>
</body>
</html>
02-子代选择器
<!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>/* 子代选择器 */div > span{color: aquamarine;}</style>
</head>
<body><div><span>erzi</span><p><span>sunzi</span></p></div>
</body>
</html>
03-并集选择器
<!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>div,p,span{color: aqua;}</style>
</head>
<body><div>div</div><p>p</p><span>span</span>
</body>
</html>
04-交集选择器
<!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>/* 第一个p标签文字颜色是红色 *//* 选择器之前没有任何的符号 */p.box{color: red;}</style>
</head>
<body><p class="box">p标签,使用了类选择器</p><p>p标签</p><div class="box">div标签,使用了类选择器</div></body>
</html>
05-伪类选择器
<!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:hover{color: aqua;}.box:hover{color: blue;}</style>
</head>
<body><a href="#">a标签,超链接</a><div class="box">div标签</div>
</body>
</html>
06-拓展-超链接伪类
<!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:link{color: red;}a:visited{color: aqua;}a:hover{color: black;}a:active{color: blue;} */a{color: red;}a:hover{color: antiquewhite;}</style>
</head>
<body><a href="#">a标签测试伪类</a>
</body>
</html>
07-CSS特性-继承性
<!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>body{font-size: 30px;color: red;font-weight: 700;}</style>
</head>
<body><div>div</div><p>p</p><span>span</span><a href="#">a</a><h1>h1标签</h1>
</body>
</html>
08-CSS特性-层叠性
<!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>/* 相同属性回覆盖,不同属性会叠加 */div{color: green;font-size: 30px;}div{color: red;font-size: 700;}</style>
</head><body><div>div标签</div>
</body>
</html>
09-CSS特性-优先级
<!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>/* 通配符选择器 */*{color: red;}/* 标签选择器 */div{color: green;}/* 类选择器 */.box{color: blue;}/* id选择器 */#text{color: orange;}/* 行内样式 *//* !important*/*{color: red!important}</style>
</head>
<body><!-- --><div class="box" id="text" style="color: purple;">div标签</div>
</body>
</html>
11-Emmet写法
Emmet 是一种简化 HTML 和 CSS 编写的工具,它通过简洁的语法提高了编码效率。
<!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>div{width: ;height: ;width: ;background-color: ;width: 500px;height: 200px;background-color: #fff;}</style>
</head>
<body><div class="box"></div><p class="boxx"></p><p id="id"></p><div><p></p></div><span></span><span></span><span></span><div>111</div>
</body>
</html>
12-背景图
<!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>div{width: 400px;height: 400px;background-image: url(./images/1111.jpg);}</style>
</head>
<body><div>divbiaoqian</div>
</body>
</html>
13-背景图平铺方式
<!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>div{width: 400px;height: 400px;background-color: pink;background-image: url(images/20.jpg);background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */}</style>
</head>
<body><div>div标签</div>
</body>
</html>
14-背景图位置
<!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>div{width: 400px;height: 400px;background-color: pink;background-image: url(./images/20.jpg);background-repeat: no-repeat;/* 左上角 *//* background-position: 0 0; *//* background-position: left right; *//* background-position: right bottom; *//* 水平:正数向左负数向右 *//* background-position: 50px 0; *//* background-position: -50px 0; *//* 垂直:整数向下 负数向上 *//* background-position: 0 100px; *//* background-position: 0 -100px; *//* background-position: 50px center; *//* background-position: bottom left; *//* 关键字可以只写一个,另一个方向居中 */background-position: bottom;background-position: 50px ;} </style>
</head>
<body><div>divbiaoqian</div>
</body>
</html>
15-背景图缩放
<!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>div{width: 400px;height: 400px;background-color: pink;background-image: url(images/20.jpg);background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; *//* background-size: contain; *//* cover完全覆盖 背景图可能显示不全 *//* background-size: cover; *//* 宽度保持一致 */background-size: 100%;}</style>
</head>
<body><div>div标签</div>
</body>
</html>
16-背景图固定
<!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>body{background-color: pink;background-image: url(images/1111.jpg);background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */background-position: center top;background-attachment: fixed;}</style>
</head>
<body><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv vff</p><p>fkmkfvkfdvk</p>
</body>
</html>
17-background属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- background复合属性 --><style>div{width: 400px;height: 400px;/* 颜色 图片路径 平铺方式 背景图位置、背景图缩放*//* background: pink url(./images/20.jpg) no-repeat center bottom/cover; */background: pink url(./images/20.jpg) no-repeat center bottom/contain;}</style>
</head>
<body><div>div标签</div>
</body>
</html>
18-显示模式
<!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>/* 块级元素的特点是独占一行,宽度默认是父级的100% 加宽高生效 */div{width: 100px;height: 100px;}.div1{background-color: red;}.div2{background-color: aqua;}/* 行内元素加宽高不生效 */span{width: 100px;height: 100px;}.span1{background-color: pink;}.span2{background-color: blue;}/* 行内块:一行共存多个;默认尺寸由内容撑开 ;加宽高生效 */img{height: 100px;width: 100px;}</style>
</head>
<body><!-- 块级 --><div class="div1">div标签1</div><div class="div2">div标签2</div><!-- 行内 --><span class="span1">span1</span><span class="span2">span2</span><!-- 行内块 --><img src="./images/20.jpg" alt=""><img src="./images/20.jpg" alt="">
</body>
</html>
19-显示模式转换
<!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>/* 块级元素的特点是独占一行,宽度默认是父级的100% 加宽高生效 */div{width: 100px;height: 100px;/* display: inline-block; */display: inline;}.div1{background-color: red;}.div2{background-color: aqua;}/* 行内元素加宽高不生效 */span{width: 100px;height: 100px;/* display: block; */display: inline-block;}.span1{background-color: pink;}.span2{background-color: blue;}/* 行内块:一行共存多个;默认尺寸由内容撑开 ;加宽高生效 */img{height: 100px;width: 100px;display: block;}</style>
</head>
<body><!-- 块级 --><div class="div1">div标签1</div><div class="div2">div标签2</div><!-- 行内 --><span class="span1">span1</span><span class="span2">span2</span><!-- 行内块 --><img src="./images/20.jpg" alt=""><img src="./images/20.jpg" alt="">
</body>
</html>
20-综合案例-热词
<!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>div{background-color: #3064bb;width: 200px;height: 80px;text-align: center;}div>a{line-height: 80px;font-size: 18px;text-decoration: none;color: white;}div:hover{background-color: #608dd9;}</style>
</head>
<body><!-- 也可以不用在div里面嵌套a标签 直接把a标签通过display变为块级标签 --><div><a href="#">HTML</a></div><div><a href="#">CSS</a></div><div><a href="#">JavaScript</a></div><div><a href="#">Vue</a></div><div><a href="#">React</a></div>
</body>
</html>

21-综合案例-banner效果
<!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>.banner{height: 500px;background-color: #f3f3f4;background-image: url(./images/20.jpg);background-repeat: no-repeat;background-position: left bottom;/* text—align是对文字属性进行更改,文字属性具有继承性 */text-align: right;color: #333;}.p1{height: 100px;line-height: 100px;font-size: 35px;}.p2{font-size: 20px;}.banner a{background-color:#f06b1f;height: 40px;width: 125px;color: #fff;/* 转行内块无法右对齐,因为已经占了一整行了 */display: inline-block;text-align: center;line-height: 40px;font-size: 20px;}</style>
</head>
<body><div class="banner"><p class="p1">让创造产生价值</p><p class="p2">我们希望小游戏平台可以提供无线的可能,地处江南单纯的拿出你的觉得你节食减肥那段艰难决定</p><a>我要报名</a></div>
</body>
</html>

相关文章:
前端笔记-day04
文章目录 01-后代选择器02-子代选择器03-并集选择器04-交集选择器05-伪类选择器06-拓展-超链接伪类07-CSS特性-继承性08-CSS特性-层叠性09-CSS特性-优先级11-Emmet写法12-背景图13-背景图平铺方式14-背景图位置15-背景图缩放16-背景图固定17-background属性18-显示模式19-显示模…...
计算机字符集产生的历史与乱码
你好,我是 shengjk1,多年大厂经验,努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注!你会有如下收益: 了解大厂经验拥有和大厂相匹配的技术等 希望看什么,评论或者私信告诉我! 文章目录 一…...
Rerank进一步提升RAG效果
RAG & Rerank 目前大模型应用中,RAG(Retrieval Augmented Generation,检索增强生成)是一种在对话(QA)场景下最主要的应用形式,它主要解决大模型的知识存储和更新问题。 简述RAG without R…...
使用train.py----yolov7
准备工作 在训练之前,数据集的工作和配置环境的工作要做好 数据集:看这里划分数据集,训练自己的数据集。_划分数据集后如何训练-CSDN博客 划分数据集2,详细说明-CSDN博客 配置环境看这里 从0开始配置环境-yolov7_gpu0是inter g…...
机器学习第37周周报 GGNN
文章目录 week37 GGNN摘要Abstract一、文献阅读1. 题目2. abstract3. 网络架构3.1 数据处理部分3.2 门控图神经网络3.3 掩码操作 4. 文献解读4.1 Introduction4.2 创新点4.3 实验过程4.3.1 传感器设置策略4.3.2 数据集4.3.3 实验设置4.3.4 模型参数设置4.3.5 实验结果 5. 结论 …...
Baidu Comate:释放编码潜能,革新软件开发
Baidu Comate Baidu Comate,智能代码助手,凭借着文心大模型的强大支撑,结合了百度多年的编程实战数据和丰富的开源资源,形成了一款崭新的编码辅助利器。它不仅具备着高智能、多场景、价值创造的特质,更可广泛应用于各…...
MATLAB的Bar3函数调节渐变色(内附渐变色库.mat及.m文件免费下载链接)
一. colormap函数 可以使用colormap函数: t1[281.1,584.6, 884.3,1182.9,1485.2; 291.6,592.6,896,1197.75,1497.33; 293.8,596.4,898.6,1204.4,1506.4; 295.8,598,904.4,1209.0,1514.6];bar3(t1,1) set(gca,XTickLabel,{300,600,900,1200,1500},FontSize,10) set…...
使用 TensorFlow.js 和 OffscreenCanvas 实现实时防挡脸弹幕
首先,要理解我们的目标,我们将实时获取视频中的面部区域并将其周围的内容转为不透明以制造出弹幕的“遮挡效应”。 步骤一:环境准备 我们将使用 TensorFlow.js 的 Body-segmentation 库来完成面部识别部分,并使用 OffscreenCanv…...
【计算机网络篇】数据链路层(10)在物理层扩展以太网
文章目录 🍔扩展站点与集线器之间的距离🛸扩展共享式以太网的覆盖范围和站点数量 🍔扩展站点与集线器之间的距离 🛸扩展共享式以太网的覆盖范围和站点数量 以太网集线器一般具有8~32个接口,如果要连接的站点数量超过了…...
conan2 基础入门(03)-使用(msvc为例)
conan2 基础入门(03)-使用(msvc为例) 文章目录 conan2 基础入门(03)-使用(msvc为例)⭐准备生成profile文件预备文件和Code ⭐使用指令预览正确执行结果可能出现的问题 ⭐具体讲解conanconanfile.txt执行 install cmakeCMakeLists.txt生成项目构建 END ⭐准备 在阅读和学习本文…...
uniapp this 作用域保持的方法
在 UniApp(或任何基于 Vue.js 的框架)中,this 关键字通常用于引用当前 Vue 实例的上下文。然而,当你在回调函数、定时器、Promise、异步函数等中使用 this 时,你可能会发现 this 的值不再指向你期望的 Vue 实例&#x…...
vue2 与vue3的差异汇总
Vue 2 与 Vue 3 之间存在多方面的差异,这些差异主要体现在性能、API设计、数据绑定、组件结构、以及生命周期等方面。以下是一些关键差异的汇总: 数据绑定与响应式系统 Vue 2 使用 Object.defineProperty 来实现数据的响应式,这意味着只有预…...
Java反射(含静态代理模式、动态代理模式、类加载器以及JavaBean相关内容)
目录 1、什么是反射 2、Class类 3、通过Class类取得类信息/调用属性或方法 4、静态代理和动态代理 5.类加载器原理分析 6、JavaBean 1、什么是反射 Java反射机制的核心是在程序运行时动态加载类并获取类的详细信息,从而操作类或对象的属性和方法。本质是JVM得…...
Scoop国内安装、国内源配置
安装配置源可参考gitee上的大佬仓库,里面的步骤、代码都很详细,实测速度也很好 glsnames/scoop-installer 也可以结合其它bucket使用 使用Github加速网站,也可以换做其他代理方式,自行测试 例如:https://mirror.ghprox…...
【软件开发规范篇】JAVA后端开发编程规范
作者介绍:本人笔名姑苏老陈,从事JAVA开发工作十多年了,带过大学刚毕业的实习生,也带过技术团队。最近有个朋友的表弟,马上要大学毕业了,想从事JAVA开发工作,但不知道从何处入手。于是࿰…...
数据结构与算法学习笔记三---循环队列的表示和实现(C语言)
目录 前言 1.为啥要使用循环队列 2.队列的顺序表示和实现 1.定义 2.初始化 3.销毁 4.清空 5.空队列 6.队列长度 7.获取队头 8.入队 9.出队 10.遍历队列 11.完整代码 前言 本篇博客介绍栈和队列的表示和实现。 1.为啥要使用循环队列 上篇文章中我们知道了顺序队列…...
vue3中的reactive和ref
在Vue 3中,reactive和ref是两个常用的响应式API,用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用,而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法,并提供代码示例。 1. rea…...
Centos安装 docker和docker-compose
安装docker yum install -y yum-utils yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo yum install docker-ce docker-ce-cli containerd.io sudo systemctl start docker sudo systemctl enable docker docker version 在L…...
VUE 或 Js封装通用闭包循环滚动函数
1、vue3 闭包滚动函数的使用 js 调用也基本雷同 // 滚动Tab组件const scoreTabRef ref()// 滚动的选项const scrollOption ref({// 滚动的Dom元素scrollDom: null,// 滚动的时间间隔scrollInterval: 1500,// 滚动的距离scrollSep: 100,// 滚动历时时间scrollDuration: 10…...
个人所得税计算器
个人所得税计算器 本文使用drools规则引擎根据预定义的规则计算个人所得税。我国个人所得税的纳税义务人是在中国境内居住有所得的人,以及不在中国境内居住而从中国境内取得所得的个人,包括中国国内公民,在华取得所得的外籍人员和港、澳、台同胞。个人所得税的计算公式如下…...
Phi-4-Reasoning-Vision部署案例:中小企业AI视觉分析私有化部署
Phi-4-Reasoning-Vision部署案例:中小企业AI视觉分析私有化部署 1. 项目背景与价值 在中小企业数字化转型过程中,AI视觉分析技术正成为提升运营效率的关键工具。传统方案往往面临两大痛点:一是商业API调用成本高且数据隐私难保障࿱…...
RWKV7-1.5B-g1a惊艳案例:将复杂段落压缩为三条逻辑闭环要点
RWKV7-1.5B-g1a惊艳案例:将复杂段落压缩为三条逻辑闭环要点 1. 模型能力展示:从复杂到简洁的文本处理 RWKV7-1.5B-g1a作为一款轻量级文本生成模型,在信息压缩和提炼方面展现出令人惊喜的能力。我们通过一个实际案例来展示它如何将复杂内容转…...
OneMore插件:让OneNote效率倍增的全方位解决方案
OneMore插件:让OneNote效率倍增的全方位解决方案 【免费下载链接】OneMore A OneNote add-in with simple, yet powerful and useful features 项目地址: https://gitcode.com/gh_mirrors/on/OneMore 当你在OneNote中处理复杂表格时,是否曾因缺乏…...
【2026最新】AI产品经理学习路径全解析:顺序错了,努力全白费!
导语 为什么90%的人学不好AI产品经理? 在2025年这个AI爆发的时代,AI产品经理已成为最炙手可热的职业之一。然而,许多“转行者”却在学习过程中频频踩坑: 学了3个月Python却连模型调参都不会?看懂了Prompt Engineeri…...
基于三相两电平逆变器的VSG并网系统:电压电流双闭环控制的仿真研究
VSG并网,基于三相两电平逆变器的虚拟同步机并网,电压电流双闭环控制 1.VSG 2.电压电流双闭环 3..提供相关参考文献 支持simulink2022以下版本,联系跟我说什么版本,我给转成你版本(默认发2016b)。最近在研究…...
STM32F103 Bootloader跳转失败?别急着怀疑Boot,先检查你的裸机APP中断向量表
STM32F103 Bootloader跳转失败?别急着怀疑Boot,先检查你的裸机APP中断向量表 当你的STM32F103项目采用HAL库Bootloader搭配裸机应用程序(APP)时,如果遇到Bootloader能正常启动HAL版本的APP却无法跳转裸机APP的情况&…...
3步深度配置Obsidian Copilot:打造专属AI知识工作流
3步深度配置Obsidian Copilot:打造专属AI知识工作流 【免费下载链接】obsidian-copilot A ChatGPT Copilot in Obsidian 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-copilot 在信息爆炸时代,知识工作者面临的最大挑战不是获取信息&am…...
Gorgonia性能优化终极指南:10个技巧让你的深度学习模型运行速度翻倍
Gorgonia性能优化终极指南:10个技巧让你的深度学习模型运行速度翻倍 【免费下载链接】gorgonia 项目地址: https://gitcode.com/gh_mirrors/gor/gorgonia Gorgonia是一个功能强大的深度学习框架,能够帮助开发者构建和训练复杂的神经网络模型。然…...
吃透MQ:从原理到落地,解决分布式系统的核心痛点
在分布式系统与微服务架构普及的今天,“高并发、高可用、低耦合”成为系统设计的核心诉求。而消息队列(Message Queue,简称MQ),作为分布式架构中的“通信枢纽”,凭借异步通信、流量削峰、系统解耦等核心能力…...
Axure RP 10实战:3分钟搞定Tab切换效果(附交互样式设置技巧)
Axure RP 10高级Tab切换效果:从基础实现到专业级交互设计 在当今快节奏的数字化产品设计领域,Tab切换作为最常见的用户界面元素之一,其交互体验的优劣直接影响用户对产品的第一印象。Axure RP 10作为行业领先的原型设计工具,提供了…...
