html5京东页面布局,京东移动端页面布局(一)
仅供学习,转载请注明出处
需求
下面来逐步看看京东移动端页面是怎么编写构成的。
首先来看看京东的移动端页面,如下:
只要搜索京东,然后F12设置移动端浏览器显示,刷新一下浏览器就可以看到这个移动端的呈现方式的了。
本篇章不写太多,先来完成整体页面上中下三大部分的布局设置。
注意:微信展示问题
如果将这三个部分直接在body里面编写固定定位,这样下面的那部分会在微信出现无法点击的情况。
那么解决的办法就是写一个最大的div,将这里面的元素全部包裹起来,然后使用绝对定位来处理,这样就可以解决了。
准备初始化文档结构以及CSS\JS
提交码云仓库,关于git相关操作可以访问git和码云的使用。
创建三大部分的布局的git分支 init-layout
首先在我的码云仓库中创建分支,如下:
然后在本地仓库更新一下,并切换分支进行开发。
好了,下面就来开始编写三大部分的代码吧。
截屏京东移动端的页面,放入Photoshop,方便量取尺寸和取色
按照大小100%来截取。
使用Photoshop打开,如下:
正常如果有设计会给一份PSD文件,并且以两倍大小提供,但是因为这是个人创造,就按照一倍大小来处理吧。
设置rem单位计算大小
可以看到,这里我改为了20px,如果为两倍大小,则可以设置为40px。
编写基本HTML结构
编写好了基本html架构之后,然后到index.css中编写样式。
编写最外部div固定定位的样式。
要注意将浏览器屏幕的大小调整为截图一样的大小 468px × 837px
编写header的div样式
编写center_con的div样式
编写fooster的div样式
在开发过程也要适当调整一下大小,截图的部分用来取色比较方便,大小其实就不准确了。
好了,下面就到了比较重要的中间部分。
设置中间部分的内容,提供垂直方向的滚动条,水平方向不要有滚动条。
这个很关键,overflow的应用。
overflow-y: auto;
overflow-x: hidden;
好啦,这样移动端三大部分的布局就完成了。先提交代码,下一个篇章继续。
合并init-layout分支到master分支,并提交代码
首先提交分支代码
$ git add .
$ git commit -m 'init layout'
$ git push
将分支代码合并到master分支并提交
$ git checkout master
$ git merge init-layout
$ git push
该项目的码云仓库地址
寻找资源的地址如下:
扫描微信公众号
寻找价值数万的视频资源
html5京东页面布局,京东移动端页面布局(一)相关推荐
- 【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录 一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端 一.移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问 ...
- 图上上传页面设计_无线端页面设计“三大雷区”
无线视觉规范 手机端页面的设计有许多的规范,大到涉及整个页面的排版呈现方式,小到一个icon的尺寸大小,这都关系到视觉页面的美观程度以及用户体验设计.所以应该积极主动去分析深入了解并研究出可行的解决方 ...
- 怎么把一个控件放到tab页面上去?_移动端页面内容切换
# 移动端页面内容切换 上周做了一个和页面切换相关的需求,为了探寻在需求场景下最符合用户心理模型的交互方式,当时一共输出了有四五种方案.总结一下各种切换页面内容的方式的特点和他们适用的场景.## 一. ...
- 【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )
文章目录 一.视口 1.布局视口 ( 网页大小 | 网页大小 > 设备大小 ) 2.视觉视口 ( 设备大小 | 网页大小 > 设备大小 ) 3.理想视口 ( 网页大小 = 设备大小 ) 一 ...
- HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局 一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值 设置子项的布局方向(写在父容器上) 3. ...
- vue移动端下拉切换页面_Vue实现移动端页面切换效果
找了好多博客实现效果都--emmm-- 应用Vue自带的过渡 < 进入/离开 & 列表过渡 >和 嵌套路由 和 fixed定位实现 其实还是挺简单的. 在子页面把整个页面做绝对定位 ...
- 【移动端网页布局】移动端网页布局基础概念 ⑤ ( 视网膜屏技术 | 二倍图概念 | 代码示例 )
文章目录 一.视网膜屏技术 二.二倍图概念 三.代码示例 一.视网膜屏技术 PC 端 和 早期的 移动端 网页中 , CSS 中配置的 1 像素 对应的就是物理屏幕中的 1 像素 ; Retina 视 ...
- 【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )
文章目录 一.移动端浏览器 二.移动端屏幕分辨率 三.移动端网页调试方法 一.移动端浏览器 移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 ...
- app去除html标签,wap、app移动端页面常用html标签汇总
1.section 将内容组织到精确的语义块,表示页面的一部分. 2.article article表示网页的一个文章.故事. 3.header (1)用在整页的页头 (2)section或者arti ...
- 怎么在pc端浏览器调试移动端页面
在最近的工作中兼任一点测试工作,需要调试移动端页面,在看了好多方法大概主要就是以google chrome浏览器为主,大概步骤为: 1.打开chrome浏览器 2.输入网址 3.按f12呼出开发者工具 ...
最新文章
- (办公)网页发送到桌面快捷方式怎么做
- 再见了SpringMVC,这个框架有点厉害,甚至干掉了Servlet!
- 年终总结,程序员票选最喜欢的编程语言花落谁家?
- fftw_plan_dft_2d重复优化
- 使用Java EE 7,WildFly和Docker进行连续部署–(第1部分)
- 人才认证+奖金,智能分拣挑战赛baseline助力最后冲刺
- mysql数据库安全配置规范_MySQL数据库安全配置
- 如何快速开发一个支持高效、高并发的分布式ID生成器(三)
- python的方向_Python Shell下方向键显示「^[[C^[[D」修复方法
- 新海诚没有参与制作的作品_爱情可以是哪些样子——盘点新海诚和宫崎骏作品中的爱情故事...
- 使用docker搭建db2数据库
- 图像质量评估(4) -- 色差(Chromatic Aberration)
- 帧、采样率、Hz、比特率
- python问题unindent does not match any outer indentation level在pycharm平台的解决方法
- ubuntu20.04安装Linux原生的微信,请注意,这不是wine版本的微信
- 使用Axios请求出现Provisional headers are shown
- PCL教程-PCLVisualizer可视化类的使用
- 怎样让计算机背景图片变大,电脑上如何使照片调成1寸??excel调整背景图片大小...
- getTime()方法在苹果系统的bug
- BZOJ - 4810 [Ynoi2017]由乃的玉米田 莫队算法 + bitset 大暴力