HTML代码
<!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="font_icon/iconfont.css" /> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/header.css" /> <link rel="stylesheet" href="css/footer.css" /> <link rel="stylesheet" href="css/main.css" /> </head> <body style="height: 1500px"> <!-- 头部 --> <header> <!-- 顶部 --> <div class="top"> <div class="logo iconfont icon-shejiaotubiao-08"></div> <div class="search"> <div class="keys"> <span class="iconfont icon-fangdajing"></span> <span>寻找宝贝店铺</span> </div> </div> </div> <!-- 轮播图 --> <div class="slider"> <a href=""><img src="images/banner/banner1.jpg" alt="" /></a> </div> <!-- 导航 --> <ul class="nav"> <li class="item"> <a href=""><img src="images/nav/nav1.png" /></a> <a href="">天猫新品</a> </li> <li class="item"> <a href=""><img src="images/nav/nav2.png" /></a> <a href="">天猫新品</a> </li> <li class="item"> <a href=""><img src="images/nav/nav3.png" /></a> <a href="">天猫新品</a> </li> <li class="item"> <a href=""><img src="images/nav/nav4.png" /></a> <a href="">天猫新品</a> </li> <li class="item"> <a href=""><img src="images/nav/nav5.png" /></a> <a href="">天猫新品</a> </li> <li class="item"> <a href=""><img src="images/nav/nav6.png" /></a> <a href="">天猫新品</a> </li> <li class="item"> <a href=""><img src="images/nav/nav7.png" /></a> <a href="">天猫新品</a> </li> <li class="item"> <a href=""><img src="images/nav/nav2.png" /></a> <a href="">天猫新品</a> </li> <li class="item"> <a href=""><img src="images/nav/nav3.png" /></a> <a href="">天猫新品</a> </li> <li class="item"> <a href=""><img src="images/nav/nav4.png" /></a> <a href="">天猫新品</a> </li> </ul> </header> <!-- 主体 --> <main> <!-- 聚划算 --> <div class="top"> <div class="item jhs"> <div class="box"> <h3 class="title">聚划算</h3> <div class="desc"> <h4>品牌折扣</h4> <img src="images/items/item1.png" alt="" /> </div> </div> <div class="box"> <h3 class="title"> </h3> <div class="desc"> <h4>划算好货</h4> <img src="images/items/item2.png" alt="" /> </div> </div> <div class="box"> <h3 class="title">淘抢购</h3> <div class="desc"> <h4>限时半价</h4> <img src="images/items/item3.png" alt="" /> </div> </div> <div class="box"> <h3 class="title">天天特卖</h3> <div class="desc"> <h4>9.9包邮</h4> <img src="images/items/item4.png" alt="" /> </div> </div> </div> <div class="item right"> <div class="box"> <h3 class="title"> 淘宝直播 <span class="tag" style="background-color: red">LIVE</span> </h3> <div class="detail"> <div class="left"> <span class="title">好物传送门</span> <img src="images/items/item5.png" alt="" /> </div> <div class="right"> <img src="images/items/item6.png" alt="" /> </div> </div> </div> <div class="box"> <h3 class="title"> 有好货 <span class="tag" style="background-color: blue">品牌好物</span> </h3> <div class="detail"> <div class="left"> <span class="title">全民口碑推荐</span> <img src="images/items/item7.png" alt="" /> </div> <div class="right"> <img src="images/items/item8.webp" alt="" /> </div> </div> </div> </div> <div class="item right"> <div class="box"> <h3 class="title"> 每日好店 <span class="tag" style="background-color: orange">精选</span> </h3> <div class="detail"> <div class="left"> <span class="title">挖深藏的店</span> <img src="images/items/item5.png" alt="" /> </div> <div class="right"> <img src="images/items/item6.png" alt="" /> </div> </div> </div> </div> <div class="item right"> <div class="box"> <h3 class="title"> 哇哦视频 <span class="tag" style="background-color: orange">亲测</span> </h3> <div class="detail"> <div class="left"> <span class="title">粉丝都爱看</span> <img src="images/items/item11.png" alt="" /> </div> <div class="right"> <img src="images/items/item12.png" alt="" /> </div> </div> </div> </div> <!-- 淘宝头条 --> <div class="item footer"> <div class="title">淘宝头条</div> <div class="content"> <span class="type">评测</span> <span>专治镜头尴尬。。。。</span> </div> </div> </div> <!-- 商品列表 --> <div class="list"> <div class="title"> <img src="https://img.alicdn.com/tfs/TB1V2eQrKSSBuNjy0FlXXbBpVXa-966-114.png" /> </div> <ul class="unit"> <li class="item"> <div class="img"> <img src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp" alt="" /> </div> <div class="detail"> <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div> <div class="price"> <span class="iconfont icon-rmb">89</span ><span class="num">45人已购买</span> </div> </div> </li> <li class="item"> <div class="img"> <img src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp" alt="" /> </div> <div class="detail"> <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div> <div class="price"> <span class="iconfont icon-rmb">89</span ><span class="num">45人已购买</span> </div> </div> </li> <li class="item"> <div class="img"> <img src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp" alt="" /> </div> <div class="detail"> <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div> <div class="price"> <span class="iconfont icon-rmb">89</span ><span class="num">45人已购买</span> </div> </div> </li> <li class="item"> <div class="img"> <img src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp" alt="" /> </div> <div class="detail"> <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div> <div class="price"> <span class="iconfont icon-rmb">89</span ><span class="num">45人已购买</span> </div> </div> </li> <li class="item"> <div class="img"> <img src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp" alt="" /> </div> <div class="detail"> <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div> <div class="price"> <span class="iconfont icon-rmb">89</span ><span class="num">45人已购买</span> </div> </div> </li> <li class="item"> <div class="img"> <img src="//gw.alicdn.com/bao/uploaded/i2/1029692622/O1CN01QhCTWy1VEvEKiClVv_!!1029692622.jpg_320x320q90.jpg_.webp" alt="" /> </div> <div class="detail"> <div class="desc">商品描述商品描述<br />商品描述商品描述midk</div> <div class="price"> <span class="iconfont icon-rmb">89</span ><span class="num">45人已购买</span> </div> </div> </li> </ul> </div> </main> <!-- 底部 --> <footer> <div class="item active"> <a href="" class="iconfont icon-shejiaotubiao-44"></a> </div> <div class="item"> <a href="" class="iconfont icon-gouwuche"></a> <a href="">购物车</a> </div> <div class="item"> <a href="" class="iconfont icon-wodetaobao"></a> <a href="">我的淘宝</a> </div> </footer> </body></html>
样式重置CSS
/* 样式重置 */* { margin: 0; padding: 0; box-sizing: border-box;}/* 链接 */a { text-decoration: none; color: #555;}/* 列表 */li { list-style: none;}:root { font-size: calc(100vw / 3.75);}body { font-size: 0.12rem; color: #333; max-width: 750px; min-width: 320px; margin: auto; background-color: #f4f4f4;}@media screen and (max-width: 320px) { :root { font-size: 85px; }}@media screen and (min-width: 640px) { :root { font-size: 170px; }}
中间css
main { /* 相对定位 */ position: relative; top: calc(0.45rem + 1.25rem + 1.5rem); padding: 0.1rem; padding-bottom: 0.46rem;}main img { width: 100%; height: 100%;}main .top { background-color: #fff; border-radius: 0.1rem; min-height: 3rem; /* 3行2列布局 */ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.1rem; padding: 0.1rem;}/* 左上角聚划算 */main .top .item.jhs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.1rem;}main .top .item.jhs .box { display: grid; gap: 0.1rem;}main .top .item.jhs .box .desc { display: grid; background-color: rgb(243, 235, 236); border-radius: 0.1rem; padding: 0.1rem;}/* 右侧上下两组 */main .top .item.right { display: grid; gap: 10px;}main .top .item.right .box { display: grid;}main .top .item.right .box .title { grid-column: span 2;}main .top .item.right .box .title .tag { color: #fff; /* 字体正常 */ font-size: normal; padding: 1px; border-radius: 0.05rem; font-size: smaller;}main .top .item.right .box .detail { display: grid; grid-template-columns: repeat(2, 1fr);}main .top .item.right .box .detail .left { display: grid;}/* 淘宝头条跨两列 */main .top .item:last-of-type { grid-column: span 2; /* background-color: yellow; */}main .top .item.footer { display: grid; grid-template-columns: 0.6rem 1fr; padding: 00.11rem 0;}main .top .item.footer .type { background-color: rgb(238, 202, 206); color: darkorange; padding: 2px 5px; border-radius: 5px;}main .top .item.footer .title { font-size: larger; font-weight: bolder;}main .list { display: grid; place-content: center;}main .list .title { display: grid; place-content: center; place-items: center; margin-top: 0.2rem;}main .list .title img { width: 85%; height: 85%;}/* 产品列表 */main .list .unit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.2rem; font-size: 0.11rem; padding: 0.2rem 0rem;}main .list .unit img { width: 100%; height: 100%;}main .list .unit .item { display: grid; place-items: center; background-color: #fff; border-radius: 0.06rem;}main .list .unit .item .detail { display: grid; grid-template-rows: 0.4rem 0.2rem; gap: 0.1rem; margin-bottom: 0.1rem;}main .list .unit .item .detail .desc { font-size: small; margin: 0.1rem;}main .list .unit .item .detail .price { font-size: smaller;}main .list .unit .item .detail .price .iconfont { color: red;}main .list .unit .item .detail .price .num { margin-left: 0.08rem;}
