六.基础班Day-06
- 使用结构伪类选择器在HTML中选择元素
- 标准流元素的布局特点(了解)
- 浮动元素的特点
- 完成小米模块布局案例
- 说出清楚浮动的目的+使用修改浮动的方法
6.1结构伪类选择器
6.1.1:作用与优势
- 作用:根据元素在HTML中的结构关系查找元素
- 优势:减少对于HTML中类的依赖,保持代码整洁性
- 场景:查找某父级选择器中的子元素
6.1.2:选择器
6.1.3:拓展(找到第一个a标签)
<style>
/* 找到第一个li 里面的 第三个a 设置文字颜色是红色 */
li:first-child a:nth-child(3) {
color: red;
}
</style>
<ul>
<li>
<a href="#">这是第1个li里面的a1</a>
<a href="#">这是第1个li里面的a2</a>
<!-- 选中第三个a -->
<a href="#">这是第1个li里面的a3</a>
<a href="#">这是第1个li里面的a4</a>
<a href="#">这是第1个li里面的a5</a>
</li>
</ul>
6.1.3-1:注意点
6.1.4:(nth-of-type)结构伪类选择器
6.2伪元素
6.2.1:作用
能够使用伪元素在网页中创建内容.
一般页面中的非主体内容可以使用伪元素
6.2.2:种类
- ::before 在父元素的最前面添加一个伪元素
- ::after 在父元素内容的最后添加一个伪元素
6.2.3:注意
- 必须设置content属性才能生效
- 伪元素默认是行内元素
6.3:标准流概念
标准流:又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则
常见标准流排版规则:
1.块级元素:从上往下,垂直布局,独占一行
2. 行内元素 或 行内块元素:从左往右,水平布局,空间不够自动折行
6.4:浮动
6.4.1:作用
- 早期被用于图文环绕
- 现在主要用作网页布局(让垂直布局的盒子变成水平布局)
6.4.2:代码
属性名:float
属性名 | 效果 |
---|---|
left | 左浮动 |
right | 右浮动 |
七.基础班Day-07
7.1:网页通用代码(CSS)
* {
margin: 0;
padding: 0;
/* 內减模式 */
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
八.基础班Day-08
- 定位的常见应用场景
- 不同定位方式的特点
- 使用子绝父相完成元素水平垂直案例
- 写出三种常见的光标类型
- 使用圆角边框属性完成正圆和胶囊按钮效果
- 说出display和visibility让元素本身隐藏的区别
8.1定位
8.1.1:网页常见布局方式
-
标准流
块级元素独占一行—垂直布局
行内元素/行内块元素一行显示多个—水平布局
-
浮动
让原本垂直布局的块级元素变成水平布局
-
定位
让元素自由的摆放在网页的任意位置
用于盒子之间的层叠情况
8.1.2:定位常见应用场景
- 解决盒子与盒子之间的层叠问题
- 让盒子始终固定在屏幕中的某个位置
8.1.3属性
1.设置定位的方式:position
定位方式 | 属性值 | 相对于谁移动 | 是否占位置 |
---|---|---|---|
静态 | static | 不能通过方位属性移动 | 占位置 |
相对 | relative | 相对于自己原来的位置 | 占位置 |
绝对 | absolute | 相对于最近的且有定位的祖元素移动 | 不占位置(脱标) |
固定 | fixed | 相对于浏览器可视区域 | 不占位置(脱标) |
2.设置偏移值:水平+垂直就近各取一个
属性名 | 属性值 | |
---|---|---|
left | 数字+px | |
right | 数字+px | |
top | 数字+px | |
bottom | 数字+px |
8.1.3-1:静态定位
- 代码:position:static;
- 静态定位——默认值(标准流)
8.1.3-2:相对定位
-
代码:position:relative;
-
相对于自己之前的位置进行移动
特点:
- 需要配合方位属性进行移动
- 相对于自己原来位置进行移动
- 在页面中占位置——没有脱标
8.1.3-3:绝对定位
-
代码:position:absolute;
-
相对于非静态定位的父元素进行定位移动
特点
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置——已经脱标
-
绝对定位相对于谁移动?
- 祖先元素中没有定位——默认相对浏览器进行移动
- 祖先元素中有定位——相对于 最近的 有定位 祖先元素进行移动
8.1.3-4:子绝父相
- 让子元素相对于父元素进行自由移动
- 含义
- 子元素:绝对定位
- 父元素:相对定位
- 好处:父元素是相对定位,对网页布局影响小
特殊情况:子绝父绝
- 父元素已经定位且已经满足需求,如果盲目修改父元素定位方式,可能会影响之前写好的布局
8.1.3-4.1:(案例)
1.子绝父相水平垂直居中案例——解决方法
<style>
.box {
/* 1. 绝对定位的盒子不能使用左右margin auto居中 */
position: absolute;
/* margin: 0 auto; */
/* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */
left: 50%;
/* 把盒子向左侧移动: 自己宽度的一半 */
/* margin-left: -150px; */
top: 50%;
/* margin-top: -150px; */
/* 位移: 自己宽度高度的一半 */
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background-color: pink;
}
</style>
使用子绝父相水平垂直居中的操作是什么?
- 子绝父相
- left:50%;
- top:50%;
- transform:translate(-50%,-50%);
2.导航二维码居中定位
CSS样式:
<style>
* {
margin: 0;
padding: 0;
}
/* 因为有通栏:占满一行的边框,所以需要有一个通栏:占满一行的盒子 */
.nav {
height: 40px;
border-bottom: 1px solid #ccc;
}
/* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部,所以设置ul为宽度固定并且水平居中的效果(后面项目中所用到的版心) */
ul {
list-style: none;
width: 1200px;
margin: 0 auto;
}
ul li {
float: left;
width: 20%;
height: 40px;
border-right: 1px solid #ccc;
/* 自动内减 */
box-sizing: border-box;
text-align: center;
line-height: 40px;
}
ul .last {
border-right: none;
}
ul li a {
/* a标签默认是行内元素,宽高由内容撑开,并且无法设置宽高,此时默认情况用户只能点击文字区域才能调整 */
/* 如果把a标签转换成块级元素,此时可以设置宽高,会让a标签范围更大,用户可以点击调整的区域也越大 */
display: block;
/* 宽度不设置块元素会默认占满一行 */
height: 40px;
text-decoration: none;
color: #000;
}
ul li .app {
position: relative;
}
.code {
/* 绝对位置,脱离标准流,不占位 */
position: absolute;
left: 50%;
top: 41px;
transform: translate(-50%);
}
</style>
HTML代码
<body>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">我要投资</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<!-- 因为用户鼠标放在二维码图片上也能跳转,所以证明img也是在a的范围内,因此把img写在a标签的内部 -->
<li>
<a href="#" class="app">手机微金所
<img src="./images/code.jpg" alt="" class="code"></a>
</li>
<li class="last"><a href="#">个人中心</a></li>
</ul>
</div>
</body>
3.底部半透明遮罩效果
CSS代码:
8.1.3-5:固定定位
-
代码:position:fixed;
特点:
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置——已经脱标
应用场景:
- 让盒子固定在屏幕中的某个地方
8.2元素层级问题
8.2.1:层级关系
-
不同布局方式元素的层级关系:
- 标准流<浮动<定位
-
不同定位之间的层级关系:
- 相对、绝对、固定默认层级相同
- 写在下面的原色层级更高,会覆盖上面元素
8.2.2:更改定位元素的层级
- 改变定位元素的层级
- 属性名:z-index
- 属性值:数字(数字越大,层级越高)
8.2装饰
8.2.1:垂直对齐方式
行内/行内块元素垂直对齐的属性:vertical-align
属性值 | 效果 |
---|---|
baseline | 默认、基线对齐 |
top | 顶部对齐 |
middle | 中部对齐 |
bottom | 底部对齐 |
- 项目中vertical-align可以解决的问题
- 文本框和表单按钮无法对齐问题
- input和img无法对齐问题
- div中的文本框,文本框无法贴顶问题
- div不设高度由img标签撑开,此时img标签下面会存在额外间隙问题
- 使用line-height让img标签垂直居中问题
8.2.2:光标类型
设置鼠标光标在元素上的显示的样式:cursor
属性值 | 效果 |
---|---|
default | 默认值,通常是箭头 |
pointer | 小手效果,提示用户可以点击 |
text | 工字型,提示用户可以选择文字 |
move | 十字光标,提示用户可以移动 |
8.2.3:表框圆角
属性名:border-radius
常见取值:数字+px、百分比
案例:画一个正圆/按钮胶囊
8.2.4:overflow溢出部分显示效果
属性名:overflow
属性值 | 效果 |
---|---|
visible | 默认值,溢出部分可见 |
hidden | 溢出部分隐藏 |
scroll | 无论是否溢出,都显示滚动条 |
auto | 根据是否溢出,自动显示或隐藏滚动条 |
8.2.5:元素隐藏
——让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏
属性:
- visibility:hidden —— 隐藏元素本身,并且在网页中占位
- display:none —— 隐藏元素本身,并且在网页中不占位
设置元素本身显示与隐藏的常用代码是什么?
• 元素隐藏 → display:none
• 元素显示 → display:block
8.2.6:拓展
CSS代码:
<style>
div {
/* width: 100px;
height: 100px; */
width: 0;
height: 0;
/* background-color: pink; */
/* transparent: 透明 */
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid orange;
}
/*
1. 书写一个盒子
2. 盒子添加四个方向的border, 颜色设置不同
3. 保留其中一个方向的border, 其他方向颜色是transparent
*/
</style>
8.3选择器拓展
8.3.1:链接伪类选择器
场景:选中超链接的不同状态
选择器语法 | 功能 |
---|---|
a:link{} | 选中a链接 未访问过的状态 |
a:visited{} | 选中a链接 访问之后的状态 |
a:hover{} | 选中 鼠标悬停的状态 |
a:active{} | 选中 鼠标按下的状态 |
注意点:如果需要同时实现以上四种伪类状态效果需要按照LVHA顺序书写
8.3.2:焦点伪类选择器
场景:用于选中元素获取焦点时状态,常用表单控件::focus { }
8.3.3:属性选择器
通过元素上的HTML属性来选择元素,常用于选择input标签
选择器 | 功能 |
---|---|
E[attr] | 选择具有attr属性的E元素 |
E[attr=“val”] | 选择具有attr属性并且属性值等于val的E元素 |
案例:选中页面中所有的文本框,使用属性选择器如何实现呢?
- input[type=“text”] { }
九.基础班Day-09
-
能够在网页中使用精灵图
-
能够使用背景大小属性,设置背景图片大小
-
能够认识CSS书写顺序
-
完成项目结构搭建和基础公共样式
9 .1项目样式
9.1.1:精灵图概念:
- 项目中将多张小图片,合并成一张大图片。称之为精灵图
- 减少服务器发送次数,减轻服务器的压力,提高页面加载速度
9.1.1-2:精灵图使用步骤:
- 常见一个盒子
- 通过PxCook量取小图片大小,将小图片的宽高设置给盒子
- 将精灵图设置为盒子的背景图片
- 通过PxCook测量小图片左上角坐标
- 分别取负值设置盒子的background-position:x y
9.1.2:背景图片大小
- 语法:background-size:宽度 高度;
- 取值:
9.1.3:background连写拓展
9.1.4:文字阴影
- 给文字添加阴影效果
- 属性名:text-shadow
- 取值:
9.1.5:盒子阴影
- 给盒子添加阴影效果,吸引用户注意
- 属性名:box-shadow
- 取值:
9.1.6:过渡
-
让元素的样式慢慢的改变,配合hover使用,增强网页交互体验
-
属性名:transition
-
常见取值:
-
参数 取值 过渡的属性 all:所有能过渡的属性都过渡,具体属性名如:width:只有width有过渡 过渡的时长 数字+s(秒) -
过渡属性给需要过渡的元素本身加