菜单 搜索
首页 前端知识 用HTML和css写淘宝首页

用HTML和css写淘宝首页

2024-01-31 12:01:07 前端知识 前端哥 954 346 我要收藏

目录

HTML部分

css代码 

效果图 

HTML部分

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./flexible.js"></script>
    <link rel="stylesheet" href="./tu/font_4299446_jlvqz7brosb/iconfont.css">
    <script src="./tu/font_4299446_jlvqz7brosb/iconfont.js"></script>
    <link rel="stylesheet" href="./swiper/swiper-bundle.css">
    <link rel="stylesheet" href="./css/index.css">
 
</head>

<body>
    <header>
        <ul class="left">
            <li><a href="">中国大陆</a></li>
            <li><a href="./登录页.html" id="qing">亲，请登录</a></li>
            <li><a href="">免费注册</a></li>
            <li><a href="">手机逛淘宝</a></li>
            <li><a href="">网页无障碍</a></li>
        </ul>
        <ul class="right">
            <li><a href="" id="qing">淘宝网首页</a></li>
            <li><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-03f"></use>
                </svg><a href="">我的淘宝</a></li>
            <li><a href="">购物车</a></li>
            <li><a href="">收藏夹</a></li>
            <li><a href="">商品分类</a></li>
            <li><a href="">免费开店</a></li>
            <li><a href="">千牛卖家中心</a></li>
            <li><a href="">联系客服</a></li>
        </ul>
    </header>
    <div class="nav">
        <div class="r-img">
            <img src="./img/logo.webp" alt="">
        </div>

        <div class="input">
            <div class="case">
                <input type="text" class="ipt" placeholder="枕头">
                <button class="btn">搜索</button>
            </div>
            <ul class="list">
                <li><a href="" id="ju">聚划算</a></li>
                <li><a href="">玩具</a></li>
                <li><a href="">沐浴露</a></li>
                <li><a href="">枕头</a></li>
                <li><a href="">保鲜袋</a></li>
                <li><a href="">抽纸</a></li>
                <li><a href="">保温杯</a></li>
                <li><a href="">袜子</a></li>
                <li><a href="">手机壳</a></li>
                <li><a href="">拖鞋</a></li>
            </ul>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main">
        <!-- 侧边栏 -->
        <ul class="sidebar">
            <li>
                <div class="l-left"><img src="./img/im1.png" alt="" class="ren"><br>
                    女人</div>
                <div class="r-right"><a href="" id="smiler">连衣裙冬</a>
                    <a href="">牛仔裤</a>
                    <a href="">帽子</a>
                    <a href="">鞋子</a>
                    <a href="">长裙</a>
                    <a href="">半身裙</a>
                    <a href="">内搭</a>
                    <a href="">高跟鞋</a>
                </div>
            </li>
            <li>
                <div class="l-left"><img src="./img/im2.png" alt="" class="ren"><br>
                    男人</div>
                <div class="r-right">

                    <a href="">男鞋</a>
                    <a href="">潮男鞋</a>
                    <a href="">牛仔裤</a>
                    <a href="" id="smiler">打底衫</a>
                    <a href="">外套</a>
                    <a href="">电动车</a>
                    <a href="">短靴子</a>
                    <a href="">棒球服</a>

                </div>
            </li>
            <li>
                <div class="l-left"><img src="./img/im3.png" alt="" class="ren"><br>
                    数码</div>
                <div class="r-right">

                    <a href="">耳机</a>
                    <a href="">洗衣机</a>
                    <a href="">冰箱</a>
                    <a href="">键盘</a>
                    <a href="">护膝</a>
                    <a href="" id="smiler">笔记本</a>
                    <a href="">饮水机</a>
                    <a href="">空调</a>

                </div>
            </li>
            <li>
                <div class="l-left"><img src="./img/im4.png" alt="" class="ren"><br>
                    母婴</div>
                <div class="r-right">

                    <a href="">羽绒衣</a>
                    <a href="">卫衣</a>
                    <a href="">针织衫</a>
                    <a href="" id="smiler">笔袋</a>
                    <a href="">护膝</a>
                    <a href="">饼干</a>
                    <a href="">奶粉</a>
                    <a href="">餐椅</a>

                </div>
            </li>
        </ul>

        <!-- 轮播图 -->

        <div class="swiper clearfix">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/1-1.webp" alt="" id="web"></div>
                <div class="swiper-slide"><img src="./img/1-2.webp" alt="" id="web"></div>


            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>

        <script src="./swiper/swiper-bundle.js"></script>
        <script>
            var mySwiper = new Swiper('.swiper', {
                // direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay: true,
                // 如果需要滚动条
                // scrollbar: {
                //   el: '.swiper-scrollbar',
                // },
            })        
        </script>

        <!-- 主体右侧 -->
        <div class="wod">

            <img src="./img/img.png" alt="" class="slide">

        </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="cai">
        猜你喜欢
    </div>
    <table>
        <tr>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
        </tr>
        <tr>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
        </tr>
        <tr>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
        </tr>
        <tr>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
            <td><img src="./img/t1.webp" alt="" class="imgt">
                <p><span class="tian">天猫</span><span class="taidi">泰迪狗粮小型犬比熊专用..</span></p>
                <p class="month">月销量过万</p>
                <p>到手价<span class="num">￥28</span></p>
                <p>月销1万＋ <span class="number">￥20</span><span class="linqu">领取</span></p>
            </td>
        </tr>
    </table>

    <!-- 底部 -->
    <div class="footer">

        <div class="two">
            <ul class="two-3">

                <li>联系客服</li>
                <li>开放平台</li>
                <li>法律声明</li>
                <li>廉正举报</li>
                <li>Taobao.com版权所有2003-现在</li>
                <li>增值电信业务经营许可证:浙B2-20070195</li>
                <li>浙公网安备33010002000075号</li>

            </ul>
            <ul class="two-1">
                <li>阿里巴巴集团</li>
                <li>|</li>
                <li>淘宝网</li>
                <li>|</li>
                <li>天猫</li>
                <li>|</li>
                <li>聚划算</li>
                <li>|</li>
                <li>全球速卖通</li>
                <li>|</li>
                <li>阿里巴巴国际交易市场</li>
                <li>|</li>
                <li>1688│</li>
                <li>|</li>
                <li>阿里妈妈</li>
                <li>|</li>
                <li>飞猪</li>
                <li>|</li>
                <li>阿里云计算</li>
                <li>|</li>
                <li>AiOS</li>
                <li>|</li>
                <li>阿里通信</li>
                <li>|</li>
                <li>高德</li>
                <li>|</li>
                <li>UC</li>
            </ul>
            <ul class="two-2">
                <li>友盟</li>
                <li>|</li>
                <li>虾米|</li>
                <li>|</li>
                <li>钉钉</li>
                <li>|</li>
                <li>支付宝</li>
                <li>|</li>
                <li>达摩院</li>
            </ul>
        </div>

    </div>

</body>

</html>

css代码 

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
}

body {
    background-color: rgb(246, 246, 246);
}

html,
body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    overflow-y: auto;
}

/* 头部导航 */
header {
    width: 10rem;
    display: flex;
    justify-content: space-between;
}

.left {
    display: flex;
    width: 2.521rem;
    justify-content: space-between;

}

#qing {
    color: rgb(242, 67, 26);
}

.right {
    display: flex;
    width: 4.2017rem;
    justify-content: space-between;
}

.left>li>a {
    font-size: .1008rem;
    color: black;
}

.right>li>a {
    font-size: .1008rem;
    color: black;
}

/* 导航 */

/* logo */

.r-img {
    margin-left: .2521rem;
    margin-right: .4202rem;
    margin-top: .1681rem;
}

/* 搜索框 */
.input {
    margin-top: .1681rem;
}

.r-img>img {
    width: 1.0588rem;
    height: .4538rem;

}

.case {
    width: 5.7983rem;
    height: .3109rem;
    border-radius: .1555rem;
    border: 2px solid rgb(253, 63, 49);
    background-color: white;
    position: relative;
}

.ipt {
    width: 4.7395rem;
    height: .2185rem;
    outline: none;
    border: none;
    position: absolute;
    top: 1px;
    left: .084rem;
    font-size: .1008rem;

}


.btn {
    width: .6134rem;
    height: .2857rem;
    outline: none;
    border: none;
    border-radius: .1429rem;
    background-color: rgb(254, 79, 107);
    color: white;
    float: right;
    margin-top: .0168rem;
    font-size: .1092rem;

}

/* 搜索框下方导航 */
.nav {
    width: 10rem;
    height: 1rem;
    display: flex;
}

.list {
    display: flex;
    width: 3.3613rem;
    justify-content: space-between;
    font-size: .1008rem;

}

.list>li>a {
    color: rgb(110, 117, 121);
}

#ju {
    color: rgb(254, 79, 107);
}




/* 主体 */

.main {
    width: 10rem;
    height: 2.3529rem;
    /* background-color: aquamarine; */
    display: flex;
}

/* 侧边栏 */
.sidebar {
    width: 2.3529rem;
    float: left;
}

.sidebar>li {
    height: .5882rem;
    display: flex;
    text-align: center;
}

.r-right>a {
    font-size: .1008rem;
    margin-right: .084rem;
    color: rgb(110, 107, 107);
}

#smiler {
    color: rgb(255, 63, 154);
}

.l-left {
    font-size: .1008rem;
}

.r-right {
    display: flex;
    flex-wrap: wrap;
    width: 1.9748rem;
}

.image {
    width: 5.1261rem;
    height: 2.3529rem;
}

.image>img {
    width: 5.1261rem;
    height: 2.3529rem;
}


.ren {
    width: .3782rem;
    height: .1513rem;
}



/* 中间图片 */

.swiper {
    --swiper-theme-color: white;
    /* 设置Swiper风格 */
    --swiper-navigation-color: #eff2f0;
    /* 单独设置按钮颜色 */
    --swiper-navigation-size: .0833rem;
    /* 设置按钮大小 */
    width: 5.1261rem;
    height: 2.3529rem;
    background-color: cyan;
    float: left;


}

/* 图片大小 */
#web {
    width: 5.1261rem;
    height: 2.3529rem;
}


/* 主体右侧 */
.slide {
    width: 2.0084rem;
    height: 2.3529rem;

}

.wod {
    margin-left: .084rem;
    float: left;
}

/* 猜你喜欢 */
.cai {
    width: 10rem;
    height: .3529rem;
    font-size: .1513rem;
}

/* 商品 */
table {
    width: 10rem;
    border: 1px solid rgb(242, 242, 242);
    border-collapse: collapse;
}

table tr,
td {
    width: 1.8655rem;
    height: 2.8235rem;
    background-color: white;
    border: 1px solid rgb(242, 242, 242);
}

.imgt {
    width: 1.7563rem;
    height: 1.7647rem;
}

p {
    font-size: .1008rem;
    color: rgb(110, 117, 121);
    margin-top: .042rem;
    margin-left: .084rem;
}

span {
    font-size: .1176rem;
}

.tian {
    font-size: .1008rem;
    background-color: rgb(255, 0, 53);
    color: white;
}

.month {
    color: rgb(254, 57, 100);
    width: .5042rem;
    height: .1429rem;
    background-color: rgb(254, 238, 244);
}

.num {
    font-size: .1513rem;
    color: rgb(255, 0, 53);
}

.taidi {
    font-size: .1176rem;
    color: black;
}

.number {
    display: inline-block;
    font-size: .1176rem;
    color: white;
    width: .437rem;
    height: .2185rem;
    background-color: rgb(255, 0, 54);
    margin-right: .0168rem;
    text-align: center;
    margin-left: .3361rem;

}

.linqu {
    width: .3529rem;
    height: .2185rem;
    background-color: rgb(255, 0, 54);
    display: inline-block;
    font-size: .1176rem;
    color: white;
    text-align: center;

}

/* 底部 */
.footer {
    width: 10rem;
    margin-top: .1681rem;
}

.two {
    width: 8.2353rem;
    height: .7261rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: .5882rem;



}

.two-1>Li {
    font-size: .1008rem;

}

.two-1 {
    display: flex;

    justify-content: space-between;
    flex-wrap: wrap;

}

.two-2 {
    display: flex;

}

.two-2>li {
    font-size: .1008rem;
    margin-right: .084rem;
}

.two>li {
    font-size: 12px;
    margin-right: .084rem;
}

.two-3 {
    display: flex;
    justify-content: space-between;

}

.two-3>Li {
    font-size: .1008rem;

}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: .125rem;
}

效果图 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/886.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

初中生物新课标教师学习心得2000字

2024-02-12 01:02:47

2023年初中生物新课标教师学习心得 2000字

2024-02-12 00:02:17

2023年初中生物新课标教师学习心得 1500字

2024-02-12 00:02:37

2023年初中生物新课标教师学习心得1000字

2024-02-12 00:02:56

2023年初中生物新课标学习心得1000字

2024-02-12 00:02:27

孩子成绩很差，请写一份家长通知书

2024-02-12 00:02:18

我喜欢别人的老婆怎么办

2024-02-12 00:02:58

如何治疗hpv

2024-02-12 00:02:27

如何治疗灰指甲

2024-02-12 00:02:07

如何治疗前列腺炎

2024-02-12 00:02:42

大家推荐的文章
1

移动端css布局大全

2024-02-06 15:02:421000
2

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
3

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
4

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
5

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
6

如何利用浏览器测试跨域

2024-02-11 10:02:28998
7

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
8

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995
9

使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？

2024-02-06 15:02:59995
10

导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！