淘宝页面模仿 - HTML学习 - php中文网博客

首页 > 博客列表 > 淘宝页面模仿
博主信息
博文 47
粉丝 0
访问量 31365
专题推荐
更多>
预览

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 只用grid-template-columns，会自动到下面 -->
    <!-- 文字的padding和盒子的padding -->
    <!-- 只用grid-template-columns，会自动到下面 -->
    <!-- 文字的padding和盒子的padding -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端首页-1-整体</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./font_ iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/main.css">
    <style>
          *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
body{
    /* 吸色器 */
    font-size: 0.13rem;
    padding: 0 0.15rem;
    margin: auto;
    background-color: #f4f4f4;
    color: #333333;
}
html{
    font-size: calc(100vw / 3.75);
}
@media (max-width:320px) {
    html{
        font-size: 85px;
    }
}
@media (min-width:640px) {
    html{
        font-size: 170px;
    }
}
header,footer{
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    background-color: #f4f4f4;
    display: grid;
    place-items: center;
    z-index: 100;
}
header{
    top: 0;
    grid-template-columns: 60px 1fr 30px;
    gap: 10px;
}
footer{
    bottom: 0;
    grid-template-columns: repeat(3,1fr);
}
/* 头部 */
header a{
    width: 100%;
}
header a img{
    width: 100%;
    padding-left: 0.1rem;
}
.icon-qianbao{
    font-size: 0.2rem;
    color: rgb(255, 80, 0);
    padding-right: 0.1rem;
}
.top-middle{
    display: flex;
    width: 100%;
    place-content: space-between;
    place-items: center;
    border: 2px solid rgb(255, 80, 0);
    padding: 2px 0;
    border-radius: 20px;
    color: rgb(93, 85, 85);
}
.top-middle span:nth-of-type(2){
    padding: 0.03rem 0.08rem;
    background: linear-gradient(to left, #ff5000, #ffa000);
    color: white;
    border-radius: 0.2rem;
    margin-right: 0.02rem;
}
/* 尾部 */
footer a{
    display: flex;
    flex-direction: column;
    place-items: center;
    color:rgb(255, 80, 0);
 }
 footer a:nth-of-type(1){
    font-size: 0.4rem;
 }
 footer a span:nth-of-type(1){
    font-size: larger;
 }
 main{
    background-color: #fff;
    min-height: 1500px;
    position: relative;
    top: 50px;
}
main .navs{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(5,1fr);
    place-content: center;
    gap: 0 0.1rem;
}
main .navs li{
    display: grid;
    place-items: center;
}
img{
    width: 100%;
}
main .middle{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    width: 100%;
    place-content: center;
    gap: 0.1rem;
 }
 main .middle li{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 0.2rem 0.8rem;
 }
 main .middle li div{
    grid-area: 1 / 1 /span 1 /span 2;
    display: flex;
 }
 main .middle li div span{
    padding: 0.01rem;
    background-color: rgb(255, 80, 0);
    border-radius: 0.08rem;
 }
 .list{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    place-content: center;
    margin-top: 0.2rem;
    gap: 0.1rem 0.1rem;
    padding-bottom: 50px;
 }
a{
    color: rgb(67, 66, 66);
}
main .list .item img {
    border-radius: 0.1rem 0.1rem 0 0;
  }
.price{
    display: flex;
    width: 1.5rem;
    place-content: space-between;
}
.price span{
    font-size: smaller;
}
    </style>
</head>
<body>
     <header>
        <a href=""><img src="./images/taobao.png" alt=""></a>
        <a href="" class="top-middle">
            <span>寻找宝贝店铺</span>
            <span>搜索</span>
        </a>
        <a class="iconfont icon-qianbao"></a>
     </header>
     <main>
         <ul class="navs">
            <li>
                <a href=""><img src="./images/navs/tmxb.webp" alt=""></a>
                <a href="">天猫新品</a>
            </li>
            <li>
                <a href=""><img src="./images/navs/jrbk.webp" alt=""></a>
                <a href="">今日爆款</a>
            </li>
            <li><a href="">
                <img src="./images/navs/tmgj.webp" alt=""></a>
                <a href="">天猫国际</a>
            </li>
            <li>
                <a href=""><img src="./images/navs/fzlx.webp" alt=""></a>
                <a href="">飞猪旅行</a>
            </li>
            <li>
                <a href=""><img src="./images/navs/tmcx.webp" alt=""></a>
                <a href="">天猫超市</a>
            </li>
            <li>
                <a href=""><img src="./images/navs/tbch.webp" alt=""></a>
                <a href="">淘宝吃货</a>
            </li>
            <li>
                <a href=""><img src="./images/navs/sqk.webp" alt=""></a>
                <a href="">省钱卡</a>
            </li>
            <li><a href="">
                <img src="./images/navs/ltjb.webp" alt=""></a>
                <a href="">领淘金币</a>
            </li>
            <li>
                <a href=""><img src="./images/navs/alpm.webp" alt=""></a>
                <a href="">阿里拍卖</a>
            </li>
            <li>
                <a href=""><img src="./images/navs/fl.webp" alt=""></a>
                <a href="">分类</a>
            </li>
         </ul>
         <ul class="middle">
            <li>
                <div>
                    <h3>聚划算</h3>
                    <span>品牌折扣</span>
                </div>
                <a href=""><img src="./images/items/item-1.webp"></a>
                <a href=""><img src="./images/items/item-2.webp" alt=""></a>
            </li>
            <li>
                <div>
                    <h3>天天特价</h3>
                    <span>一元秒杀</span>
                </div>
                <a href=""><img src="./images/items/item-3.webp" alt=""></a>
                <a href=""><img src="./images/items/item-4.webp" alt=""></a>
            </li>
            <li>
                <div>
                    <h3>有好货</h3>
                    <span>好口碑</span>
                </div>
                <a href=""><img src="./images/items/item-5.webp" alt=""></a>
                <a href=""><img src="./images/items/item-6.webp" alt=""></a>
            </li>
            <li>
                <div>
                    <h3>每日好店</h3>
                    <span>特色</span>
                </div>
                <a href=""><img src="./images/items/item-7.webp" alt=""></a>
                <a href=""><img src="./images/items/item-8.webp" alt=""></a>
            </li>
         </ul>
         <ul class="list">
            <li class="item">
              <a href=""><img src="images/items/item-9.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-10.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-11.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-12.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-13.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-14.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-15.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-16.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-17.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-18.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-19.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-20.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-21.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
            <li class="item">
              <a href=""><img src="images/items/item-22.webp" alt="" /></a>
              <div class="desc">
                <a href="">商品描述商品描述商品描述商品描述商品描述</a>
                <div class="price">
                  <span class="iconfont icon-qianbao">288</span>
                  <span>123人已购买</span>
                </div>
              </div>
            </li>
          </ul>
     </main>
     <footer>
        <a href="" class="iconfont icon-shejiaotubiao-44"></a>
        <a href="">
            <span class="iconfont icon-gouwuche"></span>
            <span>购物车</span>
        </a>
        <a href="">
            <span class="iconfont icon-wode"></span>
            <span>我的淘宝</span>
        </a>
     </footer>
</body>
</html>
批改老师：
PHPz

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
仿PHP中文网右侧布局

2022-07-18 14:56:59