HTML与CSS学习第12天

HTML学习第12天

在这里插入图片描述

目录

1. 移动端特点

1.1 pc网页与移动端网页有什么不同

  • pc屏幕大，网页固定版心
  • 手机屏幕小，网页宽度多数为100%

1.2 在电脑里面边写代码边调试移动端网页效果

  • 谷歌模拟器

1.3 屏幕尺寸

  • 指的是屏幕对角线的长度，一般用英寸来度量

1.4 分辨率

  1. pc端分辨率

    • 1920*1080
    • 1366*768
    • …

  2. 缩放150%(分辨率会发生改变)

    • (1920/150%)*(1080/150%)

  3. 总结

    • 硬件分辨率（出厂设置）
    • 缩放调节的分辨率（软件设置）

  4. 分辨率分类：

    • 物理分辨率是生产屏幕时就固定的，它是不可被改变的
    • 逻辑分辨率是由软件（驱动）决定的

注意点

  • 制作网页时参考逻辑分辨率

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文件）**

  • 写代码时的注意点

    1. 各个区块先写注释再写代码
    2. 冗余代码的抽取：分析项目中相似的区块，其css样式写在公共css样式中
    3. 标签语义化，多给标签定义见名知义的类目
    4. 标签布局遵循从外往里，从上到下的原则
posted @   凌歆  阅读(32)  评论(0)  编辑  收藏  举报
相关博文：
· HTML与CSS学习第13天
· HTML与CSS学习第7天
· 移动端_Day1
· Web移动端第三天
· 流式布局和Flex 伸缩布局
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示