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样式中
- 标签语义化,多给标签定义见名知义的类目
- 标签布局遵循从外往里,从上到下的原则