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

---

前言

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

---

一、京东移动端页面

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

二、制作步骤

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 完成透明*/

* {