京东移动端首页案例 - 墨染一生

View Post

京东移动端首页案例

1.准备工作

创建项目文件夹，创建以下相应文件夹

其中images存放背景图等不用经常更换的图片，例如背景，upload存放需要经常更好的图片，
css初始化
在index.html引入normalize.css

###2.body准备

点击查看代码

body {
    width: 100%;
    min-width: 320px;/*市面上最小的宽带*/
    max-width: 1080px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica , sans-serif;
    color: #666;
    line-height: 1.5;
}

3头部部分准备

3.1app准备

1.app布局
app准备四个列表，其宽度百分比分别为:8,10,57,25
代码

点击查看代码

.app {
    height: 45px;
}
.app ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li {
    float: left;
    height: 45px;
    background-color: #333;
}
.app ul li:nth-child(1) {
    width: 8%;
}
.app ul li:nth-child(2) {
    width: 10%;
}
.app ul li:nth-child(3) {
    width: 57%;
}
.app ul li:nth-child(4) {
    width: 25%;
    background-color: #F63515;
}

2.app内容

点击查看代码

/*app内容部分*/
<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>
/*app css部分*/
body {
    width: 100%;
    min-width: 320px;/*市面上最小的宽带*/
    max-width: 1080px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica , sans-serif;
    color: #666;
    line-height: 1.5;
}
.app {
    height: 45px;
}
.app ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li {
    float: left;
    height: 45px;
    background-color: #333;
    text-align: center;
    line-height: 45px;
    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;
}

效果