淘宝首页丐版 - php学习 - php中文网博客

首页 > 博客列表 > 淘宝首页丐版
博主信息
博文 24
粉丝 0
访问量 17230
专题推荐
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
淘宝首页丐版
皮皮志
原创
525人浏览过
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <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>淘宝网首页</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3736335_39c47psekpn.css">
    <style>
        @import url('reset.css');
        body{
            background-color: #FF93C4;
        }
 header{
    margin: 0 auto;
    width: 1200px;
 }
    header .up{
        display: grid;
        background-color: #FF77B7;
        border: 1px solid #ff77b7;
        grid-template-columns: 100px 200px 200px 200px 200px 200px ;
        place-content:space-between ;
        gap: 10px;
        place-items: center;
    }
    header .up img{
        width: 100%;
    }
    header .bottom{
        border: 1px solid white;
        display: grid;
        background-color: white;
        grid-template-columns:240px 720px 240px;
        grid-auto-rows: 100px;
        place-content: center;
        place-items: center;
    }
     header .bottom .pic img{
        width: 30%;
        place-self: center;
        margin-left: 120px;
     }
     header .bottom .search [type='text'] {
        width: 740px;
        height: 40px;
        border: 1px solid #FF5000;
        border-radius: 40px;
        margin-top: 32px;
     }
     header .bottom .search button{
        height: 34px;
        width: 72px;
       border: none;
        color: #fff;
       font-size: 18px;
        font-weight: 700;
        border-radius: 40px;
        background-color: #FF5000;
        position: relative;
        left: 663px;
        bottom: 37px;
        cursor: pointer;
     }
     header .bottom .search .bb{
         position: relative;
         left: 25px;
         top: 60px;
     }
     header .bottom .search .keyword{
       position: relative;
     left: 50px;
     bottom: 28px;
     }
     header .bottom .search .keyword a{
       text-decoration: none;
       margin-right: 8px;
      color: #666666;
      font-size: 12px;
     } 
     header .bottom .search .keyword a:hover{
        color: red;
     }
     header .big{
        background-color: white;
        height: 400px;
        width: 1200px;
        display: grid;
        grid-template-columns: 265px 560px 260px;
        grid-template-rows: 40px 300px;
        place-content: space-between;
        padding: 35px 25px 0;
     }
     header .big .fl{
        grid-area: 1/1/3/2;
        background-color: #F7F9FA;
     }
     header .big .fl ul span{
        font-size: 18px;
        font-weight: 600;
        position: relative;
        top: 10px;
        left: 15px;
     }
     header .big .fl li{
        list-style: none;
        margin: 20px 40px;
     }
     header .fl li:hover{
      background-color: #ff5000;
     }
     header .big .fl li a{
        text-decoration: none;
        color: #666666;
     }
     header .big .tm{
        width: 850px;
        height: 40px;
        grid-area: 1/2/4/2;
        background-color: #F7F9FA;
        display: flex;
        place-items: center;
     }
     header .big .tm a{
        text-decoration: none;
        margin-left: 40px;
     }
     header .big .tm a:hover{
        color:#ff5000 ;
     }
     header .big .lb{
        width: 540px;
        height: 310px;
        grid-area:2/2/3/3;
     }
     header .big .lb img{
        width: 100%;
     }
     header .big .xx{
        grid-area: 2/3/2/4;
        height: 300px;
        width: 260px;
        background-color: #F7F9FA;
     }
     header .big .xx .tx{
        margin:0 auto;
        position: relative;
        top: 30px;
        left: 85px;
     }
     header .big .xx .tx img{
        border-radius: 40px;
     }
     header .big .xx .tx p{
        font: size 16px ;
        margin-top: 22px;
        color: #3C3C3C;
        font-weight: 400;
     }
     header .big .xx .btn{
        margin-top: 40px;
        height: 40px;
     }
     header .big .xx .btn button{
        line-height: 40px;
        width: 70px;
        border-radius: 40px;
        cursor: pointer;
        font-size: 16px;
        margin-left: 10px;
     }
     header .big .xx .btn button:first-of-type{
       background-color: #FF5900;
       color: white;
     }
     header .big .xx .btn button:nth-of-type(2){
        background-color: #FF8200;
        color: white;
     }
     header .big .xx .btn button:last-of-type{
        background-color: FFFFFF;
        color: #FF5000;
     }
     header .big .xx .xtb a{
      text-decoration: none;
      color: #3C3C75;
      text-align: center;
      margin: 15px 10px;
      font-weight: 500;
     }
     header .big .xx .xtb p{
     font-size: 10px;
     margin: 15px 1px;
     }
     header .big .xx .xtb{
         display: flex;
         margin-left:10px;
     }
     header .big .xx .rd a{
        text-decoration: none;
        font-size: 12px;
     }
     header .big .xx .rd a:first-of-type{
        border: 1px solid red;
        background-color: #FFEFEF;
        color: #FF5000;
     }
     header .big .xx .rd a:last-of-type{
        color: #666666;
     }
     main{
        width: 1200px;
        margin: 0 auto;
        background-color: white;
     }
     main .head-title{
        padding-top: 50px;
        margin-left: 25px;
     }
     main .head-title span {
        color: #111;
        font-weight: bold;
         font-size: 24px;
        line-height: 24px
     }
     main .head-title img{
        height: 20px;
        margin: 4px 0 0 6px;
     }
     main .list{
            display: grid;
            grid-template-rows: repeat(3,1fr);
            grid-template-columns: repeat(3,1fr);
            height: 600px;
            width: 1200px;
            gap: 10px;
        }
        main  .list .item-link{
            display: inline-block;
          width: 100%;
          height: 100%;
           padding: 11px;
        }
        main .img-wrapper img{
            width: 100%;
        }
        main  .list .img-wrapper{
            position: absolute;
width: 150px;
height: 150px;
overflow: hidden;
background-color: rgba(27, 23, 67, 0.03);
border-radius: 10px;
        }
        main .list .info-wrapper{
            height: 116px;
  margin-left: 162px;
  overflow: hidden;
}
main .list .info-wrapper .title{
    display: inline-block;
max-height: 46px;
margin: 6px 0 2px 0;
overflow: hidden;
color: #333;
font-size: 16px;
line-height: 23px
}
main .list .info-wrapper .tag-list{
    height: 20px;
  overflow: hidden;
}
main .item-link .price-value{
    margin-left: 162px;
color: #ff5000;
font-size: 18px;
}
main .item-link .info-wrapper .tag-list .tag-item{
    display: inline-block;
height: 20px;
margin-right: 6px;
padding: 0 4px;
color: #ff5000;
font-size: 12px;
line-height: 18px;
vertical-align: top;
border: 1px solid #ff5000;
border-radius: 3px;
}
    </style>
</head>
<body>
<header>
    <div class="up">
        <a href=""><img src="/images/tm.png" alt=""></a>
        <a href=""><img src="/images/1.png" alt=""></a>
        <a href=""><img src="/images/2.png" alt=""></a>
        <a href=""><img src="/images/3.png" alt=""></a>
        <a href=""><img src="/images/4.png" alt=""></a>
        <a href=""><img src="/images/5.png" alt=""></a>
    </div>
<div class="bottom">
 <a class="logo" href=""><img src="images/tb.png" alt=""></a>
<div class="search">
      <span class="bb">宝贝&nbsp&nbsp</span>
      <input type="text" placeholder="">
      <button>搜索</button>
      <div class="keyword">
        <a href="">新款连衣裙</a>
        <a href="">四件套</a>
        <a href="">潮流T恤</a>
        <a href="">时尚女鞋</a>
        <a href="">短裤</a>
        <a href="">半身裙</a>
        <a href="">男士外套</a>
        <a href="">墙纸</a>
        <a href="">行车记录仪</a>
        <a href="">新款男鞋</a>
      </div>
    </div>
 <a class="pic" href=""><img src="images/index.png" alt=""></a>
</div>
<div class="big">
    <div class="fl">
        <ul>
        <span>分类</span>
<li>
    <td><a href="">女装 /</a></td>
    <td><a href="">内衣 /</a></td>
    <td><a href="">奢侈品</a></td>
</li>
<li>
    <td><a href="">女鞋 /</a></td>
    <td><a href="">男鞋 /</a></td>
    <td><a href="">箱包</a></td>
</li>
<li>
    <td><a href="">美妆 /</a></td>
    <td><a href="">饰品 /</a></td>
    <td><a href="">洗护</a></td>
</li>
<li>
    <td><a href="">男装 /</a></td>
    <td><a href="">运动 /</a></td>
    <td><a href="">百货</a></td>
</li>
<li>
    <td><a href="">手机 /</a></td>
    <td><a href="">数码 /</a></td>
    <td><a href="">企业礼品</a></td>
</li>
<li>
    <td><a href="">家装 /</a></td>
    <td><a href="">电器 /</a></td>
    <td><a href="">车品</a></td>
</li>
<li>
    <td><a href="">食品 /</a></td>
    <td><a href="">生鲜 /</a></td>
    <td><a href="">母婴</a></td>
</li>
<li>
    <td><a href="">医药 /</a></td>
    <td><a href="">保健 /</a></td>
    <td><a href="">出口</a></td>
</li>
</ul>
    </div>
    <div class="tm">
        <a href="" style="color: #FF0036;">天猫</a> 
        <a href="" style="color: #FF0036;">聚划算</a>
        <a href="" style="color: #33C900;">天猫超市</a>
        <a href="" style="color: #333333;">司法拍卖</a>
        <a href="" style="color: #333333;">飞猪旅行</a>
        <a href="" style="color: #333333;">天天特卖</a>
        <a href="" style="color: #333333;">极有家</a>
        <a href="" style="color: #333333;">淘宝直播</a>
    </div>
    <div class="lb">
    <a href=""><img src="/images/lb.png" alt=""></a>
    </div>
    <div class="xx">
        <div class="tx">
        <a href=""><img src="/images/tx.jpg" alt=""></a>
        <p>HI!你好</p>
    </div>
    <div class="btn">
        <button>登录</button>
        <button>注册</button>
        <button>开店</button>
    </div>
    <div class="iconfont">
        <div class="xtb">
        <a class="icon-shoucang" href="">
            <p> 宝贝收藏</p>
        </a>
        <a class="icon-goumai" href="">
            <p> 买过的店</p>
        </a>
        <a class="icon-dianpu" href="">
            <p> 收藏的店</p>
        </a>
        <a class="icon-wodezuji" href="">
            <p> 我的足迹</p>
        </a>
        </div>
    </div>
    <div class="rd">
        <a href="">热点</a>
        <a href="">淘宝网疫情场景给卖家的指导手册</a>
    </div>
    </div>
</div>
</header>
<main>
    <h3 class="head-title">
<span>猜你喜欢</span>
<img src="/images/gxtj.png" alt="">
</h3>
<div class="list">
   <a href="" class="item-link">
    <div class="img-wrapper">
      <img src="//gw.alicdn.com/bao/uploaded/i4/128981385/O1CN01LjlDFT1M6NL8bQeOw_!!2-saturn_solar.png_300x300q90.jpg_.webp" >
    </div>
  <div class="info-wrapper" >
    <div class="title"><img src="//img.alicdn.com/imgextra/i1/O1CN01rHZjwm1kc1MDCvBIO_!!6000000004703-2-tps-38-20.png">意式岩板梳妆台简约现代小户型化妆桌北欧卧室轻奢收纳化妆台</div>
    <div class="tag-list">
        <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">送运费险</div>
        </div>
  </div>
  <div class="price-wrapper">
    <span class="price-value"><em>¥</em>5500</span>
    </div>
</a>
<a href="" class="item-link">
   <div class="img-wrapper">
     <img src="//gw.alicdn.com/bao/uploaded/i4/128981385/O1CN01LjlDFT1M6NL8bQeOw_!!2-saturn_solar.png_300x300q90.jpg_.webp" >
   </div>
 <div class="info-wrapper" >
   <div class="title"><img src="//img.alicdn.com/imgextra/i1/O1CN01rHZjwm1kc1MDCvBIO_!!6000000004703-2-tps-38-20.png">意式岩板梳妆台简约现代小户型化妆桌北欧卧室轻奢收纳化妆台</div>
   <div class="tag-list">
       <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">送运费险</div>
       </div>
 </div>
 <div class="price-wrapper">
   <span class="price-value"><em>¥</em>5500</span>
   </div>
</a>
<a href="" class="item-link">
   <div class="img-wrapper">
     <img src="//gw.alicdn.com/bao/uploaded/i4/128981385/O1CN01LjlDFT1M6NL8bQeOw_!!2-saturn_solar.png_300x300q90.jpg_.webp" >
   </div>
 <div class="info-wrapper" >
   <div class="title"><img src="//img.alicdn.com/imgextra/i1/O1CN01rHZjwm1kc1MDCvBIO_!!6000000004703-2-tps-38-20.png">意式岩板梳妆台简约现代小户型化妆桌北欧卧室轻奢收纳化妆台</div>
   <div class="tag-list">
       <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">送运费险</div>
       </div>
 </div>
 <div class="price-wrapper">
   <span class="price-value"><em>¥</em>5500</span>
   </div>
</a>
    </div>
</main>
</body>
</html>
代码展示
批改老师：
PHPz

批改状态：合格

老师批语：实现效果还不错
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
开学第一课 10.13

2022-10-13 23:16:31