AI 助理
备案控制台
开发者社区 人工智能 文章 正文

Web进阶：Day3 移动端特点、百分比布局、Flex布局、实战演练

2023-09-13 170
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Web进阶：Day3 移动端特点、百分比布局、Flex布局、实战演练

Web进阶：Day3

Date: January 7, 2023

Summary: 移动端特点、百分比布局、Flex布局、实战演练


移动端特点

移动端和PC端网页不同点

PC端网页和移动端网页的有什么不同？


PC屏幕大，网页固定版心


手机屏幕小， 网页宽度多数为100%


谷歌模拟器

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


谷歌模拟器

89ec64c49cfae656422d6893df459408.png

分辨率

目标：了解屏幕尺寸概念概念


屏幕尺寸


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

54b489349add31f2e1026638234d592b.png



目标：了解移动端主流设备分辨率


PC分辨率


1920 * 1080


1366 * 768


……


缩放150%


（1920/150%）*（1080/150%）

1f7bcfd83f78349e0e1528c65a25dec8.png

总结


硬件分辨率（出厂设置）


缩放调节的分辨率（软件设置）


目标：了解移动端主流设备分辨率


分辨率分类


物理分辨率是生产屏幕时就固定的，它是不可被改变的


逻辑分辨率是由软件（驱动）决定的

0284feccf3ad69efc346d18e15c802a3.png

思考：制作网页参考物理分辨率还是逻辑分辨率？


逻辑分辨率

369ca18acb751c8fb188c1cf30711076.png

7ac6f0e017eace23f20215c4ea4b010a.png

注意：我们参考iPhone6/7/8手机型号，进行书写代码


视口

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页

7a8c54f20679417a6081be5878162be7.png

手机屏幕尺寸都不同， 网页宽度为100%, 网页的宽度和逻辑分辨率尺寸相同。

198f7949c3b7c5b048c4d88b9df41d7b.png

思考：默认情况下，网页的宽度和逻辑分辨率相同吗？


不同， 默认网页宽度是980px。

e65d1fb85b63dbc899fdb4b8ad55c896.png

目标：网页宽度和设备宽度(分辨率)相同。


解决办法：添加视口标签。


视口：显示HTML网页的区域，用来约束HTML尺寸。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport：视口


width=device-width：视口宽度 = 设备宽度


initial-scale=1.0：缩放1倍（不缩放）


二倍图

目标：能够使用像素大厨软件测量二倍图中元素的尺寸

210e2998b30774e71b9c8a9151c6fb29.png

图片分辨率, 为了高分辨率下图片不会模糊失真


现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。


二倍图设计稿尺寸：750px。

98103cbe9d4136e8207d5a969a943469.png

总结：


二倍图的作用：让图片更清晰一些


二倍图在像素大厨中如何操作：设计图中选择2x，再去量尺寸


我们要给基于375px（即逻辑分辨率去书写代码），如果是750px，量出的尺寸都是二倍，到时候网页盛不下


百分比布局

目标： 能够使用百分比布局开发网页


百分比布局， 也叫流式布局


效果： 宽度自适应，高度固定

e50b3419533898a8905c965d5753ab75.png

案例：


Code:

<!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>京东</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .toolbar {
            position: fixed;
            left: 0;
            bottom: 0;
            /* 百分比布局  流式布局 */
            width: 100%;
            height: 50px;
            background-color: pink;
            border-top: 1px solid #ccc;
        }
        .toolbar li img {
            height: 100%;
        }
        .toolbar li {
            float: left;
            width: 20%;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <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/jd.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/car.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/login.png" alt=""></a>
            </li>
        </ul>
    </div>
</body>
</html>

注意：这是较老的解决方案，现在宽高都会自适应


Flex布局

Flex布局模型构成

目标： 能够使用Flex布局模型灵活、快速的开发网页

思考:


多个盒子横向排列使用什么属性？


浮动


设置盒子间的间距使用什么属性？


margin


需要注意什么问题？


浮动的盒子脱标(父级不设置高度会产生这种情况)

983be3fcd48bf2d746d8a173c6670892.png

Flex布局/弹性布局：


是一种浏览器提倡的布局模型


布局网页更简单、灵活


避免浮动脱标的问题


注意1：浮动原本是为了解决文字环绕问题的，而Flex是专门为了解决网页布局问题的


注意2：Flex可能不支持低版本的浏览器


作用：


基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。


Flex布局非常适合结构化布局


设置方式：


父元素添加 display: flex，子元素可以自动的挤压或拉伸


注意：必须是直接父元素，不可以是父元素的父元素


组成部分：


弹性容器：最大的父级


弹性盒子：子集


主轴：横着的轴默认是主轴


侧轴 / 交叉轴：竖着的轴默认是侧轴

eaae0b7a15e440186c5c95be9406f6ad.png

案例：

da87f6d633ace6d297c81a1d476382d1.png

Code:

<!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>体验flex布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            /* 视觉效果: 子级一行排列/水平排列 */
            /* 水平排列: 默认主轴在水平, 弹性盒子都是沿着主轴排列 */
            display: flex;
            height: 200px;
            border: 1px solid #000;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式

思考：网页中，盒子之间有距离吗？


答：有。


在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

2dfd91d94969840a287c402bbd1985db.png

修改主轴对齐方式属性: justify-content

85980210bfd8fb15caa2be8716c6ac7d.png

修改主轴对齐方式属性: justify-content

75a42ddf37ffaf43968dcff343ef4fc8.png

案例：


Code:

<!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>主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            display: flex;
            /* 居中 */
            justify-content: center;
            /* 间距在弹性盒子(子级)之间 */
            justify-content: space-between;
            /* 所有地方的间距都相等 */
            justify-content: space-evenly;
            /* 间距加在子级的两侧 */
            /* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
            justify-content: space-around;
            height: 200px;
            margin: auto;
            border: 1px solid #000;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

侧轴对齐方式

目标：使用align-items调节元素在侧轴的对齐方式

5ef1015225cb73a23252c42e173d9cd5.png

修改侧轴对齐方式属性:

align-items（添加到弹性容器）


align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

aa8d9d4d9ffddde553ffe963bdabc7dc.png

案例：

61041d769ba453378ac5c87626892883.png

Code:

<!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>侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            display: flex;
            /* 居中 */
            /* align-items: center; */
            /* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
            /* align-items: stretch; */
            height: 300px;
            margin: auto;
            border: 1px solid #000;
        }
        .box div {
            /* 没有宽度的话，盒子的宽度为内容的宽度 */
            /* width: 100px; */
            /* height: 100px; */
            background-color: pink;
        }
        /* 单独设置某个弹性盒子的侧轴对齐方式 */
        .box div:nth-child(2) {
            align-self: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1111</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

伸缩比

目标：使用flex属性修改弹性盒子伸缩比


属性


flex : 值;


取值分类


数值(整数)

51de050e461e2b32b0f4ee4e24a3712e.png

注意 : 只占用父盒子剩余尺寸


案例：

4f6a142ce66f2a73f5374d88986ed100.png

Code:

<!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 {
            display: flex;
            height: 300px;
            border: 1px solid #000;
        }
        .box div {
            height: 200px;
            margin: 0 20px;
            background-color: pink;
        }
        .box div:nth-child(1) {
            width: 50px;
        }
        .box div:nth-child(2) {
            /* 占用父级剩余尺寸的份数 */
            flex: 3;
        }
        .box div:nth-child(3) {
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

实战演练-小兔鲜儿 - 确认订单

目标：使用Flex布局模型快速开发网页

75594c7d3faf3f23a5375d6db488a790.png

Code:


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>确认订单</title>
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/orders.css">
</head>
<body>
    <!-- 主体内容: 滑动查看 -->
    <div class="main">
        <!-- 用户信息 -->
        <div class="pannel user_msg">
            <div class="location">
                <i class="iconfont icon-location"></i>
            </div>
            <div class="user">
                <div class="top">
                    <h5>林丽</h5>
                    <p>18500667882</p>
                </div>
                <div class="bottom">北京市  海淀区  中关村软件园   信息科技大厦1号
                    楼410#   </div>
            </div>
            <div class="more">
                <i class="iconfont icon-more"></i>
            </div>
        </div>
        <!-- 用户信息 -->
    </div>
    <!-- 主体内容: 滑动查看 -->
    <!-- 底部支付: 固定定位 -->
    <div class="pay">
        <div class="left">
            合计: <span class="red">￥<i>266.00</i></span>
        </div>
        <div class="right">
            <a href="#">去支付</a>
        </div>
    </div>
    <!-- 底部支付: 固定定位 -->
</body>
</html>

CSS


orders.css

body {
    background-color: #f7f7f8;
}
/* 公共样式 */
.red {
    color: #cf4444;
}
.pannel {
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
}
/* 主体内容 */
.main {
    /* 80px: 为了内容不被底部区域盖住 */
    padding: 12px 11px 80px;
}
/* 用户信息 */
.user_msg {
    display: flex;
    align-items: center;
    padding: 15px 0 15px 11px;
}
.user_msg .location {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-image: linear-gradient(90deg, 
    #6fc2aa 5%, 
    #54b196 100%);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #fff;
}
.user_msg .user {
    flex: 1;
}
.user_msg .user .top {
    display: flex;
}
.user_msg .user .top h5 {
    width: 55px;
    font-size: 15px;
    font-weight: 400;
}
.user_msg .user .top p {
    font-size: 13px;
}
.user_msg .user .bottom {
    margin-top: 5px;
    font-size: 12px;
}
.user_msg .more {
    width: 44px;
    height: 44px;
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
    color: #808080;
}
/* 主体内容 */
/* 底部支付 */
.pay {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    /* 主轴对齐方式 */
    justify-content: space-between;
    /* 侧轴对齐方式 */
    align-items: center;
    width: 100%;
    height: 80px;
    padding: 0 11px;
    /* background-color: pink; */
    border-top: 1px solid #ededed;
}
.pay .left {
    font-size: 12px;
}
.pay .left i {
    font-size: 20px;
}
.pay .right a {
    display: block;
    width: 90px;
    height: 35px;
    background-image: linear-gradient(90deg, 
    #6fc2aa 5%, 
    #54b196 100%);
    border-radius: 3px;
    text-align: center;
    line-height: 35px;
    font-size: 13px;
    color: #fff;
}
/* 底部支付 */

base.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: 16px/1.5 sans-serif;
  color: #333;
  background-color: #fff;
}
li {
  list-style: none;
}
em,
i {
  font-style: normal;
}
a {
  text-decoration: none;
  color: #333;
}
a:hover {
  color: #5eb69c;
}
img {
  width: 100%;
  vertical-align: middle;
}
input {
  padding: 0;
  border: none;
  outline: none;
  color: #333;
}
button {
  cursor: pointer;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}


文章标签：
编解码
容器
前端开发
关键词：
web实战
web布局
web flex
web flex布局
布局flex
CaptainDrake
目录
相关文章
东方睿赢
|
1月前
|
移动开发 开发者 HTML5
构建响应式Web界面：Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及，用户对Web界面的要求越来越高，不仅需要美观，还要具备良好的响应性和兼容性。为了满足这些需求，Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝，它们分别由CSS3和HTML5引入，能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用，并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
东方睿赢
37 3
土木林森
|
25天前
|
设计模式 前端开发 数据库
Python Web开发：Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用，涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容，并展示了实际代码示例，帮助读者快速掌握Django全栈开发的核心技术。
土木林森
127 45
我是快乐的嘟嘟
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
111 34
游客g5tp3lgf24cqc
|
17天前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中，还可以用table元素来实现双行夹批效果，但比flex布局代码更复杂，效果也不见得更理想。
游客g5tp3lgf24cqc
39 10
lqj_本人
|
19天前
|
开发者 UED 容器
鸿蒙next版开发：ArkTS组件通用属性（Flex布局）
在HarmonyOS next中，ArkTS的Flex布局是一种强大且灵活的布局方式，支持水平或垂直方向排列元素，并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap，适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
lqj_本人
52 10
东方睿赢
|
21天前
|
前端开发 API 开发者
Python Web开发者必看！AJAX、Fetch API实战技巧，让前后端交互如丝般顺滑！
在Web开发中，前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例，详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理，全面展示了这两种技术的应用技巧，帮助Python Web开发者提升项目质量和开发效率。
东方睿赢
37 1
土木林森
|
23天前
|
SQL 负载均衡 安全
安全至上：Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代，Web应用防火墙（WAF）成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件，如Envoy和Coraza，并提供实战指南，涵盖动态加载规则、集成威胁情报、高可用性配置等内容，帮助开发者和安全专家构建更安全的Web环境。
土木林森
41 1
土木林森
|
26天前
|
安全 数据库 开发者
Python Web开发：Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发，包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤，并通过示例代码展示了具体实现过程。
土木林森
36 2
dufadayang
|
1月前
|
容器
在 Flex 布局中，如何设置元素在侧轴上的初始对齐方式？
【10月更文挑战第22天】同时，还可以进一步探索其他 Flex 布局相关的属性和技巧，以更好地掌握 Flex 布局的强大功能，创造出更具创意和适应性的页面布局。
dufadayang
28 2
邹荣乐
|
2月前
|
移动开发 前端开发 JavaScript
前端开发实战：利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战：利用Web Speech API之speechSynthesis实现文字转语音功能
邹荣乐
184 0

热门文章

最新文章

  • 1
    测试Flask+PYTHON的WEB框架
  • 2
    web QQ页面内发现一首诗
  • 3
    Creating top-down Web services using MyEclipse
  • 4
    WASC Announcement: Announcing the Web Application Security Scanner Evaluation Criteria v1
  • 5
    ASP.NET2.0里的web.config配置接口API(转)
  • 6
    Caddy Web服务器深度解析与对比：Caddy vs. Nginx vs. Apache
  • 7
    使用Axis2来构建Web Service客户端
  • 8
    《Flash建站技术》系列3-步入web殿堂
  • 9
    安全的Web主机iptables防火墙脚本
  • 10
    centos curl web站点监控实践
  • 1
    从理论到实践：全面剖析Python Web应用中的WebSocket实时通信机制
    308
  • 2
    带你读《阿里云产品五月刊》——十九、Web应用防火墙 新功能/规格
    59
  • 3
    不可错过的 Web 开发工具
    38
  • 4
    Python Web应用中的WebSocket实战：前后端分离时代的实时数据交换
    318
  • 5
    WebSocket在Python Web开发中的革新应用：解锁实时通信的新可能
    49
  • 6
    深度解析：Python Web前后端分离架构中WebSocket的选型与实现策略
    105
  • 7
    Python Web实时通信新纪元：基于WebSocket的前后端分离技术探索
    57
  • 8
    安全风险在WEB应用中的排名变化
    186
  • 9
    PHP 8的新特性及其对现代Web开发的影响
    29
  • 10
    实战指南：用Python协程与异步函数优化高性能Web应用
    86

    • 相关课程

    更多
  • Python Web开发基础
  • Java Web开发系列课程 - Spring框架入门
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 1分钟SAE部署Web在线游戏
  • 前端开发基础3：CSS3常见显示属性
  • 云上Web及FTP
  • WEB网页编程实战
    • 下一篇
    无影云桌面