当前位置：首页 > news >正文

移动WEB开发二、流式布局

news 2026/5/29 5:21:43

文章地址

个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

Gitee：https://gitee.com/bluecusliyou/TechLearn
Github：https://github.com/bluecusliyou/TechLearn

移动WEB开发二、流式布局

1、流式布局

流式布局，就是百分比布局，也称非固定像素布局，是移动web开发使用的比较常见的布局方式。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
max-width 最大宽度（max-height 最大高度）
min-width 最小宽度（min-height 最小高度）

案例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>流式布局</title><style>* {margin: 0;padding: 0;}section {width: 100%;max-width: 980px;min-width: 320px;margin: 0 auto;}section div {float: left;width: 50%;height: 400px;}section div:nth-child(1) {background-color: pink;}section div:nth-child(2) {background-color: purple;}</style>
</head><body><section><div></div><div></div></section>
</body></html>

2、京东移动端首页制作

访问地址：m.jd.com

（1）技术选型

方案：我们采取单独制作移动页面方案
技术：布局采取流式布局

（2）搭建相关文件夹结构

（3）设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

（4）常用初始化样式

body {
margin: 0 auto;
min-width: 320px;
max-width: 640px;
background: #fff;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
line-height: 1.5;
color: #666;
}

（5）二倍精灵图做法

有时候，精灵图大小是实际图大小的两倍，需要把精灵图等比例缩放为原来的一半，之后根据大小测量坐标。
注意代码里面background-size也要写：整个精灵图设置为原来宽度的一半，高度会等比例缩放。

（6）图片格式

DPG图片压缩技术：京东自主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。
webp 图片格式：谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。

（7）代码实现

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 引入我们的css初始化文件 --><link rel="stylesheet" href="css/normalize.css"><!-- 引入我们首页的css --><link rel="stylesheet" href="css/index.css"><title>京东移动首页</title>
</head><body><!-- 顶部 --><header class="app"><ul><li><img src="images/close.png" alt=""></li><li><img src="images/logo.png" alt=""></li><li>打开京东App，购物更轻松</li><li>立即打开</li></ul></header><!-- 搜索 --><div class="search-wrap"><div class="search-btn"></div><div class="search"><div class="jd-icon"></div><div class="sou"></div></div><div class="search-login">登陆</div></div><!-- 主体内容部分 --><div class="main-content"><!-- 滑动图 --><div class="slider"><img src="upload/banner.dpg" alt=""></div><!-- 小家电品牌日 --><div class="brand"><div><a href="#"><img src="upload/pic11.dpg" alt=""></a></div><div><a href="#"><img src="upload/pic22.dpg" alt=""></a></div><div><a href="#"><img src="upload/pic33.dpg" alt=""></a></div></div><!-- nav部分 --><nav class="clearfix"><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav2.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav3.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href=""><img src="upload/nav1.webp" alt=""><span>京东超市</span></a></nav><!-- 新闻模块 --><div class="news"><a href="#"><img src="upload/new1.dpg" alt=""></a><a href="#"><img src="upload/new2.dpg" alt=""></a><a href="#"><img src="upload/new3.dpg" alt=""></a></div></div>
</body></html>

index.css

body {width: 100%;min-width: 320px;max-width: 640px;margin: 0 auto;font-size: 14px;font-family: -apple-system, Helvetica, sans-serif;color: #666;line-height: 1.5;
}/*点击高亮我们需要清除清除  设置为transparent 完成透明*/* {-webkit-tap-highlight-color: transparent;
}/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/input {-webkit-appearance: none;
}/*禁用长按页面时的弹出菜单*/img,
a {-webkit-touch-callout: none;
}a {color: #666;text-decoration: none;
}ul {margin: 0;padding: 0;list-style: none;
}img {vertical-align: middle;
}div {/* css3 盒子模型 */box-sizing: border-box;
}.clearfix:after {content: "";display: block;line-height: 0;visibility: hidden;height: 0;clear: both;
}.app {height: 45px;
}.app ul li {float: left;height: 45px;line-height: 45px;background-color: #333333;text-align: center;color: #fff;
}.app ul li:nth-child(1) {width: 8%;
}.app ul li:nth-child(1) img {width: 10px;
}.app ul li:nth-child(2) {width: 10%;
}.app ul li:nth-child(2) img {width: 30px;vertical-align: middle;
}.app ul li:nth-child(3) {width: 57%;
}.app ul li:nth-child(4) {width: 25%;background-color: #F63515;
}/* 搜索 */.search-wrap {position: fixed;overflow: hidden;width: 100%;height: 44px;min-width: 320px;max-width: 640px;
}.search-btn {position: absolute;top: 0;left: 0;width: 40px;height: 44px;
}.search-btn::before {content: "";display: block;width: 20px;height: 18px;background: url(../images/s-btn.png) no-repeat;background-size: 20px 18px;margin: 14px 0 0 15px;
}.search-login {position: absolute;right: 0;top: 0;width: 40px;height: 44px;color: #fff;line-height: 44px;
}.search {position: relative;height: 30px;background-color: #fff;margin: 0 50px;border-radius: 15px;margin-top: 7px;
}.jd-icon {width: 20px;height: 15px;position: absolute;top: 8px;left: 13px;background: url(../images/jd.png) no-repeat;background-size: 20px 15px;
}.jd-icon::after {content: "";position: absolute;right: -8px;top: 0;display: block;width: 1px;height: 15px;background-color: #ccc;
}.sou {position: absolute;top: 8px;left: 50px;width: 18px;height: 15px;background: url(../images/jd-sprites.png) no-repeat -81px 0;background-size: 200px auto;
}.slider img {width: 100%;
}/* 品牌日 */.brand {overflow: hidden;border-radius: 10px 10px 0 0;
}.brand div {float: left;width: 33.33%;
}.brand div img {width: 100%;
}/* nav */nav {padding-top: 5px;
}nav a {float: left;width: 20%;text-align: center;
}nav a img {width: 40px;margin: 10px 0;
}nav a span {display: block;
}/* news */.news {margin-top: 20px;
}.news img {width: 100%;
}.news a {float: left;box-sizing: border-box;
}.news a:nth-child(1) {width: 50%;
}/* .news a:nth-child(2),
.news a:nth-child(3),
{width: 25%;
} *//* n+2 就是从从2个往后面选 */.news a:nth-child(n+2) {width: 25%;border-left: 1px solid #ccc;
}/* .news a:nth-child(3) {width: 25%;
} */

（8）运行效果

移动WEB开发二、流式布局

零、文章目录文章地址个人博客-CSDN地址：https://blog.csdn.net/liyou123456789个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee：https://gitee.com/bluecusliyou/TechLearnGithub：https:…...

编程日记 2023/2/21 17:57:08

分享在线预约系统制作步骤_在线预约链接怎么做

在微信小程序上进行在线预约，不管是商家还是顾客，都可以自由选择时间，顾客还可以通过预约小程序，了解到所选服务的详情和功能特色，不必等到去店内听介绍，顾客能节省等候时间，商家能解放招待人力…...

编程日记 2023/2/21 17:56:02

【每日一题Day125】LC1326灌溉花园的最少水龙头数目 | 动态规划贪心

灌溉花园的最少水龙头数目【LC1326】在 x 轴上有一个一维的花园。花园长度为 n，从点 0 开始，到点 n 结束。花园里总共有 n 1 个水龙头，分别位于 [0, 1, ..., n] 。给你一个整数 n 和一个长度为 n 1 的整数数组 ranges ，其中 …...

编程日记 2023/2/21 17:54:54

C# FFmpeg推流Vlc.DotNet拉流优化参数

FFmpeg是流媒体开源神器，视频转换、剪裁包括推流，无所不能，很多系统都是基于其开发的。拉流可以用FFplay，但是不利于集成到自己的代码中，因此拉流选择了Vlc.DotNet。在使用中，仅使用默认参数，…...

编程日记 2023/2/21 17:53:47

pnpm v8版本升级变化关注点（前瞻速攻版）

前言 pnpm v8.0.0-alpha.0 版本已经发布，包含少量变化，但其中还是有令人在意的点的。本文将默认读者拥有大部分 pnpm v7 版本的知识储备，进行 v8 版本的前瞻速攻。安装方法目前通过指定 Tag 方式可以安装 v8 alpha 版： npm…...

编程日记 2023/2/21 17:52:40

Python基础-环境安装

Python安装1.下载PythonPython网址：https://www.python.org/进入Python官网，点击Downloads，选择自己对应的操作系统（此处以Windows为例）在左侧的稳定发行版中，选择一个3.5版本以上的，然后点击对…...

编程日记 2023/2/21 17:51:33

重载、重写、重构概念辨析

首先，重载、重写、重构都表现为方法名相同重载重载（overload），表示同一类的方法之间的关系，至少有以下其中一种情况参数个数不同参数类型不同参数顺序不同注意，返回值类型不同不能作为重载依据重…...

编程日记 2023/2/21 17:50:27

第九章 - 多表查询（join，left join 等）与合并查询（union union all）

第九章 - 多表查询（join，left join 等）与合并查询（union）交叉链接（笛卡尔积）内连接查询外连接查询左链接： left join右链接：right join组合查询 union & union all使…...

编程日记 2023/2/21 17:49:19

matplotlib学习笔记（持续更新中…）

目录 1. 安装，导入 2. figure，axes（图形，坐标图形） 2.1 figure对象 2.2 axes对象 2.3 代码演示 2.3 subplot() 方法 3. 图表的导出 3.1 savefig() 方法 3.2 代码演示 1. 安装，导入 pip install m…...

编程日记 2023/2/21 17:48:11

STM32 SystemInit()函数学习总结

拿到程序后如何看系统时钟？User文件夹——system_stm32f4xx程序，先找systemcoreclock(系统时钟）但是这里这么多个系统时钟应该如何选择?点击魔法棒，然后点击C/C可以看到define的是F40_41XXX.USE这一款 ，对应着就找出了…...

编程日记 2023/2/21 17:47:03

【Spring Boot 原理分析】- 自动配置

【Spring Boot 原理分析】- 自动配置 Condition 注解 Condition 是 Spring 4.0 增加的条件判断功能，通过这个功能可以实现选择的创建 Bean 操作 👑 我们在使用 Spring 的时候，只需导入某个依赖的坐标，就可以直接通过 Autwired 注…...

编程日记 2023/2/21 17:45:55

简明易懂的JVM理解

文章目录简明易懂的JVM和GC理解写在前面Java虚拟机(JVM)的组成基本介绍结构类加载子系统(ClassLoader SubSystem)介绍类加载过程类加载过程小结双亲委派模型(Parent-Delegation Model)简介优点Java9的类加载的委派关系变动双亲委派模型小结运行时数据区(Runtime Data Areas)介绍…...

编程日记 2023/2/21 17:44:46

新考纲下的PMP考试有多难？

PMP考试在6月25号考试结束后，在网上引起一片哗然，新考纲领域与考点的转变使得考试难度加大：PMP考试敏捷和混合内容比重大，考试难度加大很多；考题更加注重考生的知识应用能力，领域更宽； 接下来我…...

编程日记 2023/2/21 17:43:39

朗润国际期货：知名投行/大佬打Call记

知名投行/大佬打Call记 2023年知名投行/大佬看好哪些投资标的中国股市高盛（2023年1月）：将上涨15% 花旗（2023年1月）：上半年会成为投资两点摩根大通（2022年11月）：M…...

编程日记 2023/2/21 17:42:30

遗传算法及Python实现

0 建议学时 4学时 1 人工智能概述 2020中国人工智能产业年会在苏州召开，会上发布的《中国人工智能发展报告2020》显示，过去十年(2011-2020) ，中国人工智能专利申请量达389571件，占全球总量的74.7%，位居世界第一。报…...

编程日记 2023/2/21 17:41:21

零基础 Ubuntu 20.04.01 下搭建51单片机开发环境[开源编译器SDCC]

原创首发于CSDN，转载请注明出处，谢谢！ 文章目录为何会在Linux下开发单片机个人系统环境与所用开发板安装开源编译器 sdccSTC MCU ISP 闪存工具 stcgal 的安装单片机代码的编译与测试｜编写主代码 main.c｜使用 sdcc 编译…...

编程日记 2023/2/21 17:40:14

手摸手快速入门正则表达式 (Vue源码中的使用)

vue2源码在 vue2 源码的 src\compiler\parser\html-parser.js 文件中里面有大量的正则表达式，如下图可以看到非常的长，不是我说，就前几行，如果没有相关的正则表达式的工具，我可能就被劝退了😭 这里…...

编程日记 2023/2/21 17:39:02

TCP/IP网络协议族分成及其每层作用

1、可以分为应用层、传输层、网络层、链路层 2、各层的作用应用层(可以想象成是快递打包过程) 决定了向用户提供应用服务时通信的活动，将要进行的操作或者数据进行一个打包。传输层（可以理解为选择顺丰、圆通等快递公司） 提供数据传输的方…...

编程日记 2023/2/21 17:37:56

041、子序列类型问题（labuladong）

子序列类型问题一、经典动态规划：编辑距离基于labuladong的算法网站，经典动态规划：编辑距离； 总结： 一般来说涉及到两个字符串的问题，需要依赖上一次的各种操作，一般使用dp table&#xff…...

编程日记 2023/2/21 17:36:46

IPFS去中心化存储实战指南：黑马程序员音乐播放器项目开发完整教程

IPFS去中心化存储实战指南：黑马程序员音乐播放器项目开发完整教程【免费下载链接】BlockChain 黑马程序员 120天全栈区块链开发开源教程项目地址: https://gitcode.com/gh_mirrors/blockchain95/BlockChain 你是否想过如何构建一个真正去中心化的音乐播放…...

编程新知 2026/5/26 4:46:24

除了ulimit -c unlimited：深入理解Linux core dump机制与高级配置指南

深入Linux核心转储：从基础配置到生产环境实战指南当服务器上的关键应用突然崩溃时，系统管理员最需要的就是一份完整的"事故现场记录"。Linux的core dump机制正是为此而生，它能保存程序崩溃时的内存状态、寄存器值和调用堆栈&#x…...

编程新知 2026/5/26 4:16:16

Python基础语法：常用内置函数

round()：四舍五入 # 省略 ndigits print(round(3.14)) # 输出 3（int） print(round(3.66)) # 输出 4# 指定 ndigits print(round(3.14159, 2)) # 输出 3.14（float） print(round(3.666, 2)) # 输出 3.67# …...

编程新知 2026/5/26 1:29:07

PCB虚焊/走线断裂/焊盘脱落工程师易漏判

PCB 故障中，30% 并非元件损坏，而是 PCB 本身的隐性故障—— 虚焊、走线断裂、焊盘脱落、过孔开路。这类故障外观隐蔽、时好时坏、排查难度大，很多工程师反复更换元件仍无法解决，最终误判为 “板报废”。一、PCB 隐性故障核心成因…...

编程新知 2026/5/26 0:18:08

电容损坏深度诊断，从外观到 ESR精准区分容衰与漏电

在 PCB 故障中，电容损坏占比超 40%，是当之无愧的 “头号杀手”。很多工程师仅靠 “鼓包漏液” 判断电容好坏，殊不知80% 的电容损坏是隐性的—— 外观平整但容值衰减、ESR 升高、轻微漏电，导致供电不稳、系统重启、噪声增大&#x…...

编程新知 2026/5/26 0:18:08

探索Windows 10上的Android世界：揭秘WSA-Windows-10项目的3个技术突破

探索Windows 10上的Android世界：揭秘WSA-Windows-10项目的3个技术突破【免费下载链接】WSA-Windows-10 This is a backport of Windows Subsystem for Android to Windows 10. 项目地址: https://gitcode.com/gh_mirrors/ws/WSA-Windows-10 想象一下&#…...

编程新知 2026/5/25 22:14:20