前言
在之前学了关于移动端的基础知识,接下来我们就需要运用这些知识来进行实际应用。
上才艺!看案例!
一、京东移动端页面
京东移动端的页面基本就是如上图
页面有顶部的导航栏、搜索栏、主体栏里面分成三个部分进行设计。
二、制作步骤
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 完成透明*/
* {