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

移动WEB开发二、流式布局

news 2026/4/2 13:26:50

文章地址

个人博客-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

Cockpit CMS终极扩展开发指南：7步创建自定义字段类型与组件

Cockpit CMS终极扩展开发指南：7步创建自定义字段类型与组件【免费下载链接】cockpit Add content management functionality to any site - plug & play / headless / api-first CMS 项目地址: https://gitcode.com/gh_mirrors/coc/cockpit Cockpit CMS…...

编程新知 2026/4/2 13:14:27

构建智能压枪系统：罗技鼠标宏的底层技术与实战优化

构建智能压枪系统：罗技鼠标宏的底层技术与实战优化【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生罗技鼠标宏项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 问题剖析：后坐力控制的…...

编程新知 2026/4/2 12:40:07

豆包大模型日均Token使用量超120万亿，Seedance 2.0 API开启公测

4月2日，火山引擎在AI创新巡展武汉站上宣布，Seedance 2.0 API 面向企业用户开放公测。据介绍，火山引擎为 Seedance 2.0 建立了行业领先的版权与肖像安全保障，覆盖视频生成涉及的各种模态和创作前后全流程，对侵权、深度伪…...

编程新知 2026/4/2 12:03:26

从火星车到智能家电：聊聊那些藏在身边的RTOS（FreeRTOS、VxWorks、RT-Thread）

从火星车到智能家电：聊聊那些藏在身边的RTOS 当你清晨按下智能咖啡机的启动键，或是用手机远程调节空调温度时，可能不会想到这些设备内部运行着与NASA火星车同源的实时操作系统（RTOS）。这类专为即时响应设计的系统&…...

编程新知 2026/4/2 11:57:24

javase的第一次博客

1，计算机简介：用于数据计算和处理2，计算机的硬件和软件：计算机硬件：运算器，控制器，存储器，输入设备，输出设备（冯诺依曼模型）CPU：运算…...

编程新知 2026/4/2 11:06:26

想了解欧拉好猫参数？这篇文章给你详细答案！

在当今新能源汽车市场蓬勃发展的背景下，欧拉好猫凭借其独特的魅力，在众多车型中脱颖而出，吸引了众多消费者的目光。以下将对欧拉好猫的相关参数及技术亮点进行详细解析。外观设计与尺寸欧拉好猫采用复古未来主义的设计风格，圆润的…...

编程新知 2026/4/2 11:00:24

如何在3小时内构建你的第一个炉石传说AI机器人？Hearthrock终极指南

如何在3小时内构建你的第一个炉石传说AI机器人？Hearthrock终极指南【免费下载链接】hearthrock Hearthstone Bot Engine 项目地址: https://gitcode.com/gh_mirrors/he/hearthrock Hearthrock是一个革命性的炉石传说AI引擎，专为人工智能研究者和…...

编程新知 2026/4/2 10:54:21