移动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可以调出启动设备列表，可以选择性的启动…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
linux 错误码总结
1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
EtherNet/IP转DeviceNet协议网关详解
一，设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。 在自动…...
sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求，并检查收到的响应。它以以下模式之一…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1）准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...