前端笔记-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>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/689348.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OC foudation框架（下）的学习

OC foudation框架（下）的学习

OCfoudation框架&#xff08;下&#xff09; 前面学习了有关OCfoudation框架的部分内容&#xff0c;我们现在对于后面的内容继续学习。 文章目录 OCfoudation框架&#xff08;下&#xff09;数组&#xff08;NSArray和NSMutableArray&#xff09;对集合元素整体调用方法排序使用…
阅读更多...
数据结构与算法学习笔记三---队列的链式存储表示和实现(C++)

数据结构与算法学习笔记三---队列的链式存储表示和实现(C++)

目录 前言 1.队列的概念 2.队列的表示和实现 1.定义 1.初始化 2.入队 3.出队 4.获取队头元素 5.判断是否是空队列 6.完整代码 前言 这篇博客主要讲的是对队列的链式存储。 1.队列的概念 队列是一种访问受限的线性表。仅允许在表的一端进行插入操作&#xff0c;在表的…
阅读更多...
n5.树（中）

n5.树（中）

1、二叉树的遍历 1.1先序、中序、后序遍历 先序遍历 根->左->右 先序遍历先访问根节点&#xff0c;再访问它的左子树&#xff0c;然后访问它的右子树。对于每次访问到的结点&#xff0c;都要递归地访问左子树、后右子树———递归。 创建 typedef struct TreeNode*…
阅读更多...
更适合户外使用的开放式耳机，佩戴舒适音质悦耳，虹觅HOLME NEO体验

更适合户外使用的开放式耳机，佩戴舒适音质悦耳，虹觅HOLME NEO体验

随着气温的逐渐升高&#xff0c;不管是在室内工作娱乐&#xff0c;还是到户外运动健身&#xff0c;戴上一款合适的耳机都会帮我们隔绝燥热与烦闷&#xff0c;享受音乐与生活。现在市面上的耳机类型特别多&#xff0c;我很喜欢那种分体式的开放耳机&#xff0c;感觉这种耳机设计…
阅读更多...
关于各类软件下载及使用

关于各类软件下载及使用

文章目录 一、VS Code1、下载2、安装3、使用 二、Dev-C1、下载2、安装3、使用 三、VS20191、下载2、安装3、使用 四、IDEA1、下载2、安装3、使用 五、Fiddler1、下载1.1 官网下载1.2 文件下载 2、安装3、使用 一、VS Code 1、下载 2、安装 3、使用 二、Dev-C 1、下载 2、…
阅读更多...
Centos7安装图形化界面

Centos7安装图形化界面

前言&#xff1a;原文在我的博客网站中&#xff0c;持续更新数通、系统方面的知识&#xff0c;欢迎来访&#xff01; Centos7安装图形化界面https://myweb.myskillstree.cn/43.html 目录 一、安装GNOME桌面 二、开机自启动修改为命令行模式 三、卸载图形化界面 一、安装GN…
阅读更多...
JavaScript 动态网页实例 —— 事件处理应用

JavaScript 动态网页实例 —— 事件处理应用

前言 事件处理的应用很广泛。在事件处理的应用中，鼠标事件的应用是最常用到的。本章给出几个鼠标事件处理应用的示例，包括:页面预览、图像切换、点亮文本、鼠标跟随、鼠标感应和禁用鼠标按键。在这些示例中，有的可以直接拿来应用，有的则只提供了一种应用的方法，稍加拓展，…
阅读更多...
【计算机网络】数据链路层的功能

【计算机网络】数据链路层的功能

数据链路层的基本功能&#xff1a; 封装成帧透明传输差错检测 数据链路层使用的信道主要有两种 点对点信道——PPP协议广播信道——CSMA/CD协议(有线局域网)、CSMA/CA协议(无线局域网) 数据链路层所处的地位 从图中可以看出&#xff0c;数据从主机H1送到主机H2需要在路径中…
阅读更多...
使用 sudo apt upgrade 出现的提示

使用 sudo apt upgrade 出现的提示

┌────────────────────────────────────────────────┤ Pending kernel upgrade ├────────────────────────────────────────────────┐ │ …
阅读更多...
vue3+TS或JS, 实现粒子特效 @tsparticles/vue3

vue3+TS或JS, 实现粒子特效 @tsparticles/vue3

在跟着B站视频BV11s4y1a71T学习时&#xff0c;使用到了粒子效果&#xff0c;但是以下这种情况只适用于项目是基于typescript的写法&#xff0c;否则无法实现。 粒子效果 VUE3TStsparticles/vue31、安装2、main.ts 引入3、App.vue4、效果 VUE3JS非最新版1、安装低版本的vue3-pa…
阅读更多...
ACC-UNet: A Completely Convolutional UNet Model for the 2020s

ACC-UNet: A Completely Convolutional UNet Model for the 2020s

文章目录 ACC-UNet: A Completely Convolutional UNet Model for the 2020s摘要方法实验结果 ACC-UNet: A Completely Convolutional UNet Model for the 2020s 摘要 这十年以来&#xff0c;计算机视觉领域引入了 Vision Transformer&#xff0c;标志着广泛的计算机视觉发生了…
阅读更多...
同程旅行基于Proxy的Kafka最佳实践

同程旅行基于Proxy的Kafka最佳实践

公众号文章&#xff1a;同程旅行基于Proxy的Kafka最佳实践 Apache Kafka&#xff0c;作为当前企业级数据流处理的首选平台&#xff0c;由于其高吞吐量和可扩展性而深受欢迎。 然而&#xff0c;随着企业数据量的爆炸性增长和业务需求的多样化&#xff0c;Kafka 集群面临着各种挑…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023