京东移动端页面布局(一)
时间:2022-06-22
本文章向大家介绍京东移动端页面布局(一),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
。
下面来逐步看看京东移动端页面是怎么编写构成的。
首先来看看京东的移动端页面,如下:
只要搜索京东,然后F12设置移动端浏览器显示,刷新一下浏览器就可以看到这个移动端的呈现方式的了。
本篇章不写太多,先来完成整体页面上中下三大部分的布局设置。
注意:微信展示问题
如果将这三个部分直接在body里面编写固定定位,这样下面的那部分会在微信出现无法点击的情况。 那么解决的办法就是写一个最大的div,将这里面的元素全部包裹起来,然后使用绝对定位来处理,这样就可以解决了。
准备初始化文档结构以及CSSJS
提交码云仓库,关于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
- ASP.NET 路由
- Kafka定时清除过期数据
- 腾讯高级副总裁郭凯天:打造腾讯智库分析互联网产业前沿问题
- Google Chrome 浏览器 开发者工具 使用教程
- 反向代理(Reverse Proxy)及 IIS 7 应用请求路由模块
- 2014腾讯“大数据连接的未来”高峰论坛在京召开
- 工作流、业务流程管理和SOA
- 面向对象设计的SOLID原则
- 用psake来简化自动化脚本的构建
- TESLA V100如何让质疑GPU的流言“失声”
- Web 前端性能优化相关内容解析
- Service Broker 无法工作的问题修复
- .NET代码快速转换成powershell代码
- 网站性能评分工具Yslow 使用教程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法