移动端开发案例-京东移动端首页

1.移动端技术选型

方案：单独制作移动页面方案
布局：流式布局

2.搭建相关文件夹结构

其中index.html是京东首页，index.css是自己写的样式，另外一个css初始化文件可以从http://necolas.github.io/normalize.css//下载保存到相应位置.
images主要是放置背景图，upload主要是放置一些产品图片

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

4.整体html结构

5.分析页面布局

移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位和移动进行布局，不同的是，移动端的布局是用百分比作为单位。
body初始化样式，

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

body必须先设置好，只有设置好了body后，才能写好里面的内容，body的宽度设置为100%后，里面的内容就默认和body一样宽了

5.1头部

html结构

  <!-- 头部 -->
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>

css样式

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

首先将高度写死，然后将li设置浮动，水平居中和垂直居中，利用.app ul li:nth-child(n)对这4个部分的宽度设置百分比，li中的img需要缩放.

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