京东移动端首页布局静态页面

最新推荐文章于 2023-10-31 11:55:43 发布

ChargerBot

最新推荐文章于 2023-10-31 11:55:43 发布

阅读量2.7k

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/weixin_39288299/article/details/105297604

版权

前端基础专栏收录该内容

22 篇文章 2 订阅

订阅专栏

涉及知识点：

静态页面
flex布局
二倍图
定位

代码实现：

index.html部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--移动端设置viewport-->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <!--引入公共样式-->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>京东首页移动端</title>
</head>

<body>
    <!------------ 顶部 ------------>
    <header>
        <a href="javascript:;" class="classify"></a>
        <form action="" class="search">
            <span>|</span>
            <input type="text" placeholder="请输入商品名称">
        </form>
        <a href="javascript:;" class="login">登录</a>
    </header>

    <!------------ 轮播图 ------------>
    <div class="banner">
        <!-- 图 -->
        <ul class="bannerImg">
            <li>
                <a href=""><img src="images/banner2.jpg"></a>
            </li>
            <li>
                <a href=""><img src="images/banner1.jpg"></a>
            </li>
            <li>
                <a href=""><img src="images/banner3.jpg"></a>
            </li>
            <li>
                <a href=""><img src="images/banner4.jpg"></a>
            </li>
            <li>
                <a href=""><img src="images/banner5.jpg"></a>
            </li>
        </ul>
        <!-- 点 -->
        <ul class="bannerPoint">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <!----------- 导航栏 ------------>
    <nav>
        <ul class="navUl">
            <li>
                <a href="javascript:;">
                    <img src="images/nav1.jpg">
                    <span>京东超市</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/nav2.jpg">
                    <span>数码电器</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/nav3.jpg">
                    <span>京东服饰</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/nav4.jpg">
                    <span>京东生鲜</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/nav5.jpg">
                    <span>京东到家</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/nav6.jpg">
                    <span>充值缴费</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/nav7.jpg">
                    <span>9.9元拼</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/nav8.jpg">
                    <span>领券</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/nav9.jpg">
                    <span>赚钱</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/nav10.jpg">
                    <span>全部</span>
                </a>
            </li>

        </ul>
    </nav>

    <!---------- 推荐模块 ------------>
    <div class="recommend">
        <a href="javascript:;">
            <img src="images/re3.png">
        </a>
        <a href="javascript:;">
            <img src="images/re2.png">
        </a>
        <a href="javascript:;">
            <img src="images/re1.png">
        </a>
    </div>

    <!---------- 新人专享模块 ------------>
    <div class="newUser">
        <a href="javascript:;"><img src="images/user1.png"></a>
        <a href="javascript:;"><img src="images/user2.png"></a>
    </div>

    <!-------- 京东快报模块 ---------->
    <div class="news">
        <a href="javascript:;" class="news_left">
            <img src="images/jdkb.jpg">
        </a>
        <div class="scrollNews">
            <a href="javascript:;">
                <span style="color: red; margin:0 10px;">最新</span>
                <span>哈哈哈哈哈哈哈哈哈哈拽人</span>
            </a>
        </div>
        <a href="javascript:;" class="news_right">更多 </a>
    </div>

    <!---------- 商品模块 ---------->
    <div class="goods">
        <a href="#" class="goodsTitle">
            <img src="images/goodsTitle.png">
        </a>
        <ul class="goodsContent">
            <li>
                <img src="images/good1.jpg" alt="">
                <a href="#">我是商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a>
            </li>
            <li>
                <img src="images/good2.jpg" alt="">
                <a href="#">我是商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a>
            </li>
            <li>
                <img src="images/good5.jpg" alt="">
                <a href="#">我是商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a>
            </li>
            <li>
                <img src="images/good4.jpg" alt="">
                <a href="#">我是商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a>
            </li>
            <li>
                <img src="images/good6.jpg" alt="">
                <a href="#">我是商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a>
            </li>
            <li>
                <img src="images/good7.jpg" alt="">
                <a href="#">我是商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a>
            </li>
        </ul>
    </div>

</body>

</html>

bash.css部分代码：

/*公共样式*/


/*1.样式重置*/

html,
body,
ul,
li,
img,
a,
p,
div,
form,
input {
    padding: 0;
    margin: 0;
    /*设置盒模型*/
    box-sizing: border-box;
    /*去除移动端特有的点击高亮效果*/
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: "微软雅黑", sans-serif;
    font-size: 14px;
    width: 100%;
    /*最大宽度*/
    max-width: 640px;
    /*最小宽度*/
    min-width: 320px;
    margin: 0 auto;
    background-color: #eee;
    border: 1px solid #ccc;
}

a,
a:hover {
    color: #666;
    /* 去除默认下划线 */
    text-decoration: none;
}

ul {
    list-style: none;
}

input {
    /*1.清除文本框获取焦点时默认的边框阴影*/
    outline: none;
    /*2.去除边框*/
    border: none;
    /*3.添加边框*/
    border: 1px solid #ccc;
}

index.css部分代码：

/*********** 顶部 ************/

header {
    position: fixed;
    /*设置为flex布局*/
    display: flex;
    height: 44px;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    z-index: 1;
}

.classify,
.login {
    width: 40px;
}

.login {
    color: #fff;
    line-height: 44px;
}

.classify::before {
    content: "";
    display: block;
    width: 22px;
    height: 18px;
    margin: 14px 0 0 15px;
    background: url(../images/jd-sprites.png) no-repeat 0 -30px;
    /* 二倍精灵图 */
    background-size: 200px auto;
}

.search {
    position: relative;
    background-color: #fff;
    flex: 1;
    margin: 5px 10px;
    border-radius: 15px;
}

.search::before {
    content: "";
    display: block;
    width: 20px;
    height: 15px;
    position: absolute;
    top: 9px;
    left: 11px;
    background: url(../images/jd-sprites.png) no-repeat 0 0;
    background-size: 200px auto;
}

.search::after {
    content: "";
    display: block;
    width: 20px;
    height: 15px;
    position: absolute;
    top: 10px;
    left: 50px;
    background: url(../images/jd-sprites.png) no-repeat -83px 0;
    background-size: 200px auto;
}

header .search span {
    position: absolute;
    top: 6px;
    left: 35px;
    color: #ccc;
}

header .search input {
    position: absolute;
    top: 0;
    left: 80px;
    height: 100%;
    width: 80%;
    border: none;
}


/*********** 轮播图 ***********/

.banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

ul.bannerImg {
    width: 500%;
}

.bannerImg li {
    float: left;
    display: block;
    width: 20%;
}

.bannerImg img {
    width: 100%;
}


/* 点 */

ul.bannerPoint {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
}

.bannerPoint li {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 1px solid #fff;
    float: left;
    margin-left: 10px;
    cursor: pointer;
    transition: all 0.4;
}

.bannerPoint li:hover {
    transform: scale(1.2);
    border: 3px solid #fff;
}


/* @keyframes bannerRun {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -1000px 0;
    }
} */


/************* 导航栏 **************/

.navUl {
    display: flex;
    flex-wrap: wrap;
}

.navUl li {
    flex: 20%;
}

.navUl li a {
    display: flex;
    /* 把主轴设置为y轴 */
    flex-direction: column;
    /* 沿侧轴方向居中对齐 */
    align-items: center;
}

.navUl li img {
    width: 50%;
    border-radius: 50%;
    margin: 10px auto;
}


/************* 推荐模块 **************/

.recommend {
    display: flex;
}

.recommend a {
    flex: 1;
}

.recommend a img {
    width: 100%;
}


/************* 新人专享模块 **************/

.newUser {
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 10px;
}

.newUser a {
    flex: 1;
}

.newUser a img {
    width: 100%;
}


/************* 京东快报模块 **************/

.news {
    position: relative;
    height: 30px;
    line-height: 30px;
    margin: 8px;
    background-color: #fff;
}

.news_left {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
}

.news_left img {
    width: 100%;
    height: 30px;
}

.news_right {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 10px;
    border-left: 1px solid #ccc;
}

.scrollNews {
    position: relative;
    top: 0;
    left: 25%;
}


/************* 商品模块 **************/

.goods {
    background-color: #fff;
}

.goodsTitle {
    width: 100%;
}

.goodsTitle img {
    width: 100%;
}

.goodsContent {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.goodsContent li {
    flex: 50%;
    width: 100%;
    padding: 0 20px;
}

.goodsContent li img {
    width: 100%;
    position: relative;
}

最终实现效果图：

在这里插入图片描述

ChargerBot

关注

1
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
京东移动端首页布局静态页面

涉及知识点：静态页面flex布局二倍图定位代码实现：index.html部分代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">  <meta name="viewport" ...
复制链接

扫一扫