仿京东移动端首页

演示截图

Html代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="static/css/index.css">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="static/icon-font/iconfont.css">
    <!-- 引入页眉 -->
    <link rel="stylesheet" href="static/css/header.css">
    <!-- 引入主体 -->
    <link rel="stylesheet" href="static/css/main.css">
    <!-- 引入正品直邮 -->
    <link rel="stylesheet" href="static/css/zp.css">
    <!-- 引入秒杀样式表 -->
    <link rel="stylesheet" href="static/css/ms.css">
    <!-- 引入推荐样式表 -->
    <link rel="stylesheet" href="static/css/tj.css">
    <!-- 引入页脚样式表 -->
    <link rel="stylesheet" href="static/css/footer.css">
    <!-- 引入四格样式表 -->
    <link rel="stylesheet" href="static/css/sg.css">
</head>
<body>
    <!-- 页眉 -->
    <div class="header">
        <!-- 菜单图标 -->
        <div class="menu iconfont icon-menu"></div>
        <div class="search">
            <div class="logo">JD</div>
            <div class="zoom iconfont icon-search"></div>
            <input class="words" type="text" value="" placeholder="MacBook Air 2020" />
        </div>
        <a href="#" class="login">登录</a>
    </div>
    <!-- 主体 -->
    <div class="main">
        <!-- 导航 -->
        <ul class="nav">
            <li>
                <a href="JavaScript:viod(0);"><img src="static/images/dh/dh1.png" /></a>
                <a href="">京东超市</a>
            </li>
            <li>
                <a href="JavaScript:viod(0);"><img src="static/images/dh/dh2.png" /></a>
                <a href="">数码电器</a>
            </li>
            <li>
                <a href="JavaScript:viod(0);"><img src="static/images/dh/dh3.png" /></a>
                <a href="">京东服饰</a>
            </li>
            <li>
                <a href="JavaScript:viod(0);"><img src="static/images/dh/dh4.png" /></a>
                <a href="">京东生鲜</a>
            </li>
            <li>
                <a href="JavaScript:viod(0);"><img src="static/images/dh/dh5.png" /></a>
                <a href="">京东到家</a>
            </li>
            <li>
                <a href="JavaScript:viod(0);"><img src="static/images/dh/dh6.png" /></a>
                <a href="">充值缴费</a>
            </li>
            <li>
                <a href="JavaScript:viod(0);"><img src="static/images/dh/dh7.png" /></a>
                <a href="">9.9拼</a>
            </li>
            <li>
                <a href="JavaScript:viod(0);"><img src="static/images/dh/dh8.png" /></a>
                <a href="">领券</a>
            </li>
            <li>
                <a href="JavaScript:viod(0);"><img src="static/images/dh/dh9.png" /></a>
                <a href="">借钱</a>
            </li>
            <li>
                <a href="JavaScript:viod(0);"><img src="static/images/dh/dh10.png" /></a>
                <a href="">PLUS会员</a>
            </li>
        </ul>
        <!-- 正品直邮 -->
        <ul class="zp">
            <li class="zpone">
                <a href="">正品直郵</a>
                <a href="javascript:viod(0);"><img src="static/images/zp/zp1.dpg" /></a>
            </li>
            <li class="hh">
                <a href="">来电好货</a>
                <a href="">3C大放价</a>
                <a href="javascript:viod(0);"><img src="static/images/zp/zp2.dpg" /></a>
            </li>
            <li class="gc">
                <a href="">国潮风尚</a>
                <a href="">国货正当时</a>
                <a href="javascript:viod(0);"><img src="static/images/zp/zp3.dpg" /></a>
            </li>
            <li>
                <a href="">都是你爱的</a>
                <a href="javascript:viod(0);"><img src="static/images/zp/zp4.dpg" /></a>
            </li>
        </ul>
        <!-- 秒杀活动 -->
        <div class="ms">
            <div class="ms-top">
                <div class="left">
                    <div class="title">京东秒杀</div>
                    <div class="notice">
                        <div class="tips">18点专场</div>
                        <div class="time">18:00:00</div>
                    </div>
                </div>
                <div class="right">更多秒杀</div>
            </div>
            <!-- 秒杀主体区 -->
            <ul class="ms-body">
                <li class="item">
                    <a href=""><img src="static/images/ms/ms1.dpg" /></a>
                    <div class="iconfont icon-rmb">338</div>
                    <div class="iconfont icon-rmb">558</div>
                </li>
                <li class="item">
                    <a href=""><img src="static/images/ms/ms2.dpg" /></a>
                    <div class="iconfont icon-rmb">6266</div>
                    <div class="iconfont icon-rmb">7399</div>
                </li>
                <li class="item">
                    <a href=""><img src="static/images/ms/ms3.dpg" /></a>
                    <div class="iconfont icon-rmb">1818</div>
                    <div class="iconfont icon-rmb">2199</div>
                </li>
                <li class="item">
                    <a href=""><img src="static/images/ms/ms4.dpg" /></a>
                    <div class="iconfont icon-rmb">379</div>
                    <div class="iconfont icon-rmb">430</div>
                </li>
                <li class="item">
                    <a href=""><img src="static/images/ms/ms5.dpg" /></a>
                    <div class="iconfont icon-rmb">1399</div>
                    <div class="iconfont icon-rmb">1799</div>
                </li>
                <li class="item">
                    <a href=""><img src="static/images/ms/ms6.dpg" /></a>
                    <div class="iconfont icon-rmb">4690</div>
                    <div class="iconfont icon-rmb">5990</div>
                </li>
            </ul>
        </div>
        <!-- 四格推荐 -->
        <div class="sige">
            <ul class="sige-top">
                <li class="item">
                    <a href="">
                        <div class="iie">
                            <img src="static/images/sg/1.dpg" />
                        </div>
                        <div class="green">白条6期免息</div>
                        <div class="title">珠宝钟表</div>
                    </a>
                </li>
                <li class="item">
                    <a href="">
                        <div class="iie">
                            <img src="static/images/sg/1.dpg" />
                        </div>
                        <div class="green">Apple大牌日</div>
                        <div class="title">手机礼遇节</div>
                    </a>
                </li>
                <li class="item">
                    <a href="">
                        <div class="iie">
                            <img src="static/images/sg/1.dpg" />
                        </div>
                        <div class="green">圣诞狂欢夜</div>
                        <div class="title">玩具乐器</div>
                    </a>
                </li>
                <li class="item">
                    <a href="">
                        <div class="iie">
                            <img src="static/images/sg/1.dpg" />
                        </div>
                        <div class="green">每满100减50</div>
                        <div class="title">图书圣诞购</div>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 推荐 -->
        <h2 class="title">猜你喜欢</h2>
        <ul class="tj">
            <li class="item">
                <a href=""><img src="static/images/tj/1.webp" /></a>
                <p>卡帝乐鳄鱼 CARTELO 男鞋英伦时尚一脚蹬套脚中老年爸爸商务休闲皮鞋男 6931 黑色 38</p>
                <div class="price">
                    <div class="iconfont icon-rmb">238</div>
                    <div>看相似</div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="static/images/tj/2.webp" /></a>
                <p>衣柜现代简约出租房钢管加粗加固加厚简易布衣柜家用卧室开门式 BX1安阁小鹿 宽85 (收藏加购优先发货)</p>
                <div class="price">
                    <div class="iconfont icon-rmb">349</div>
                    <div>看相似</div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="static/images/tj/1.webp" /></a>
                <p>卡帝乐鳄鱼 CARTELO 男鞋英伦时尚一脚蹬套脚中老年爸爸商务休闲皮鞋男 6931 黑色 38</p>
                <div class="price">
                    <div class="iconfont icon-rmb">238</div>
                    <div>看相似</div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="static/images/tj/1.webp" /></a>
                <p>卡帝乐鳄鱼 CARTELO 男鞋英伦时尚一脚蹬套脚中老年爸爸商务休闲皮鞋男 6931 黑色 38</p>
                <div class="price">
                    <div class="iconfont icon-rmb">238</div>
                    <div>看相似</div>
                </div>
            </li>
        </ul>
    </div>
    <!-- 页脚 -->
    <div class="footer">
        <div>
            <div class="iconfont icon-home"></div>
            <span>首页</span>
        </div>
        <div>
            <div class="iconfont icon-layers"></div>
            <span>分类</span>
        </div>
        <div>
            <div class="iconfont icon-kehuguanli"></div>
            <span>京喜</span>
        </div>
        <div>
            <div class="iconfont icon-shopping-cart"></div>
            <span>购物车</span>
        </div>
        <div>
            <div class="iconfont icon-user"></div>
            <span>我的</span>
        </div>
    </div>
</body>
</html>

CSS代码

页眉

.header {
    display: flex;
    align-items: center;
}
/* 登录按钮 */
.header .login {
    color: #fff;
    text-align: center;
    flex: 1;
    font-size: 1.4rem;
    text-decoration: none;
}
.header .menu {
    text-align: center;
    flex: 1;
    font-size: 2.5rem;
}
.header .search {
    display: flex;
    flex: 6;
    padding: 0.5rem;
    border-radius: 3rem;
    background-color: #fff;
}
.header .search .logo {
    color: #e43130;
    flex: 0 1 4rem;
    text-align: center;
    line-height: 2rem;
}
.header .search .zoom {
    color: #ccc;
    flex: 0 1 4rem;
    /* 分割线 */
    border-left: 1px solid;
    text-align: center;
    line-height: 2rem;
}
.header .search .words {
    flex: auto;
    border: none;
    outline: none;
    color: #aaa;
}

主体

.main .nav {
    display: flex;
    padding: 1rem;
    /* 允许换行 */
    flex-flow: row wrap;
    justify-content: space-between;
}
.main .nav img {
    height: 4rem;
    width: 4rem;
}
.main .nav li {
    /* 每一行显示5个，100%来分配，就是20% */
    flex: 1 1 20%;
    padding: 1rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

页脚

.footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
}
.footer>div {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.footer>div>.iconfont {
    font-size: 2rem;
}
.fonter>div>span {
    font-size: 1.2rem;
}

秒杀

.main .ms {
    background-color: #fff;
    padding: 1rem;
    margin: 1rem;
    border-radius: 1rem;
}
.main .ms .ms-top {
    display: flex;
    font-size: 1.3rem;
    height: 3rem;
    justify-content: space-between;
}
.main .ms .ms-top .left {
    display: flex;
}
.main .ms .ms-top .left .notice {
    font-size: 1.1rem;
    height: 2rem;
    border: 1px solid #e43130;
    border-radius: 2rem;
    margin-left: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main .ms .ms-top .left .notice .tips {
    background-color: #e43130;
    color: #fff;
    border-radius: 2rem;
    padding: 0.3rem 0.5rem;
}
.main .ms .ms-top .left .notice .time {
    padding: 0.3rem 0.5rem;
}
.main .ms .ms-top .right {
    color: #e43130;
}
/* 主体 */
.main .ms .ms-body {
    display: flex;
    justify-content: space-between;
}
.main .ms .ms-body img {
    height: 6.6rem;
    width: 6.6rem;
}
/* 秒杀价 */
.main .ms .ms-body .item div:first-of-type {
    color: #e43130;
    font-weight: bolder;
}
.main .ms .ms-body .item div:last-of-type {
    color: #666666;
    text-decoration: line-through;
    text-decoration-color: #666666;
}

四格

.main .sige {
    display: flex;
    color: #fff;
}
.main .sige .sige-top .item {
    background-color: #e43130;
    display: flex;
    max-height: 14rem;
    flex-flow: row wrap;
    border-radius: 1rem;
    padding: 0.5rem;
    margin: 0.5rem;
    justify-content: center;
    align-items: center;
    position: relative;
    flex: 1 1 25%;
}
.main .sige .sige-top .item .iie {
    background-color: #fff;
    min-height: 8rem;
    min-width: 8rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.8rem;
}
.main .sige .sige-top .item img {
    height: 100%;
    width: 100%;
    border-radius: 1rem;
}
.main .sige .sige-top {
    display: flex;
    flex: 1 1 25%;
    padding: 1rem;
}
.main .sige .sige-top .item div {
    display: flex;
    color: #fff;
    flex-flow: column wrap;
}
.main .sige .sige-top .item .green {
    background-color: #1fdae0;
    border-radius: 1rem;
    position: relative;
    text-align: center;
    bottom: 1.5rem;
}
.main .sige .sige-top .item .title {
    font-size: 1.5rem;
    position: relative;
    top: -1.2rem;
    display: flex;
}

猜你喜欢

.main .title {
    text-align: center;
    height: 4rem;
    color: #555;
    font-weight: 500;
}
.main .tj {
    font-size: 1rem;
    display: flex;
    /* 允许换行 */
    flex-flow: row wrap;
}
.main .tj .item {
    flex: 1 1 calc(50% - 2rem);
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    margin-left: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-radius: 1rem;
}
.main .tj .item img {
    width: 100%;
    height: 100%;
    /* border-radius: 1rem; */
}
.main .tj .item {
    padding: 1rem;
}
.main .tj .price {
    display: flex;
    justify-content: space-between;
}
.main .tj .price div:first-of-type {
    color: red;
}
.main .tj .price div:last-of-type {
    color: #666;
    background-color: #fcf5f5;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    padding: 0.2rem 1rem;
}

正品直邮

.main .zp {
    margin-top: 1rem;
    padding: 1rem;
    margin: 1rem;
    display: flex;
    background-color: #fff;
    border-radius: 0.5rem;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.main .zp img {
    height: 6.6rem;
    width: 6.6rem;
}
.main .zp li {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    flex: 1 1 25%;
}
.main .zp .zpone a:first-of-type {
    padding: 1rem;
    color: #222222;
    display: flex;
    align-self: flex-end;
}
.main .zp .hh a:first-of-type {
    font-size: 1.8rem;
    color: black;
    font-weight: bold;
}
.main .zp .hh a:nth-of-type(2) {
    margin-right: 1rem;
}
.main .zp .gc a:first-of-type {
    font-size: 1.8rem;
    color: black;
    font-weight: bold;
}
.main .zp .gc a:nth-of-type(2) {
    margin-right: 0.1rem;
}
.main .zp li:last-of-type a:first-of-type {
    display: flex;
    align-self: center;
    color: #222222;
}

批改老师：

天蓬老师

批改状态：合格

老师批语：思路是对的

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

值传递与引用传递、数组对象解构、bind,Call,apply、访问器、流程控制、三元运算

2021-01-06 01:59:18