HTML学习第12天
目录
1. 移动端特点
1.1 pc网页与移动端网页有什么不同
- pc屏幕大，网页固定版心
- 手机屏幕小，网页宽度多数为100%
1.2 在电脑里面边写代码边调试移动端网页效果
- 谷歌模拟器
1.3 屏幕尺寸
- 指的是屏幕对角线的长度，一般用英寸来度量
1.4 分辨率
-
pc端分辨率
- 1920*1080
- 1366*768
- …
-
缩放150%(分辨率会发生改变)
- (1920/150%)*(1080/150%)
-
总结
- 硬件分辨率（出厂设置）
- 缩放调节的分辨率（软件设置）
-
分辨率分类：
- 物理分辨率是生产屏幕时就固定的，它是不可被改变的
- 逻辑分辨率是由软件（驱动）决定的
注意点
- 制作网页时参考逻辑分辨率
1.5 移动端主流设备分辨率
1.6 视口
-
场景：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
-
原因:不同的移动设备宽度不同，网页宽度与逻辑分辨率宽度不同
-
代码
-
<!-- 视口标签 --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
属性名 说明 viewport 视口 width=device-width 视口宽度=设备宽度 inital-scale=1.0 缩放1倍，不缩放 -
1.7 二倍图
- 场景：为了在高分辨率下，图片不会模糊失真
- 例子：二倍图设计稿750，用像素大厨测量
2. 百分比布局
- 百分比布局：又称流式布局
- 效果：宽度自适应（百分比），高度固定
案例：移动端京东工具栏
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.toolbar ul{
list-style: none;
}
.toolbar ul li a{
text-decoration: none;
}
.toolbar{
width: 100%;
height: 50px;
position: fixed;
background-color: pink;
left: 0;
bottom: 0;
}
.toolbar li{
width: 20%;
height: 50px;
float: left;
}
.toolbar li img{
height: 50px;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li><a href="#"><img src="./images/jd.png" alt=""></a></li>
<li><a href="#"><img src="./images/index.png" alt=""></a></li>
<li><a href="#"><img src="./images/classify.png" alt=""></a></li>
<li><a href="#"><img src="./images/login.png" alt=""></a></li>
<li><a href="#"><img src="./images/car.png" alt=""></a></li>
</ul>
</div>
</body>
</html>
- 效果图
3. flex布局
- 场景：使用flex布局模型灵活、快速的开发网页
3.1 flex布局简介
- 是一种浏览器提倡的布局模型
- 网页布局更简单、灵活
- 避免浮动脱标的问题
3.2 flex布局模型
- 作用
- 基于flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
- flex布局非常适合结构化布局
- 设置方式
- 父元素（必须是父亲）添加display:flex,子元素（儿子）可以自动的挤压或拉伸（变得可以设置宽高）
- 组成部分
- 弹性（flex）容器
- 弹性（flex）盒子
- 主轴
- 侧轴/交叉轴
- 图解
注意点
-
主轴和侧轴方向是可以改变的，图示只是默认方向
-
默认主轴在水平方向，弹性盒子沿着主轴方向排列
示例
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.bigbox{
width: 800px;
border: 1px solid #000;
/* flex布局 */
/* 主轴默认为水平方向，弹性盒子默认沿着主轴方向排列 */
display: flex;
/*justify-content: space-between;*/
}
.bigbox div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="bigbox">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
- 效果图
3.3 主轴对齐方式
-
属性名：justify-content
-
添加给弹性容器（父亲）
属性值 作用 flex-start 默认值，起点开始依次排序 flex-end 终点开始依次排序 center 沿主轴居中排列 space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧，每个盒子两侧都有间距，会出现两个盒子之间的间距为盒子与容器之间间距的两倍 space-between 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间 space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等,间距盒子与盒子，盒子与容器之间间距处处相等 -
代码演示
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.bigbox{
width: 800px;
border: 1px solid #000;
/* flex布局 */
/* 主轴默认为水平方向，弹性盒子默认沿着主轴方向排列 */
display: flex;
/* 主轴对齐方式 */
/* 1.默认值， 弹性盒子从起点开始排列*/
/* justify-content: flex-start; */
/* 2. flex-end 从终点开始排列*/
/* justify-content: flex-end; */
/* 3.center, 沿主轴居中排列*/
/* justify-content: center; */
/* 4.space-around ，弹性盒子沿主轴均匀排列，空白间距均分在盒子两侧*/
/* justify-content: space-around; */
/* 5.space-between 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间*/
/* justify-content: space-between; */
/* 6.space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间的间距相等 */
justify-content: space-evenly;
}
.bigbox div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="bigbox">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
-
默认值效果图
-
flex-end效果图
- center效果图
- space-around效果图
- space-between效果图
- space-evenly效果图
3.4 侧轴对齐方式
-
属性名：align-items(添加到父亲，弹性容器)
-
属性名：align-self：控制某个弹性盒子在侧轴的对齐方式（添加到儿子，弹性盒子）
-
属性值
属性值 作用 flex-start 默认值，起点开始依次排列 flex-end 终点开始依次排列 center 沿侧轴居中排列 stretch 默认值，弹性盒子沿着侧轴方向拉伸至铺满容器
示例:父亲（弹性容器）添加align-items
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.box{
width: 900px;
/* background-color: pink; */
border: 1px solid #000;
/* 弹性容器 */
display: flex;
height: 500px;
/* 侧轴对齐方式 */
/* 1.居中 center */
/* align-items: center; */
/* 2.拉伸 ,当子盒子没有设置高度时才能看到效果,拉伸宽度铺满弹性容器*/
/* align-items: stretch; */
/* 3.终点开始排列 */
/* align-items: flex-end; */
/* 默认值,起点开始排序 */
align-items: flex-start;
}
.box div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
- center效果图
- stretch效果图
- flex-end效果图
- flex-start效果图
示例：儿子（弹性盒子）添加align-self
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.box{
width: 900px;
/* background-color: pink; */
border: 1px solid #000;
/* 弹性容器 */
display: flex;
height: 500px;
/* 侧轴对齐方式 */
/* 1.居中 center */
/* align-items: center; */
/* 2.拉伸 ,当子盒子没有设置高度时才能看到效果,拉伸宽度铺满弹性容器*/
/* align-items: stretch; */
/* 3.终点开始排列 */
/* align-items: flex-end; */
/* 默认值,起点开始排序 */
/* align-items: flex-start; */
}
.box div{
width: 200px;
height: 200px;
background-color: pink;
}
.box div:nth-child(2){
/* align-self实现弹性盒子(儿子)的侧轴对齐方式 */
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
- center效果图
弹性盒子的特点
- 如果弹性盒子不给高度，设置了宽度，盒子高度会默认拉伸到父元素高度
- 如果弹性盒子没有高度也没有宽度，则宽度由弹性盒子的内容撑开，高度如果弹性盒子本身没有设置侧轴对齐方式，则被拉伸至父盒子高度，如果设置了居中或其他侧轴对齐方式，高度由内容撑开
示例：无高度,盒子侧轴对齐方式默认（不添加）
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.box{
width: 900px;
/* background-color: pink; */
border: 1px solid #000;
/* 弹性容器 */
display: flex;
height: 500px;
/* 侧轴对齐方式 */
/* 1.居中 center */
/* align-items: center; */
/* 2.拉伸 ,当子盒子没有设置高度时才能看到效果,拉伸宽度铺满弹性容器*/
/* align-items: stretch; */
/* 3.终点开始排列 */
/* align-items: flex-end; */
/* 默认值,起点开始排序 */
/* align-items: flex-start; */
}
.box div{
width: 200px;
/* height: 200px; */
background-color: pink;
}
/* .box div:nth-child(2){
align-self实现弹性盒子(儿子)的侧轴对齐方式
align-self: center;
} */
</style>
</head>
<body>
<div class="box">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
- 效果图
####示例：无高度,盒子侧轴对齐方式不为默认
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.box{
width: 900px;
/* background-color: pink; */
border: 1px solid #000;
/* 弹性容器 */
display: flex;
height: 500px;
/* 侧轴对齐方式 */
/* 1.居中 center */
/* align-items: center; */
/* 2.拉伸 ,当子盒子没有设置高度时才能看到效果,拉伸宽度铺满弹性容器*/
/* align-items: stretch; */
/* 3.终点开始排列 */
/* align-items: flex-end; */
/* 默认值,起点开始排序 */
/* align-items: flex-start; */
}
.box div{
width: 200px;
/* height: 200px; */
background-color: pink;
}
.box div:nth-child(2){
/* align-self实现弹性盒子(儿子)的侧轴对齐方式 */
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
- 效果图
示例：无高度，无宽度
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.box{
width: 900px;
/* background-color: pink; */
border: 1px solid #000;
/* 弹性容器 */
display: flex;
height: 500px;
/* 侧轴对齐方式 */
/* 1.居中 center */
/* align-items: center; */
/* 2.拉伸 ,当子盒子没有设置高度时才能看到效果,拉伸宽度铺满弹性容器*/
/* align-items: stretch; */
/* 3.终点开始排列 */
/* align-items: flex-end; */
/* 默认值,起点开始排序 */
/* align-items: flex-start; */
}
.box div{
/* width: 200px; */
/* height: 200px; */
background-color: pink;
}
.box div:nth-child(2){
/* align-self实现弹性盒子(儿子)的侧轴对齐方式 */
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
- 效果图
3.5 伸缩比
-
属性名：flex（在弹性盒子中添加）
-
属性值：数字（整数）
-
flex代表弹性盒子（儿子）占有父亲（弹性容器）剩余尺寸的份数（一般指宽度）
示例
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.father{
width: 900px;
height: 300px;
border: 1px solid #000;
/* 弹性容器 */
display: flex;
/* justify-content: space-around; */
align-items: center;
}
.father div{
width: 50px;
background-color: pink;
margin: 0 10px;
}
.father div:nth-child(1){
/* 占用父亲剩余宽度的1份,后面的盒子都写了相同属性,也就是三分之一
*/
flex: 1;
}
.father div:nth-child(2){
flex: 1;
}
.father div:nth-child(3){
flex: 1;
}
</style>
</head>
<body>
<div class="father">
<div>11</div>
<div>22</div>
<div>33</div>
</div>
</body>
</html>
- 效果图
小兔鲜-确认订单案例（移动端）
注意点
-
写项目前先做好准备工作**（项目文件夹，css文件夹，uploads文件夹，images文件夹，lib外部依赖，项目的html文件）**
-
写代码时的注意点
- 各个区块先写注释再写代码
- 冗余代码的抽取：分析项目中相似的区块，其css样式写在公共css样式中
- 标签语义化，多给标签定义见名知义的类目
- 标签布局遵循从外往里，从上到下的原则
2786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
