带你从0开发移动端京东首页（头部区域）

LeHan
830 阅读2分钟

京东移动端首页

1. 技术选型

先分析下网页

京东移动端

  • 方案： 采取单独执着移动页面方案
  • 技术： 采取流式布局

2. 搭建相关文件夹结构

image

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0,
    user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

    <!-- 引入css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 自己写的css -->
    <link rel="stylesheet" href="css/index.css">

4. body设置

市场一般最小320px宽度

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    /* 常用样式 */
    background: #fff;
    font-size: 14px;
    font-family: -apple-system,Arial, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
}

5. 头部区域布局

效果图：

image

首页代码

<body>
    <header class="app">
        <ul>
            <li>8</li>
            <li>10</li>
            <li>57</li>
            <li>25</li>
        </ul>
    </header>
</body>

css代码：

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


.app {
    height: 45px;
}

.app ul li {
    float: left;
    height: 45px;
    background-color: #333333;
}

.app ul li:nth-child(1) {
    width: 8%;

}
.app ul li:nth-child(2) {
    width: 57%;

}.app ul li:nth-child(3) {
    width: 10%;

}.app ul li:nth-child(4) {
    width: 25%;
    background-color: #F63515;

}

5.1 头部内容填充

效果图 ：

image

步骤说明：

  1. ul 里的四个小li 每人一个百分比，加个浮动在同一行
  2. 为他们设置高度
  3. 前面两个图片，后两个文字，都居中对齐
  4. 图片要垂直居中
  5. 第三个使用了子相父绝的定位
  6. 改改背景颜色
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    /* 居中对齐 */
    margin: 0 auto;
    /* 常用样式 */
    background: #fff;
    font-size: 14px;
    font-family: -apple-system,Arial, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


.app {
    height: 45px;
}

.app ul li {
    float: left;
    height: 45px;
    background-color: #232326;
    text-align: center;
    line-height: 45px;
    color: #fff;
    font-style: normal;
}

.app ul li:nth-child(1) {
    width: 8%;

}

.app ul li:nth-child(1) img {
    width: 16px;
    height: auto;
    /* 图片文字居中对齐 */
    vertical-align: middle;
}

.app ul li:nth-child(2) {
    width: 10%;

}

.app ul li:nth-child(2) img {
    width: 100%;
    height: auto;
    vertical-align: middle;

}



.app ul li:nth-child(3) {
    width: 57%;
    float: left;

}
.app ul li:nth-child(3) span {
    display: block;
    position: relative;
    font-size: 12px;
}

.app ul li:nth-child(3) span em:nth-child(1) {
    color: #fff;
    font-weight: 500;
    position: absolute;
    top: -9px; 
    left: 5px;
    font-style: normal;
}
.app ul li:nth-child(3) span em:nth-child(2) {
    color: #999;
    position: absolute;
    font-style: normal;
    top: 9px;
    left: 5px;
}

.app ul li:nth-child(4) {
    width: 25%;
    background-color: #CD2525;
}
avatar
文章
阅读
粉丝