移动WEB开发二、流式布局
零、文章目录
文章地址
- 个人博客-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:…...
分享在线预约系统制作步骤_在线预约链接怎么做
在微信小程序上进行在线预约，不管是商家还是顾客，都可以自由选择时间，顾客还可以通过预约小程序，了解到所选服务的详情和功能特色，不必等到去店内听介绍，顾客能节省等候时间，商家能解放招待人力…...
【每日一题Day125】LC1326灌溉花园的最少水龙头数目 | 动态规划 贪心
灌溉花园的最少水龙头数目【LC1326】 在 x 轴上有一个一维的花园。花园长度为 n，从点 0 开始，到点 n 结束。 花园里总共有 n 1 个水龙头，分别位于 [0, 1, ..., n] 。 给你一个整数 n 和一个长度为 n 1 的整数数组 ranges ，其中 …...
C# FFmpeg推流Vlc.DotNet拉流优化参数
FFmpeg是流媒体开源神器，视频转换、剪裁包括推流，无所不能，很多系统都是基于其开发的。拉流可以用FFplay，但是不利于集成到自己的代码中，因此拉流选择了Vlc.DotNet。 在使用中，仅使用默认参数，…...
pnpm v8版本升级变化关注点（前瞻速攻版）
前言 pnpm v8.0.0-alpha.0 版本已经发布，包含少量变化，但其中还是有令人在意的点的。 本文将默认读者拥有大部分 pnpm v7 版本的知识储备，进行 v8 版本的前瞻速攻。 安装方法 目前通过指定 Tag 方式可以安装 v8 alpha 版： npm…...
Python基础-环境安装
Python安装1.下载PythonPython网址：https://www.python.org/进入Python官网，点击Downloads，选择自己对应的操作系统（此处以Windows为例）在左侧的稳定发行版中，选择一个3.5版本以上的，然后点击对…...
重载、重写、重构概念辨析
首先，重载、重写、重构都表现为方法名相同 重载 重载（overload），表示同一类的方法之间的关系，至少有以下其中一种情况 参数个数不同参数类型不同参数顺序不同 注意，返回值类型不同不能作为重载依据 重…...
第九章 - 多表查询（join，left join 等）与合并查询（union union all）
第九章 - 多表查询（join，left join 等）与合并查询（union）交叉链接（笛卡尔积）内连接查询外连接查询左链接： left join右链接：right join组合查询 union & union all使…...
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…...
STM32 SystemInit()函数学习总结
拿到程序后如何看系统时钟？User文件夹——system_stm32f4xx程序，先找systemcoreclock(系统时钟）但是这里这么多个系统时钟应该如何选择?点击魔法棒，然后点击C/C可以看到define的是F40_41XXX.USE这一款 ，对应着就找出了…...
【Spring Boot 原理分析】- 自动配置
【Spring Boot 原理分析】- 自动配置 Condition 注解 Condition 是 Spring 4.0 增加的条件判断功能，通过这个功能可以实现选择的创建 Bean 操作 👑 我们在使用 Spring 的时候，只需导入某个依赖的坐标，就可以直接通过 Autwired 注…...
简明易懂的JVM理解
文章目录简明易懂的JVM和GC理解写在前面Java虚拟机(JVM)的组成基本介绍结构类加载子系统(ClassLoader SubSystem)介绍类加载过程类加载过程小结双亲委派模型(Parent-Delegation Model)简介优点Java9的类加载的委派关系变动双亲委派模型小结运行时数据区(Runtime Data Areas)介绍…...
新考纲下的PMP考试有多难？
PMP考试在6月25号考试结束后，在网上引起一片哗然，新考纲领域与考点的转变使得考试难度加大：PMP考试敏捷和混合内容比重大，考试难度加大很多；考题更加注重考生的知识应用能力，领域更宽； 接下来我…...
朗润国际期货：知名投行/大佬打Call记
知名投行/大佬打Call记 2023年知名投行/大佬看好哪些投资标的 中国股市 高盛（2023年1月）：将上涨15% 花旗（2023年1月）：上半年会成为投资两点 摩根大通（2022年11月）：M…...
遗传算法及Python实现
0 建议学时 4学时 1 人工智能概述 2020中国人工智能产业年会在苏州召开，会上发布的《中国人工智能发展报告2020》显示，过去十年(2011-2020) ，中国人工智能专利申请量达389571件，占全球总量的74.7%，位居世界第一。 报…...
零基础 Ubuntu 20.04.01 下搭建51单片机开发环境[开源编译器SDCC]
原创首发于CSDN，转载请注明出处，谢谢！ 文章目录为何会在Linux下开发单片机个人系统环境与所用开发板安装开源编译器 sdccSTC MCU ISP 闪存工具 stcgal 的安装单片机代码的编译与测试｜编写主代码 main.c｜使用 sdcc 编译…...
手摸手快速入门 正则表达式 (Vue源码中的使用)
vue2源码 在 vue2 源码的 src\compiler\parser\html-parser.js 文件中 里面有大量的正则表达式，如下图 可以看到非常的长，不是我说，就前几行，如果没有相关的 正则表达式 的工具，我可能就被劝退了😭 这里…...
TCP/IP网络协议族分成及其每层作用
1、可以分为应用层、传输层、网络层、链路层 2、各层的作用 应用层(可以想象成是快递打包过程) 决定了向用户提供应用服务时通信的活动，将要进行的操作或者数据进行一个打包。 传输层（可以理解为选择顺丰、圆通等快递公司） 提供数据传输的方…...
041、子序列类型问题（labuladong）
子序列类型问题 一、经典动态规划：编辑距离 基于labuladong的算法网站，经典动态规划：编辑距离； 总结： 一般来说涉及到两个字符串的问题，需要依赖上一次的各种操作，一般使用dp tableÿ…...
linux系统开机文段释义
第一段Version 2.01.1204. Copyright (C) 2010American Megatrends, Inc.Press <DEL> or <F2> to entersetup. Press <F7> for BBS POPUP Menu.设备上电，提示按DEL键或者F2键进入BIOS设置。按F8可以调出启动设备列表，可以选择性的启动…...
DDPM优化目标公式推导
DDPM优化目标公式推导 DDPM优化目标公式推导**1. 问题定义****2. 优化目标：最大化对数似然****3. 变分下界的分解****4. 关键步骤：简化 KL 散度项****(a) 后验分布 q ( x t − 1 ∣ x t , x 0 ) q(\mathbf{x}_{t-1} | \mathbf{x}_t, \mathbf{x}_0) q(xt…...
video-audio-extractor：视频转换为音频
软件介绍 前几天在网上看见有人分享了一个源码，大概就是py调用的ffmpeg来制作的。 这一次我带来源码版（需要py环境才可以运行），开箱即用版本（直接即可运行） 软件特点 软件功能 视频提取音频：…...
rk3588 区分两个相同的usb相机
有时候会插入两个一模一样的usb相机，担心每次启动他们所对应的设备节点 /dev/video* 会变化，所以需要绑定usb口，区分两个相机。把两个相机都插入后，查看usb信息 rootrk3588:/# udevadm info --attribute-walk --name/dev/video0U…...
产品笔试专业名词梳理
目录 产品常识 四种常见广告形式 贴片广告 中插广告 信息流广告 横幅广告 BAT和TMD BAT TMD 付费渗透率 蓝海市场、红海市场 蓝海市场 红海市场 竞品研究 SWOT分析 SWOT分析的核心目的： SWOT分析的优点： SWOT分析的局限与注意事项&…...
Mysql-定时删除数据库中的验证码
Moudle 1 使用调度器定时删除事件 数据库实现验证码自动删除的解决方案 -- 删除旧事件（如果存在） DROP EVENT IF EXISTS delete_expired_captchas;-- 创建新事件（每分钟执行一次） CREATE EVENT delete_expired_captchas ON SCHE…...
《PyTorch：开启深度学习新世界的魔法之门》
一、遇见 PyTorch：深度学习框架新星登场 在当今的技术领域中，深度学习已然成为推动人工智能发展的核心动力，而深度学习框架则是这场技术革命中的关键工具。在众多深度学习框架里，PyTorch 以其独特的魅力和强大的功能，迅速崛起并占据了重要的地位，吸引着无数开发者和研究者…...
)
使用 C/C++ 和 OpenCV 提取图像的感兴趣区域 (ROI)
使用 C/C 和 OpenCV 提取图像的感兴趣区域 (ROI) 在计算机视觉中，感兴趣区域 (Region of Interest, ROI) 是指从图像中选择的一个特定区域，我们希望对其进行进一步的处理或分析。例如，在人脸识别中，ROI 就是包含人脸的矩形框。Op…...
Docker_Desktop开启k8s
Docker_Desktop开启k8s 原文地址：在 Docker Desktop 中启用 K8s 服务 - 墨墨墨墨小宇 - 博客园 开启k8s服务 打开docker的设置界面，选择Docker Engine，修改如下： {"debug": false,"experimental": false,…...
原理与应用（详解篇))
STM32学习笔记：定时器(TIM)原理与应用（详解篇)
前言 定时器是STM32微控制器中最重要且最常用的外设之一，它不仅能提供精确的定时功能，还能实现PWM输出、输入捕获、编码器接口等多种功能。本文将全面介绍STM32的通用定时器，包括其工作原理、配置方法和典型应用。 一、STM32定时器概述 定…...
第23讲、Odoo18 邮件系统整体架构
目录 Odoo 邮件系统整体架构邮件发送方式邮件模板配置SMTP 邮件服务器配置邮件发送过程开发中常见邮件发送需求常见问题排查提示与最佳实践完整示例：审批通过自动发邮件门户表单自动邮件通知案例邮件队列与异步发送邮件添加附件邮件日志与调试多语言邮件模板邮件安…...