要义

流式布局是移动端中很重要的布局之一。流式布局的核心是：通过盒子宽度设置百分比来根据屏幕的宽度进行伸缩，不受固定像素限制，内容向两侧填充，流式布局也是web开发中比较常见的布局

而本节内容将通过京东的移动端官网首页来讲解移动端常见布局之流动布局。资源可从网址m.jd.com中获取。

一，整体效果

二，细节合集

2.1 meta饰扣标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maxmum-scale=1.0, minmum-scale=1.0">

内容属性：
name=“viewport” 指理想视口。即宽度等于理想宽度，而非默认的980px
content=“内容属性”
内容属性中包括：
width=device-width;设备宽度
user-scalable=no;不允许用户缩放
initial-scale=1.0;初始缩放倍数为1
maxmum-scale=1.0;最大缩放比为1
minmum-scale=1.0;最小缩放比为1.0
一般情况下视口标签需要自己补充完整

2.2 初始化css

2.1 css3新盒子模型

盒子模型分为传统盒子模型和css3新盒子模型。
传统盒子模型中盒子宽度等于width+border+padding
但是css3新盒子模型中的width包括了border和padding，也就是说border和padding并不会撑大盒子。
传统盒子模型转化为css3新盒子模型只需要在css代码中于需要用的盒子样式中添加一句即可：

box-sizing: border-box;

因为流式布局一般是计算百分比。所以如果我们利用传统的盒子模型，在已经布局完毕后加边框可能会把盒子挤到下面去。如图所示，给已经布局好的图片加了左边框：

盒子被挤到下面，那是因为本已经按照百分比布局好，却因为加了边框影响了宽度，我们的传统盒子模型将边框也计入到了盒子宽度中去。所以我们此时的做法是，转化成css3新盒子模型，按照上述方式处理后效果如下：

2.2 特殊样式

a中有默认的线和后面的高亮蓝色。去掉高低昂蓝色：

-webkit-tab-highlight-Color: transparent;

取消按钮默认的外观效果：

-webkit-appearance: none;

禁止长按图片弹出菜单：

img, a {-webkit-touch-callout: none;}

2.3 二倍精灵图

在遇到二倍精灵图的时候，我们需要将原图片等比例缩放一半去测试，再将代码缩放一般后进行定位。必不可少的是这一句：

2.4 去除图片空白缝隙

在书写样式时候，图片可能会有一个默认的图片空白缝隙：

我们如果想去掉只需要书写即可，其中，middle表示不用去除图片空白缝隙：

    vertical-align: top/middle;

三，整体代码

<!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, user-scalable=no, maxmum-scale=1.0, minmum-scale=1.0"><title>Document</title><style>/* 基础css */* {margin: 0;padding: 0;}a {-webkit-tap-highlight-color: transparent;}button {-webkit-appearance: none;}img,a {-webkit-touch-callout: none;}ul {margin: 0;padding: 0;list-style: none;}body {width: 100%;min-width: 320px;max-width: 640px;margin: 0 auto;background: #fff;font-size: 14px;line-height: 1.5;color: #666;background-color: rgb(255, 255, 255);
}
a {color: #666;text-decoration: none;
}
.app {height: 45px;
}
.app ul li {float: left;height: 45px;background-color: #333333;text-align: center;line-height: 45px;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: rgb(246, 53, 21);
}
/* 搜索 */
.search-wrap {position: fixed;height: 44px;overflow: hidden;min-width: 320px;max-width: 640px;width: 100%;/* 外边距合并 */
}
.search-btn {position: absolute;top: 0px;left: 0px;width: 40px;height: 44px;
}
.search-login {position: absolute;right: 0;top: 0;width: 40px;height: 44px;color: #fff;line-height: 44px;}
.search {position: relative;height: 30px;background-color: skyblue;margin: 7px 50px 0 50px;border-radius: 15px;background-color: #fff;
}
.search-btn::before {content: "";display: block;width: 20px;height: 18px;background: url(../images/s-btn.png) no-repeat;background-size: 100% 100%;margin: 14px 0 0 15px;
}
.jd-icon {width: 20px;height: 15px;position: absolute;top:8px;left: 13px;background-color: pink;background: url(../images/jd.png) no-repeat;background-size: 100% 100%;
}
.jd-icon::after {position: absolute;right: -8px;top: 0px;content: "";display: block;width: 1px;height: 15px;background-color: #ccc;
}
.sou {width: 18px;height: 15px;background-color: pink;position: absolute;top: 8px;left: 50px;background: url('../images/jd-sprites.png') no-repeat -81px 0;background-size: 200px auto;
}
.slider img {width: 100%;
}
.brand  {border-radius: 10px, 10px, 0px, 0px;;
}
.brand div {float: left;width: 33.33%;
}
.brand img {width: 100%;vertical-align: top;
}
/* nav */
nav{margin-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 {margin: 10px 0;
}
.news a {float: left;box-sizing: border-box;
}
.news a:first-child {width: 50%;
}
.news a:nth-child(n + 2) {/* n+2就是从第二个开始 */width: 25%;border-left: 1px solid #ccc;
}.news img {width: 100%;
}</style>
</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="./images/banner.dpg" alt=""></div><!-- 小家品牌日 --><div class="brand"><div><a href="#"><img src="./images/pic11.dpg" alt=""></a></div><div><a href="#"><img src="./images/pic22.dpg" alt=""></a></div><div><a href="#"><img src="./images/pic33.dpg" alt=""></a></div></div><!-- nav部分 --><nav><a href="#"><img src="./images/nav1.webp" alt=""><span>京东超市</span></a><a href="#"><img src="./images/nav2.webp" alt=""><span>京东超市</span></a><a href="#"><img src="./images/nav1.webp" alt=""><span>京东超市</span></a><a href="#"><img src="./images/nav1.webp" alt=""><span>京东超市</span></a><a href="#"><img src="./images/nav1.webp" alt=""><span>京东超市</span></a><a href="#"><img src="./images/nav1.webp" alt=""><span>京东超市</span></a><a href="#"><img src="./images/nav1.webp" alt=""><span>京东超市</span></a><a href="#"><img src="./images/nav1.webp" alt=""><span>京东超市</span></a><a href="#"><img src="./images/nav1.webp" alt=""><span>京东超市</span></a><a href="#"><img src="./images/nav1.webp" alt=""><span>京东超市</span></a></nav><!-- 新闻模块 --><div class="news"><a href="#"><img src="./images/new1.dpg" alt=""></a><a href="#"><img src="./images/new2.dpg" alt=""></a><a href="#"><img src="./images/new3.dpg" alt=""></a></div></div></body></html>

流式布局之京东首页案例相关推荐

移动web基础：视口(viewport)，流式布局 JDM京东移动端开发
目标能够理解视口的概念并进行视口的设置能够说出流式布局的基本布局特征能够使用 2倍图进行页面开发能够实现京东首页的头部布局移动web基础移动端调试问题模拟器调试真机调试:使用手机进 ...
（50）流式布局—京东移动端首页制作案例
一.访问地址多快好省,购物上京东! 二.技术选型方案:我们采取单独制作移动页面方案技术:布局采取流式布局三.搭建相关文件夹结构四.设置视口标签以及引入初始化样式 <meta name= ...
京东首页案例（流式布局）
我是表哥Harker,表妹我来咯~ 上篇说过,现在主流的移动端开发是单独制作移动端页面,响应式虽然有但是很麻烦,但是我们学肯定都要学到,那么这篇开始我们先讲解单独制作的几个布局. 这篇讲解流式布局(其 ...
移动web开发--移动端常见布局+流式布局和flex布局+携程网首页案例
浏览器私有前缀为了兼容老版本私有前缀 -moz- : fixfox 浏览器私有属性 -ms- : ie浏览器私有属性 -webkit- : safari.chrome私有属性 -o- : Oper ...
移动WEB开发之流式布局-京东案例
2. 视口视口(viewport)就是浏览器显示页面内容的屏幕区域. 视口可以分为布局视口.视觉视口和理想视口 2.1 布局视口 layout viewport 视口(viewport)就是浏览器显 ...
移动端开发——京东首页制作（流式布局）
移动端开发--京东首页制作(流式布局) 项目准备初始化基本文件夹创建index.html 设置视口引入基本公共样式引入自己的css样 <!DOCTYPE html> <htm ...
流式布局案例——京东网页
文章目录前言一.京东移动端页面二.制作步骤 1.页面整体框架 2.注意要点总结前言在之前学了关于移动端的基础知识,接下来我们就需要运用这些知识来进行实际应用. 上才艺!看案例! 一.京东移 ...
京东移动端首页-流式布局
京东移动端首页采用流式布局(百分比布局) 采用流式布局(百分比布局) 主要源码: <!DOCTYPE html> <html lang="en">< ...
前端与移动开发----移动web开发----流式布局（内附流式布局案例---京东）
移动web流式布局 ☞移动端基础概念介绍[了解] 1.知识点-移动设备-屏幕尺寸屏幕尺寸: 代表的是移动设备屏幕对角线的长度 ,单位是寸 2.知识点-移动设备-物理分辨率物理分辨率: 代表的就是 ...
02移动端布局基础之流式布局项目实战(京东移动端首页)
技术交流QQ群:1027579432,欢迎你的加入! 1.技术选型方案:采取单独制作移动页面方案技术:布局采取流式布局 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 ``` < ...

流式布局之京东首页案例

文章目录

要义