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

前端笔记-day04

news 2025/7/9 6:33:34

文章目录

- 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-显示模…...

编程日记 2024/5/12 19:44:02

计算机字符集产生的历史与乱码

你好，我是 shengjk1，多年大厂经验，努力构建通俗易懂的、好玩的编程语言教程。欢迎关注！你会有如下收益： 了解大厂经验拥有和大厂相匹配的技术等希望看什么，评论或者私信告诉我！ 文章目录一…...

编程日记 2024/5/12 19:43:00

Rerank进一步提升RAG效果

RAG & Rerank 目前大模型应用中，RAG（Retrieval Augmented Generation，检索增强生成）是一种在对话（QA）场景下最主要的应用形式，它主要解决大模型的知识存储和更新问题。简述RAG without R…...

编程日记 2024/5/12 19:39:56

使用train.py----yolov7

准备工作在训练之前，数据集的工作和配置环境的工作要做好数据集：看这里划分数据集，训练自己的数据集。_划分数据集后如何训练-CSDN博客划分数据集2，详细说明-CSDN博客配置环境看这里从0开始配置环境-yolov7_gpu0是inter g…...

编程日记 2024/5/12 19:37:54

机器学习第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. 结论 …...

编程日记 2024/5/12 19:36:53

Baidu Comate：释放编码潜能，革新软件开发

Baidu Comate Baidu Comate，智能代码助手，凭借着文心大模型的强大支撑，结合了百度多年的编程实战数据和丰富的开源资源，形成了一款崭新的编码辅助利器。它不仅具备着高智能、多场景、价值创造的特质，更可广泛应用于各…...

编程日记 2024/5/12 19:35:51

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…...

编程日记 2024/5/12 19:34:50

使用 TensorFlow.js 和 OffscreenCanvas 实现实时防挡脸弹幕

首先，要理解我们的目标，我们将实时获取视频中的面部区域并将其周围的内容转为不透明以制造出弹幕的“遮挡效应”。步骤一：环境准备我们将使用 TensorFlow.js 的 Body-segmentation 库来完成面部识别部分，并使用 OffscreenCanv…...

编程日记 2024/5/12 19:33:49

【计算机网络篇】数据链路层（10）在物理层扩展以太网

文章目录 🍔扩展站点与集线器之间的距离🛸扩展共享式以太网的覆盖范围和站点数量 🍔扩展站点与集线器之间的距离 🛸扩展共享式以太网的覆盖范围和站点数量以太网集线器一般具有8~32个接口，如果要连接的站点数量超过了…...

编程日记 2024/5/12 19:32:48

conan2 基础入门(03)-使用(msvc为例)

conan2 基础入门(03)-使用(msvc为例) 文章目录 conan2 基础入门(03)-使用(msvc为例)⭐准备生成profile文件预备文件和Code ⭐使用指令预览正确执行结果可能出现的问题 ⭐具体讲解conanconanfile.txt执行 install cmakeCMakeLists.txt生成项目构建 END ⭐准备在阅读和学习本文…...

编程日记 2024/5/12 19:31:47

uniapp this 作用域保持的方法

在 UniApp（或任何基于 Vue.js 的框架）中，this 关键字通常用于引用当前 Vue 实例的上下文。然而，当你在回调函数、定时器、Promise、异步函数等中使用 this 时，你可能会发现 this 的值不再指向你期望的 Vue 实例&#x…...

编程日记 2024/5/12 19:29:44

vue2 与vue3的差异汇总

Vue 2 与 Vue 3 之间存在多方面的差异，这些差异主要体现在性能、API设计、数据绑定、组件结构、以及生命周期等方面。以下是一些关键差异的汇总： 数据绑定与响应式系统 Vue 2 使用 Object.defineProperty 来实现数据的响应式，这意味着只有预…...

编程日记 2024/5/12 19:28:43

Java反射（含静态代理模式、动态代理模式、类加载器以及JavaBean相关内容）

目录 1、什么是反射 2、Class类 3、通过Class类取得类信息/调用属性或方法 4、静态代理和动态代理 5.类加载器原理分析 6、JavaBean 1、什么是反射 Java反射机制的核心是在程序运行时动态加载类并获取类的详细信息，从而操作类或对象的属性和方法。本质是JVM得…...

编程日记 2024/5/12 19:25:40

Scoop国内安装、国内源配置

安装配置源可参考gitee上的大佬仓库，里面的步骤、代码都很详细，实测速度也很好 glsnames/scoop-installer 也可以结合其它bucket使用使用Github加速网站，也可以换做其他代理方式，自行测试例如：https://mirror.ghprox…...

编程日记 2024/5/12 19:24:38

【软件开发规范篇】JAVA后端开发编程规范

作者介绍：本人笔名姑苏老陈，从事JAVA开发工作十多年了，带过大学刚毕业的实习生，也带过技术团队。最近有个朋友的表弟，马上要大学毕业了，想从事JAVA开发工作，但不知道从何处入手。于是&#xff0…...

编程日记 2024/5/12 19:23:35

数据结构与算法学习笔记三---循环队列的表示和实现(C语言)

目录前言 1.为啥要使用循环队列 2.队列的顺序表示和实现 1.定义 2.初始化 3.销毁 4.清空 5.空队列 6.队列长度 7.获取队头 8.入队 9.出队 10.遍历队列 11.完整代码前言本篇博客介绍栈和队列的表示和实现。 1.为啥要使用循环队列上篇文章中我们知道了顺序队列…...

编程日记 2024/5/12 19:22:34

vue3中的reactive和ref

在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。 1. rea…...

编程日记 2024/5/12 19:21:33

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…...

编程日记 2024/5/12 19:20:31