CSS 03

1.选择器

1.1 结构伪类选择器

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结构伪类选择器</title><style>/* 第一个 *//* li:first-child {background-color: green;} *//* 最后一个 *//* li:last-child {background-color: orange;} *//* 写数字几就选第几个 */li:nth-child(3) {background-color: green;}</style>
</head>
<body><ul><li>li 1</li><li>li 2</li><li>li 3</li><li>li 4</li><li>li 5</li><li>li 6</li><li>li 7</li><li>li 8</li></ul>
</body>
</html>

效果:

1.2 结构伪类选择器公式

通过公式可以快速找到多个元素

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结构伪类选择器</title><style>/* 写数字几就选第几个 *//* 偶数 *//* li:nth-child(2n) {background-color: green;} *//* 奇数 *//* li:nth-child(2n+1) {background-color: green;} *//* 5的倍数 *//* li:nth-child(5n) {background-color: green;} *//* n是从0开始计算,即寻找5及以后的数 *//* li:nth-child(n+5) {background-color: green;} *//* 找第5个及以前 */li:nth-child(-n+5) {background-color: green;}</style>
</head>
<body><ul><li>li 1</li><li>li 2</li><li>li 3</li><li>li 4</li><li>li 5</li><li>li 6</li><li>li 7</li><li>li 8</li></ul>
</body>
</html>

效果:查找-n+5

1.3 伪元素选择器

用来生成假标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪元素选择器</title><style>div {height: 300px;width: 300px;background-color: pink;}/* 必须设置content属性,没有content,伪元素选择器不生效 */div::before {content: "老鼠";}div::after {content: "大米";}</style>
</head>
<body><!-- 标签内容:老鼠爱大米 --><div>爱</div>
</body>
</html>

比如我们只有一个div标签,内容是爱,但是想生成老鼠爱大米,就可以在div前后加假标签来显示

加完之后就正确显示:

假标签是生效的

2.PxCook软件

用来查找设计图中各元素距离等

3.盒子模型

3.1 组成

代码:

<!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: 200px;height: 200px;background-color: pink;/* 内边距:内容和盒子边缘 */padding: 20px;/* 边框线 */border: 1px solid #000;/* 外边距:出现在盒子外面,拉开两个盒子之间的距离 */margin: 50px;}</style>
</head>
<body><div>div标签</div>
</body>
</html>

效果:

初始:

修改后:

3.2 边框线

代码:

<!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: 200px;height: 200px;background-color: pink;/* 实线 *//* border: 1px solid #000; *//* 虚线 *//* border: 2px dashed red; *//* 点线 */border: 3px dotted green;}</style>
</head>
<body><div>div标签</div>
</body>
</html>

效果:

3.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>div {width: 200px;height: 200px;background-color: pink;border-top: 1px solid #000;border-right: 2px dashed red;border-bottom: 5px dotted green;border-left: 10px solid orange;}</style>
</head>
<body><div>div标签</div>
</body>
</html>

效果:

四个方向都可以单独设置边框线

3.4 内边距

内边距也可以单独设置四个方向的距离

代码:

<!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: 200px;height: 200px;background-color: pink;/* padding: 20px; *//* 与上边缘的距离 */padding-top: 10px;/* 与右边缘的距离 */padding-right: 20px;/* 与下边缘的距离 */padding-bottom: 40px;/* 与左边缘的距离 */padding-left: 100px;}</style>
</head>
<body><div>div标签</div>
</body>
</html>

 效果:

3.5 内边距多值写法

代码:

<!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: 200px;height: 200px;background-color: pink;/* 四值;   上 右 下 左  *//* padding: 10px 20px 80px 100px; *//* 三值: 上  左右  下 *//* padding: 10px 40px 80px; *//* 两值: 上下  左右 */padding: 10px 80px;/* 从上开始顺时针转一圈,如果当前方向没有数值,取值和对面一样 */}</style>
</head>
<body><div>div标签</div>
</body>
</html>

规律:从上开始顺时针转一圈,如果当前方向没有数值,取值和对面一样


3.6 盒子模型尺寸计算

代码:

<!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: 200px;height: 200px;/* 手动减法实现盒子 200x200 *//* width: 160px;height: 160px; */background-color: pink;padding: 20px;/* 内减模式:不需要手动减法,加padding和border不会撑大盒子 */box-sizing: border-box;}</style>
</head>
<body><div>div标签</div>
</body>
</html>

我们想要让div这个盒子大小不变,加了padding等属性之后可以用手动减法去设置原来的w和h大小,或者使用内减模式

3.7 盒子模型外边距及版心居中

添加外间距后,盒子大小不变

像京东界面,让版心内容居中

代码:

<!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: 1000px;height: 200px;background-color: pink;/* 外间距不会撑大盒子 *//* margin: 50px; *//* margin-left: 50px; *//* margin的多值写法和padding是一样的 *//* margin: 50px 100px; *//* 版心居中 */margin: 0 auto;}</style>
</head>
<body><div>版心内容</div>
</body>
</html>

版心居中必须要有width值,因为浏览器auto计算的逻辑是用整个的宽减去width再除以2得出左右外间距

/* 版心居中 */
margin: 0 auto;

效果:

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>/* 清除默认边距 */* {margin: 0;padding: 0;/* 使用内减,方便之后修改不会撑大盒子 */box-sizing: border-box;} /* 去掉列表的项目符号 */li {list-style: none;}</style>
</head>
<body><h1>h1标题</h1><p>p</p><ul><li>li</li></ul>
</body>
</html>

修改前:

清除后

但是li的小圆点只是挪到浏览器外面了,没有被清除

添加这行代码即可:

/* 去掉列表的项目符号 */
li {list-style: none;
}

3.9 盒子模型-元素溢出

内容已经超出了盒子范围

hidden:

超出的部分会被隐藏

scroll:

无论内容多少,scroll都有滚动条

auto:

多的时候有滚动条,少的时候没有

3.10 外边距合并现象

代码:

<!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>.one {width: 100px;height: 100px;background-color: pink;margin-bottom: 80px;}.two {width: 100px;height: 100px;background-color: orange;margin-top: 50px;}</style>
</head>
<body><div class="one">one</div><div class="two">two</div>
</body>
</html>

发现较小的margin会被大的合并,这里是下面的two的margin top被上面的one的margin bottom合并了

3.11 外边距塌陷问题

添加前:

添加后:

发现添加之后父级这个盒子也下去了

代码:

<!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>.father {width: 300px;height: 300px;background-color: pink;padding-top: 50px;box-sizing: border-box; /* 内容溢出就会隐藏 *//* overflow: hidden; *//* border-top: 1px solid #000; */}.son {width: 100px;height: 100px;background-color: orange;/* margin-top: 50px;  */}</style>
</head>
<body><div class="father"><div class="son">son</div></div></body>
</html>

取消子级margin,只设置父级padding(推荐使用)

父级设置hidden和border top都可以产生一样的效果

3.12 行内元素内外间距问题

添加margin和padding都不能改变行内元素垂直位置

添加行高即可

代码:

<!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>span {margin: 50px;padding: 20px;line-height: 100px;}</style>
</head>
<body><span>span标签</span><span>span标签</span>
</body>
</html>

3.13 盒子模型-圆角

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=            , initial-scale=1.0"><title>Document</title><style>div {margin: 50px auto;width: 200px;height: 200px;background-color: orange;/* border-radius: 20px; *//* 圆角写多值,从左上角顺时针赋值,没有取值的角与对角取值相同 *//*   左上  右上   右下    左下 *//* border-radius: 10px 20px 40px 80px;  *//*  左上  右上+左下  右下*//* border-radius: 10px 40px 80px; *//* 左上+右下  右上+左下 */border-radius: 10px 80px;}</style>
</head>
<body><div></div>
</body>
</html>

圆角效果

四值写法

三值写法

3.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>img {/* 盒子本身要是正方形才能做圆形 */width: 200px;height: 200px;/* border-radius: 100px; *//* 做成正圆形,50%是最大值,超过50%也跟50%一样 */border-radius: 50%;}div {/* 盒子本身是长方形才能做胶囊 */width: 200px;height: 80px;background-color: orange;/* 高度的一半 */border-radius: 40px;}</style>
</head>
<body><!-- 正圆形--头像 --><img src="../day04/image/3.jpg" alt=""><!-- 胶囊状--按钮 --><div></div>
</body>
</html>

效果:

3.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 {margin: 50px auto;width: 200px;height: 80px;background-color: orange;/* x轴偏移量  y轴偏移量  模糊半径  扩散半径  颜色  内外阴影(inset表示内阴影) */box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5) inset;}</style>
</head>
<body><div></div>
</body>
</html>

效果:

这是加了内阴影inset的

案例1:产品卡片

<!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>* {/* 整体去除默认样式 */margin: 0;padding: 0;/* 使用内减,方便之后修改不会撑大盒子 */box-sizing: border-box;}body {/* 设置网页背景色 */background-color: #f1f1f1;}.product {margin: 50px auto;/* 图片上边缘和盒子的距离 */padding-top: 40px;width: 270px;height: 253px;background-color: #fff;/* 行内内容居中 */text-align: center;/* 设置圆角 */border-radius: 10px;}.product h4 {/* 与上面的盒子的距离 */margin-top: 20px;/* 与下面的盒子的距离 */margin-bottom: 12px;font-size: 18px;color: #333;/* 去粗 */font-weight: 400;}.product p {font-size: 12px;color: #555;}img {/* 把图片设置为圆形 */width: 70px;height: 70px;border-radius: 50%;}</style>
</head>
<body><div class="product"> <img src="../day04/image/3.jpg" alt=""><h4>优选产品</h4><p>包含最好的产品</p></div>
</body>
</html>

效果:

案例2:新闻

整体新闻区域:w360+h200,且要版心居中

新闻标题区:w360+h34,去掉左边边框线

单新闻标题:w48+h34

新闻上面的描边:w48+h3

右边框线和父级一样

正文区域:内边距5px

两张图片,一个设置给li的背景,一个设置给a的背景

a标签里面文字的距离20px

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}a {text-decoration: none;}/* 整体新闻区域 */.news {margin: 100px auto;width: 360px;height: 200px;/* background-color: orange; */}/* 新闻标题区 */.news .hd {height: 34px;background-color: #eee;border: 1px solid #dbdee1;border-left: 0;}/* 单新闻标题 */.news .hd a {/* -1,盒子向上移动 *//* 超链接行内元素转块元素 */margin-top: -1px;display: block;/* 上边框线 */border-top: 3px solid #ff8400;/* 右边框线 */border-right: 1px solid #dbdee1;width: 48px;height: 34px;background-color: #fff;/* 文字居中 */text-align: center;line-height: 32px;font-size: 14px;color: #333;}/* 正文区域 */.news .bd {padding: 5px;}/* li负责的背景图 */.news .bd  li {  /* 装饰图片 */padding-left: 15px;background-image: url(./image/2.png);background-repeat: no-repeat;/* 图片最左边居中 */background-position: 0 center;}/* a负责的背景图 */.news .bd  li a {padding-left: 20px;/* 图片最左边居中 */background: url(./image/1.png) no-repeat 0 center;font-size: 12px;color: #666;line-height: 24px;}.news .bd  li a:hover {/* 鼠标悬停 */color:#ff8400;}</style>
</head>
<body><!-- 新闻区域:标题+内容 --><div class="news"><div class="hd"><a href="#">新闻</a></div><div class="bd"><ul><li><a href="#">点赞新农人温暖的伸手</a></li><li><a href="#">在希望的田野上</a></li><li><a href="#">中国天眼又有新发现 已在《自然》杂志发表</a></li><li><a href="#">急!这个领域,缺人!月薪4万元还不好招!啥情况?</a></li><li><a href="#">G9“带货”背后:亏损面持续扩大,竞争环境激烈</a></li><li><a href="#">多地力推二手房“带押过户”,有什么好处?</a></li></ul></div></div>
</body>
</html>

效果:

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

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

相关文章

[云原生] Prometheus自动服务发现部署

一、部署服务发现 1.1 基于文件的服务发现 基于文件的服务发现是仅仅略优于静态配置的服务发现方式&#xff0c;它不依赖于任何平台或第三方服务&#xff0c;因而也是最为简单和通用的实现方式。 Prometheus Server 会定期从文件中加载 Target 信息&#xff0c;文件可使用 YAM…

使用Lua配置NeoVim

使用Lua配置NeoVim 源码地址依次添加插件视频地址 源码地址 Github: my-neovim-lua 依次添加插件 Lazy.nvim: nvim的插件管理器catpuccin: 舒缓柔和的主题插件telescope: 负责查找、过滤、预览treesitter: 基于语法树实现语法高亮neo-tree: 文件导航栏 。。。等待解锁更多 …

Zabbix 监控 tomcat

zabbix-java-gateway服务组件 zabbix监控tomcat需要用到zabbix-java-gateway组件&#xff0c;它充当zabbix服务和java应用程序之间的网关。它允许zabbix服务器用过java网关与java应用程序进行通信&#xff0c;从而监控和收集java应用程序的性能数据。 zabbix-agent服务&#xf…

数据仓库原理(二)

目录 四、数据仓库的概念模型&#xff08;一&#xff09;多维数据模型&#xff08;二&#xff09;维度与粒度 五、数据仓库的逻辑模型&#xff08;一&#xff09;多维模型&#xff08;二&#xff09;星形模型&#xff08;三&#xff09;雪花模型 六、数据仓库的物理模型&#x…

CVPR2023 | 3D Data Augmentation for Driving Scenes on Camera

3D Data Augmentation for Driving Scenes on Camera 摄像机驾驶场景的 3D 数据增强 摘要翻译 驾驶场景极其多样和复杂&#xff0c;仅靠人力不可能收集到所有情况。虽然数据扩增是丰富训练数据的有效技术&#xff0c;但自动驾驶应用中现有的摄像头数据扩增方法仅限于二维图像…

Flutter 多语言自动化本地化生成器

Flutter 多语言自动化本地化生成器 这是一个为Flutter设计的插件&#xff0c;通过从Excel表格提取的CSV文件自动生成Dart本地化文件&#xff0c;以简化应用程序本地化的流程。这个工具通过自动化创建多语言资源文件&#xff0c;简化了开发人员和翻译人员的工作流程。 特点 默…

国外visa卡怎么办理,可充ChatGPTPLUS、Claude、Midjourney

很多小伙都在使用ChatGPT&#xff0c;但是想充值ChatGPTPLUS缺需要国外的visa卡&#xff0c;拿自己的银联卡&#xff0c;尝试了好多次还是不行&#xff0c;其实用一张国外的visa卡几分钟就可以升级好 办理国外visa卡&#xff0c;点击获取 国外的visa卡&#xff0c;具体要看你…

ArcGIS全系列实战视频教程——9个单一课程组合+系列直播回放

《ArcGIS全系列实战视频教程》是由9个单一课程组合合成。组成一条ArcGIS入门实战各项专题深入应用学习全链条&#xff0c;让你学有方向、学有目的&#xff0c;系统全面掌握ArcGIS。 ArcGIS全系列实战视频教程——9个单一课程组合https://edu.csdn.net/combo/detail/2569 《Ar…

SpringBoot之Bean扫描、Bean注册

目录 Bean扫描 Bean注册 Bean lmport 自定义注解 注册条件 Bean扫描 Bean扫描有两种方式 1、标签:<context:component-scan base-package"com.mybatis"/> 2、注解: ComponentScan(basePackages "com.mybatis") springboot启动类注解可以自…

Postman定义全局变量和环境

Postman定义全局变量和环境 一. 问题二. 配置环境解决 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一. 问题 问题前因&#xff1a;在使用postman调用elasticsearch接口的时候&…

目标检测——YOLOv3算法解读

论文&#xff1a;YOLOv3&#xff1a;An Incremental Improvement 作者&#xff1a;Joseph Redmon, Ali Farhadi 链接&#xff1a;https://arxiv.org/abs/1804.02767 代码&#xff1a;http://pjreddie.com/yolo/ YOLO系列其他文章&#xff1a; YOLOv1通俗易懂版解读SSD算法解读…

rust学习(简单链表)

编写一个简单链表&#xff0c;主要遇到的问题就是next指针&#xff08;按照C的写法&#xff09;的数据如何定义。按照网上的建议&#xff0c;一般定义如下&#xff1a; struct Node {pub value:u32,pub next:Option<Rc<RefCell<Node>>>, //1 }1.用Option主要…

pearlCTF——少部分WP

题型新颖&#xff0c;见识了不少 目录 b4by_jailExcel MayhemRick Roll3 spiesjail_timeWiFi brokenSoundScape b4by_jail 一道沙箱逃逸的题 源代码 #!/usr/local/bin/python import time flag"pearl{f4k3_fl4g}" blacklistlist("abcdefghijklmnopqrstuvwxyz…

【计算机图形学】End-to-End Affordance Learning for Robotic Manipulation

对RLAfford&#xff1a;End-to-End Affordance Learning for Robotic Manipulation的简单理解 1. 为什么要做这件事 在交互环境中学习如何操纵3D物体是RL中的挑战性问题。很难去训练出一个能够泛化到具有不同语义类别、不同几何形状和不同功能物体上的策略。 Visual Afforda…

Jmeter(七) - 从入门到精通 - 建立数据库测试计划实战<MySQL数据库>(详解教程)

1.简介 在实际工作中&#xff0c;我们经常会听到数据库的性能和稳定性等等&#xff0c;这些有时候也需要测试工程师去评估和测试&#xff0c;上一篇文章主要介绍了jmeter连接和创建数据库测试计划的过程,在文中通过示例和代码非常详细地介绍给大家&#xff0c;希望对各位小伙伴…

在 Java 中,如何使用文件保存包含文字和数字的 Swing 表格?

要在Java中使用文件保存包含文字和数字的Swing表格&#xff0c;您可以按照以下步骤进行&#xff1a; 1. 首先&#xff0c;您需要创建一个Swing表格&#xff0c;并向其中添加包含文字和数字的数据。 2. 接下来&#xff0c;您可以使用Java中的文件操作类&#xff08;如FileWrit…

<Senior High School Math>: inequality question

( 1 ) . o m i t (1). omit (1).omit ( 2 ) . ( a 2 − b 2 ) ( x 2 a 2 − y 2 b 2 ) ( x 2 y 2 ) − ( a 2 y 2 b 2 b 2 x 2 a 2 ) ≤ x 2 y 2 − 2 x y ( x − y ) 2 (2). (a^2-b^2)(\frac{x^2}{a^2} - \frac{y^2}{b^2})(x^2y^2)-(\frac{a^2y^2}{b^2}\frac{b^2x^2}{a^…

设置jmeter默认语言为中文

问题描述 通过面板上面的选项修改语言&#xff08;如下图&#xff09;&#xff0c;每次运行程序都需要重新再设置一遍&#xff0c;我需要每次打开都是中文界面 解决方案 进入jmeter的文件目录 bin——> jmeter.properties 打开这个文件 搜索Preferred GUI language在下方添…

微信小程序 uniapp奶茶点单系统r4112

系统功能有&#xff1a;信点单小程序分为小程序部分和后台管理两部分&#xff0c;小程序部分的主要功能包含&#xff1a;用户注册登录&#xff0c;查看商品信息&#xff0c;加入购物车&#xff0c;结算并生成订单&#xff0c;订单管理&#xff0c;资讯管理&#xff0c;个人中心…

hive-批量导出表结构,导入表结构

1、导出hive表结构 datastudio可以连接hive库&#xff0c;通过show databases 语句可以显示hive下建了多少数据库名。 使用use 数据库名&#xff0c;进入某个数据库下&#xff0c;通过show tables可显示该数据库下建了多少张表。 将所有库的表数据整理成库名.表名的形式放入…