京东app页眉-推荐-页脚制作

作业内容：京东app首页，选择导航，页眉，页脚，秒杀，推荐等，任选二个组件完成即可

页眉，推荐，页脚代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JD home</title>
    <link rel="stylesheet" href="static/css/jd.css">
</head>
<body>
    <!-- 页眉 -->
    <header>
        <!-- 导航图标 -->
        <div class="menu iconfont icon-daohang"></div>
        <!-- 中间搜索框 -->
        <div class="search">
            <div class="logo">JD</div>
            <div class="zoom iconfont icon-sousuo"></div>
            <input class="words" type="text" name="search" value="超薄本" />
        </div>
        <!-- 登录链接 -->
        <div class="login"><a href="">登录</a></div>
    </header>
    <!-- 主体 -->
    <main>
        <h2>猜你喜欢</h2>
        <ul>
            <li class="item">
                <a href=""><img
                        src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/118759/27/18140/174299/5f639d55Eff2fb460/f0a383120faa5213.jpg!q70.dpg.webp"
                        alt=""></a>
                <p>100支长绒棉欧式北欧风轻奢四件套全棉纯棉床单床笠被套酒店三件套床上用品4 梦蓝银灰 1.8m床单款四件套(被套200*230cm)</p>
                <div class="price">
                    <div>￥ 498</div>
                    <div>看相似</div>
                </div>
            </li>
            <li class="item">
                <a href=""><img
                        src="https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/148010/28/8733/166712/5f65b4c5E8506b16c/71f1adfb1a49b10f.jpg!q70.dpg.webp"
                        alt=""></a>
                <p>超媛加绒加厚中长款打底衫女冬季新款显瘦大码女装上衣立领外穿连衣裙FF-A015-C#9916你 黑色 S</p>
                <div class="price">
                    <div>￥ 498</div>
                    <div>看相似</div>
                </div>
            </li>
            <li class="item">
                <a href=""><img
                        src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/150600/39/11576/322314/5fdf806bE968752a7/e96be941acbffd20.jpg!q70.dpg.webp"
                        alt=""></a>
                <p>芬腾 保暖内衣女士套装秋衣秋裤秋冬季新品棉质修身圆领少女棉毛衫长袖长裤打底衫女 浅紫（蕾丝领） M </p>
                <div class="price">
                    <div>￥ 498</div>
                    <div>看相似</div>
                </div>
            </li>
            <li class="item">
                <a href=""><img
                        src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/135532/8/9634/253738/5f59df91Ec8d59432/dafe418dc6f75762.jpg!q70.dpg.webp"
                        alt=""></a>
                <p>@潮牌许刘芒1970s紫外线变色高帮手绘帆布鞋女2020春秋款百搭ulzzang日系女生板鞋 黑色(高 帮款，阳光下变色时效8小时) 39</p>
                <div class="price">
                    <div>￥ 498</div>
                    <div>看相似</div>
                </div>
            </li>
        </ul>
    </main>
    <!-- 页脚 -->
    <footer>
        <div>
            <div class="iconfont icon-shouye"></div>
            <span>主页</span>
        </div>
        <div>
            <div class="iconfont icon-fenlei"></div>
            <span>分类</span>
        </div>
        <div>
            <div class="iconfont icon-jingxi"></div>
            <span>京喜</span>
        </div>
        <div>
            <div class="iconfont icon-gouwuche-01"></div>
            <span>购物车</span>
        </div>
        <div>
            <div class="iconfont icon-denglu"></div>
            <span>未登录</span>
        </div>
    </footer>
</body>
</html>

引入的 static/css/jd.css 样式

/* 导入初始化 css */
@import 'reset.css';
/*
导入7个字体图标
icon-shouye 首页
icon-gouwuche-01 购物车
icon-daohang 导航
icon-denglu 登录
icon-fenlei 分类
icon-jingxi 惊喜
icon-sousuo 搜索
*/
@import '//at.alicdn.com/t/font_2289282_a45l8mmz4j.css';
/* 页眉 */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: red;
    height: 4rem;
    /* flex 容器 */
    display: flex;
    /* 交叉轴居中 */
    align-items: center;
    z-index: 100;
}
/* 左边菜单按钮 */
header .menu {
    flex: 1;
    text-align: center;
    color: white;
}
/* 中间搜索框 */
header .search {
    flex: 6;
    display: flex;
    align-items: center;
    border-radius: 2em;
    background-color: white;
    height: 2.5rem;
}
/* logo */
header .search .logo {
    color: red;
    flex: 0 1 2em;
    font-size: 1.5rem;
    text-align: center;
}
/* 搜索图标 */
header .search .zoom {
    flex: 0 1 2em;
    text-align: center;
    border-left: 1px solid #ccc;
}
/* 输入框 */
header .search .words {
    border: none;
    outline: none;
    color: #bbb;
}
/* 右边登录链接 */
header .login {
    flex: 1;
    text-align: center;
}
header .login a{
    color: white;
    font-size: 1.2rem;
}
/* 主体 */
main {
    position: absolute;
    top: 4rem;
    left: 0;
    reight: 0;
    bottom: 4.5rem;
}
main h2 {
    text-align: center;
    margin: .5em 0;
}
main ul {
    /* 转flex容器 */
    display: flex;
    /* 主轴横向，交叉轴换行 */
    flex-flow: row wrap;
}
main ul .item {
    flex: 1 1 50%;
    padding: .5em;
}
main ul .item a img {
    width: 100%;
}
main ul .item p {
    font-size: 1.25rem;
    margin:.4em 0;
}
main ul .item .price {
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
}
main ul .item .price div:first-of-type {
    color:red;
    font-size: 1.4rem;
}
main ul .item .price div:last-of-type {
    background-color: #ddd;
    border-radius: 1em;
    padding: .5em;
}
/* 页脚 */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4.5rem;
    background-color: #eee;
    /* 转flex容器 */
    display: flex;
    /* 分散对齐 */
    justify-content: space-around;
    /* 交叉轴居中 */
    align-items: center;
}
footer > div {
    /* 将flex容器项目居中 */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

导入的 reset.css 样式是默认的

/* reset css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    list-style: none;
}
a {
    color: #7b7b7b;
    text-decoration: none;
}
body {
    background-color: #F6F6F6;
}
html {
    font-size: 10px;
}
/* 媒体查询 */
@media screen and (min-width: 480px) {
    html {
        font-size: 12px;
    }
}
@media screen and (min-width: 640px) {
    html {
        font-size: 14px;
    }
}
@media screen and (min-width: 720px) {
    html {
        font-size: 16px;
    }
}