Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
伪 | 类 |
---|---|
表示假的 | class 级权重 |
伪类的类型 | 作用 |
---|---|
结构伪类 | 根据位置获取元素 |
状态伪类 | 根据状态获取元素 |
结构伪类语法 | 代码 | 用法 |
---|---|---|
取指定位置的元素 | :nth-of-type() |
直接在“()”内填写要取第几个元素 |
倒着取指定位置的元素 | :nth-last-of-type() |
直接在“()”内填写要取倒数第几个元素 |
取第一个 | first-of-type |
取第一个元素 |
取倒数第一个 | last-of-type |
取倒数第一个元素 |
伪类选择器的参数
nth-of-type(an+b)
参数 | 规则 |
---|---|
a 系数 | [0,1,2,3…] |
n 权数 | [0,1,2,3…] |
b 偏移量 | 从 0 开始 |
注:计算出来的索引必须是有效,从 1 开始
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>伪类选择器匹配单个元素(a=0)</title>
<style>
/* 注:因为我们要取单个元素,所以a=0,n为从0开始自动计算,b为我们要找的元素的偏移量。
我们要取的是ul下的第三个li所以偏移量b=3。
匹配过程:a=0,n=【0,1,2,3...直到索引结束】,b=3
a*n=0,b=3,an+b=3,因为0乘任何数都等一零,所以当a=0时只会索引一次 */
.list > li:nth-of-type(0n + 3) {
background-color: coral;
}
</style>
</head>
<body>
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>伪类选择器匹配单个元素(a=0)</title>
<style>
/* 注:因为我们要取多个元素,所以a=1,n为从0开始自动计算,b为我们要找的元素的偏移量。
我们要取的是ul下的第三个包括下面的所有li元素,所以偏移量b=3。
匹配过程:a=1,n=【0,1,2,3...直到索引结束】,b=3
第一遍索引:1*0+3=0+3=3
第二遍索引:1*1+3=1+3=4
第三遍索引:1*2+3=2+3=5
第四遍索引:1*3+3=3+3=6
第五遍索引:1*4+3=4+3=7
第六遍索引:1*5+3=5+3=8
第七遍索引:1*6+3=6+3=9!索引到这里索引的到第九个元素,代码里没有第九个li,所以索引超纲自动停止,索引结束 */
.list > li:nth-of-type(1n + 3) {
background-color: coral;
}
</style>
</head>
<body>
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</body>
</html>
如果我们想要向上取参数参数为:(-1n+b)
如果我们要取偶数参数为:(2n),但是这里我们有更简洁的方式,参数只需要填 even;
如果我们要取奇数参数为:(2n+1),但是这里我们有更简洁的方式,参数只需要填 odd;
代码 | 作用 |
---|---|
disabled | 禁用状态 |
enabled | 启用状态 |
checked | 选中状态 |
hover | 鼠标悬停状态 |
focus | 获取焦点状态 |
以下时代码示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>状态选择器</title>
<style>
/* 所有开放的input的属性 */
input:enabled {
/* 背景色:绿 */
background-color: green;
border: 3px dotted green;
}
/* 所有未开放的input的属性 */
input:disabled {
/* 背景色:红 */
background-color: red;
/* 边框尺寸3px 虚线 绿色 */
border: 3px dotted green;
}
/* 当男被选中后后面的label内的内容变为蓝色 */
#male:checked + * {
/* 文本色:蓝 */
color: blue;
}
/* 当女被选中后后面label内的内容变为红色 */
#female:checked + * {
/* 文本色:红 */
color: red;
}
/* input获取焦点时的样式 */
input:focus {
/* 背景色:royalblue */
background-color: royalblue;
}
button {
/* 高100 */
width: 100px;
/* 宽30 */
height: 30px;
/* 边框:无 */
border: none;
/* 轮廓线:无 */
outline: none;
/* 背景色:红 */
background-color: red;
/* 文本色:白 */
color: white;
}
/* 鼠标悬停hover样式 */
button:hover {
background-color: seagreen;
color: black;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<label for="username">username:</label>
<input type="text" name="username" id="username" value="admin" disabled />
</div>
<div>
<label for="">password:</label>
<input type="password" name="password" id="password" />
</div>
<div>
<input type="radio" name="gender" id="male" value="0" />
<label for="male">男</label>
<input type="radio" name="gender" id="female" value="1" />
<label for="female">女</label>
<p><button type="submit">提交</button></p>
</div>
</body>
</html>
如何引用图标库?
1.使用 link 标签链接到图标库<link rel="stylesheet" href="./图标库文件地址/" />
2.使用图标库(class 里填写相对应的图标名称即可)<span class="iconfont WIFI icon-WIFI"></span>
完整引入演示代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入字体图标库css文件 -->
<link rel="stylesheet" href="./font_icon/iconfont.css" />
<title>引入字体图标库</title>
<style>
/* 设置字体图标的样式:大小,颜色; */
div.iconfont.qrcode.icon-qrcode {
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<!-- 使用字体图标 -->
<div class="iconfont qrcode icon-qrcode"></div>
</body>
</html>
序号 | 代码 | 作用 | 备注 |
---|---|---|---|
1 | width |
宽 | |
2 | height |
高 | |
3 | border |
边框 | 可视化属性,有多种样式,solid 实线,dashed 虚线 |
4 | pandding |
内边距 | |
5 | margin |
外边距 |
1.通常情况下我们给一个元素边框和背景色,背景色会融入到边框内,这时我们只需要给该元素一个样式就可以了。背景色裁切:background-clip: content-box;
这个代码的意思是内容在盒子中心。
2.通常我们在布局中给的width
和height
都是希望这是盒子的大小,但是通常会因为边框,内边距和外边距等等的因素出现撑大了盒子的宽和高,所以这里我们要用到一个代码 box-sizing:border-box
,此时的width
和height
设置的宽高就是我们盒子计算的宽高,不会因为盒子的其他元素改变盒子的尺寸。
类型 | 语法 | 解释 |
---|---|---|
单值语法 | padding:20px |
上下左右四个值都是 20px |
双值语法 | padding:20px 30px |
左右 20px 上下 30px |
三值语法 | padding:20px 30px 20px |
左 20px 上下 30px 右 20px |
四值语法 | padding:30px 20px 30px 20px |
顺时针语法:上 30px 右 20px 下 30px 左 20px |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>盒模型</title>
<style>
/* 初始化所有元素的内边距和外边距,并且设置盒子的大小不受内外边距和边框的影响,只由width和height决定大小 */
* {
/* 内边距padding */
padding: 0px;
/* 外边距margin */
margin: 0px;
/* 设置元素大小只能由width和height决定 */
box-sizing: border-box;
/* 边框=1px 实现边框 红色 */
outline: 1px solid red;
}
/* 盒模型常用属性
1.width
2.height
3.border
4.padding
5.margin */
/* 这里是class=box的div标签的样式声明 */
.box {
/* 宽:200px */
width: 200px;
/* 高:200px */
height: 200px;
/* 边框:10px 虚线 红色(已被下方的边框声明覆盖) */
border: 10px dashed red;
/* 背景色:黑色 */
background-color: black;
/* 背景裁切:在盒子内 */
background-clip: content-box;
/* 内边距:20px(因为.box的权重为(0,1,0) 所以覆盖了全局设置的padding) */
padding: 20px;
/* 外边距:20px */
margin: 20px-;
/* 这里我们在全局设置中设置了box-sizing:border-box,所以元素的宽度为左右border(边框的大小)+左右padding(内边距的大小)+width=10(左边框)+20(左padding)+140(元素内容部分的宽度)+10(右边框)+20(右padding)=200 */
/* 元素的宽度为上下border(边框的大小)+上下padding(内边距的大小)+height=20(上边框)+20(上padding)+120(元素内容部分的高度)+20(下边框)+20(下padding)=200 */
/* 设置元素大小只能由width和height决定(由于上方全局设置已经设置过了,这里省略也可以) */
box-sizing: border-box;
/* 为了记忆padding的四值语法,我们这里的边框单独设置也采用了上右下左的顺序 */
/* 单独设置边框上方:20px 实线 红色 */
border-top: 20px solid red;
/* 单独设置边框右方:10px 虚线 蓝色 */
border-right: 10px dashed blue;
/* 单独设置边框下方:20px 实线 红色*/
border-bottom: 20px solid red;
/* 单独设置边框左方:10px 虚线 蓝色 */
border-left: 10px dashed blue;
}
/* 这里是class=box1的div标签的样式声明 */
/* 这个样式声明主要是为了测试上面的全局声明,看下是否生效,元素的大小是否只由width和height来决定而不是会收到padding(内边距)和margin(外边距)的影响 */
.box1 {
/* 宽:300px */
width: 300px;
/* 高:300px */
height: 300px;
/* 内边距:100px */
padding: 100px-;
/* 外边距:100px */
margin: 100px-;
}
</style>
</head>
<body>
<!-- 这里是class=box的div标签 -->
<div class="box"></div>
<!-- 这里是class=box1的div标签 -->
<div class="box1">aaaaa</div>
</body>
</html>
序号 | 单位类型 | 符号 |
---|---|---|
1 | 绝对单位 | px(像素): 1lin(英寸)=96px |
2 | 相对单位 | em:永远和当前或父级的 font-size(字号)进行绑定 |
3 | 相对单位 | rem:永远和 html(根元素)中的 font-size 进行绑定 |
4 | 相对单位 | vw:常用在响应式布局(多在移动端),指把视口宽度分为 100 份,1vw=1/100 |
5 | 相对单位 | vh:常用在响应式布局(多在移动端),指把视口高度分为 100 份,1vh=1/100 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>常用单位</title>
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
html {
/* 这里我们给html(根元素)设置一个统一的字号:10px */
font-size: 10px;
}
.box {
/* 这里我们给div.box一个单独的字号 */
font-size: 20px;
/* 宽=5em=5*20px=100px */
width: 5em;
/* 高=10rem=10*10px=100px */
height: 10rem;
border: 1px solid red;
background-color: black;
background-clip: content-box;
}
.box {
/* 这里我们把视窗宽度分为100份,100vw=100%宽度 */
width: 100vw;
/* 这里我们把视窗高度分为100份,10vh=10%高度 */
height: 10vh;
}
</style>
</head>
<body>
<div class="box">aaaaa</div>
</body>
</html>