流式布局-京东项目1.采用流式布局流式布局，就是百分比布局，也称非固定像素布局。将盒子的宽度设置成百分比，根据屏幕的

1.采用流式布局

流式布局，就是百分比布局，也称非固定像素布局。
将盒子的宽度设置成百分比，根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动 web 开发使用的比较常见的布局方式。
注：制作过程中，需要定义页面的最大和最小支持宽度
- max-width 最大宽度（max-height 最大高度）
- min-width 最小宽度（min-height 最小高度）

2. 设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

3. 整体html结构

4. 设置常用初始化样式

body{
margin: 0 auto; 
min-width: 320px; 
max-width: 540px; 
background: #fff; 
font-size: 14px;
font-family:-apple-system, Helvetica, sans-serif; 
line-height: 1.5; 
color: #666;
}

5. 设置特殊样式

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

6. 制作提示内容，跳转app部分

搭建基本布局，使用ul,li结构

<div class="top-tips">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

给父盒子设置宽度为100%,高度写死为45px;设置行高为盒子高度，并设置背景颜色
给子元素设置浮动，水平居中和垂直居中，利用伪类:nth-child(n)对这4个部分的宽度设置百分比，li中的img需要缩放.

logo图片默认和文字的基线对齐，设置line-height是不能垂直居中的，还需要把图片在垂直方向上居中对齐，应该要加上vertical-align: middle;

.top-tips {
    height: 45px;
    width: 100%;
    line-height: 45px;
}
.top-tips ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    background-color: #333333;
    text-align: center;
    color: #fff;
}
.top-tips ul li:nth-child(1) {
    width: 8%;
}
.app ul li:nth-child(1) img {
    width: 10px;
}
.top-tips ul li:nth-child(2) {
    width: 10%;
}
.top-tips ul li:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
}
.top-tips ul li:nth-child(3) {
    width: 57%;
}
.top-tips ul li:nth-child(4) {
    width: 25%;
    background-color: #F63515;
}

7. 搜索区域

搭建基本布局，使用header标签+3个div盒子

<header class="search-box">
        <div class="search-btn"></div>
        <div class="search"></div>
        <div class="login"></div>
    </header>

父级盒子使用固定定位，top为45px，必须设置宽度为100%(不设置则脱标)，高度为44px,设置背景颜色
子级左右使用绝对定位，中间是自适应的.中间的盒子是一个标准流的盒子，盒子不设置宽度，默认与父级一样宽，父级是一个100%宽的盒子，父级盒子伸缩时，子盒子也跟着伸缩，最后将左右用margin设置，将两侧空出来，放大镜的图标用的是精灵图
二倍精灵图的做法：
- 在firework里面，把精灵图等比例缩放为原来的一半
- 根据大小，测量坐标
- 注意，代码里面background-size也要写：精灵图原来宽度的一半
- 不要保存firework里缩放的图，否则会修改原图

.search-box {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 44px;
    min-width: 320px;
    max-width: 640px;
}
.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
}
.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
.login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    color: #fff;
    line-height: 44px;
}
.search {
    position: relative;
    height: 30px;
    background-color: #fff;
    margin: 0 50px;
    border-radius: 15px;
    margin-top: 7px;
}

8. 主体内容部分

先建一个大盒子，把下面的所有内容包起来，再来一块块划分内容

<main class="content">
        <div class="banner"></div>
        <ul class="brand">
            <li>
                <a href="#"></a>
            </li>
            <li>
                <a href="#"></a>
            </li>
            <li>
                <a href="#"></a>
            </li>
        </ul>
</main>

banner背景

img插入的图片要进行缩放，让图片的宽度设置为100%
轮播图应该位于搜索的下面，将search部分包起来的盒子设置为固定定位，同时要设置min-width和max- width，宽度也要设置为100%

轮播图

建一个大盒子，大盒子的高度不用设置，大盒子里面是3个大小相等的盒子，每个盒子各占33.33%，并且设置浮动
大盒子的左上角和右上角设置 border-radius，我们将 border-radius写在了大盒子上，图片是没有变化的，要将图片也设置小圆角，在大盒子上设置 overflow: hidden;
图片默认底部有空白缝隙，要在img上设置vertical-align: middle

移动端导航栏部分

建一个大盒子，宽度、高度都不用设置，让内容自动撑开，一行上分为5个小块，每个各占20%，不设置高度，给它们设置浮动

nav {
    padding-top: 5px;
}
nav a {
    float: left;
    width: 20%;
    text-align: center;
}
nav a img {
    width: 40px;
    margin: 10px 0;
}
nav a span {
    display: block;
}

新人专享部分

设置一个大盒子，里面有2个链接，链接a中放img

<div class="new">
        <a href=""></a>
        <a href=""></a>
</div>

大盒子清除浮动，子级使用浮动，宽度各占50%，a img为块标签

总结回顾

清除点击高亮效果
- -webkit-tap-highlight-color:transparent;/*清除点击高亮效果*/
- 在移动端浏览器会遇见点击出现高亮的效果，如在某个项目不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。
所有盒子以内容边框开始计算（盒子内减）
- /*设置宽度以内容边框开始计算*/ -webkit-box-sizing: border-box; box-sizing: border-box;
- 在移动端通常使用的是百分比布局，那么这样的布局如果使用border或者padding或使容器的宽度超出屏幕的宽度产生滚动条。
- 解决方案：什么使用css3属性 box-sizing设置所有的盒子从边框开始计算宽度。
清除移动端默认的样式
- /*在移动端清除浏览器默认样式*/ -webkit-appearance: none;
- 在移动设备的浏览器当中表单一般会有默认的属性，通过border：none;outline:none;是无法完全清楚的，还是会有一些浏览器默认的属性，比如：内阴影，立体感…我们可以将属性 -webkit-appearance 这个属性指的是设置成 none;
最小宽度和最大宽度的限制 max-width: 640px; /在行业当中的移动端的设计图一般使用的是640px/ min-width: 320px; /在移动设备当中现在最小的尺寸320px/
Img的下间隙问题
```
<div>
<a href="#"></a>
<a href="#"></a>
</div>
```
- Img是行内块级元素它也会有默认的基线对齐。那么和文字一样也会距离底部有一定的间隙。又因为 a标签是inline-block的，框模型是：行内框。行内框没有包含图片的表现，所以要使img能像放进一个盒子一样，就应该使用块级框：比如：display:block;或者display:inline-block
结构性伪类选择器
- E:first-of-type匹配同类型中的第一个元素E。
- E:last-of-type匹配同类型中的最后一个元素E。
- E:nth-of-type(n) 匹配同类型中的第n个元素E。