前言

在之前学了关于移动端的基础知识，接下来我们就需要运用这些知识来进行实际应用。
上才艺！看案例！

一、京东移动端页面

京东移动端的页面基本就是如上图
页面有顶部的导航栏、搜索栏、主体栏里面分成三个部分进行设计。

二、制作步骤

1.页面整体框架

代码框架如图展示：

2.注意要点

我们对于移动端页面采用的是流式布局，代码如下：

body {width: 100%;/* width：100%可以在320px-640px之间自由缩放 */max-width: 640px;min-width: 320px;margin: 0 auto;font-size: 14px;font-family: -apple-system, 'Helvetica Neue', sans-serif;color: #666;line-height: 1.5;background-color: #999;height: 2000px;
}

对于页面默认的一些效果我们需要清除，代码如下：

/*点击高亮我们需要清除清除  设置为transparent 完成透明*/* {-webkit-tap-highlight-color: transparent;
}/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/input {-webkit-appearance: none;
}/*禁用长按页面时的弹出菜单*/img,
a {-webkit-touch-callout: none;
}

页面顶部的导航栏会在用户往下翻的时候消失，而搜索栏会固定在顶部，所以我们就需要用到固定定位

代码如下：

.search-wrap {height: 44px;position: fixed;/* 用了固定定位的就要给宽度，再缩放页面的时候也要给它最大最小宽度 */width: 100%;max-width: 640px;min-width: 320px;overflow: hidden;/*由于中间有搜索栏会导致外边距塌陷所以需要使用overflow*/
}

导航栏nav我们的搭建结构效果先是如下图：

但是在制作中我们会出现外边距塌陷问题所以我们需要给父盒子加一个overflo：hidden；

搜索栏中的放大镜效果，是使用了精灵图，在移动端使用精灵图也需要二倍图法则：
1.将整张图都缩小两倍
2.再测量坐标轴位置
3.精灵图图标也需要缩小为原来的一半

.sou {position: absolute;top: 8px;left: 50px;width: 18px;height: 15px;background: url(../images/jd-sprites.png) no-repeat -81px 0;background-size: 200px ;/*精灵图中的放大镜也缩小为原来的一半*/
}

当两栏之间有空隙是因为图片与图片之间会有间隙，情况如下：

如下代码解决：

img {vertical-align: middle;
}

对于这个界面的设计，是可以点击的三个链接的盒子，所以我们用3个div来装链接

在HTML中结构搭建：

<div class="brand"><div><a href="#"><img src="upload/pic1.dpg" alt=""></a></div><div><a href="#"><img src="upload/pic2.dpg" alt=""></a></div><div><a href="#"><img src="upload/pic3.dpg" alt=""></a></div></div>

在CSS中的代码：

.brand {border-radius: 10px 10px 0 0;/* 盒子的圆角顺序：左上角、右上角、左下角、右下角 */overflow: hidden;/* 将溢出盒子部分删除 */
}.brand div {float: left;width: 33.333%;
}.brand div img {width: 100%;
}

总结

做完这个案例，我们不仅能将新知识运用到还能将旧知识复习一遍，所以，多做案例可以有效提升自己的打代码能力！

流式布局案例——京东网页相关推荐

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

流式布局案例——京东网页

文章目录

前言

一、京东移动端页面

二、制作步骤

1.页面整体框架

2.注意要点

总结

流式布局案例——京东网页相关推荐

最新文章

热门文章