仿制淘宝首页
效果图
代码如下
<!DOCTYPE html><html lang="en"><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"> <link rel="stylesheet" href="css/index.css"> <title>移动端首页布局</title></head><body> <!-- 页眉 --> <header> <a href="" class="logo"><img src="image/taobao.png" alt=""></a> <a href="" class="search"> <span>寻找宝贝店铺</span> <span>搜索</span> </a> <a href="" class="qiandao"><img src="image/qiandao.png"></a> </header> <!-- 主体 --> <main> <!-- 1。顶部导航 --> <ul class="navs"> <li class="item" onclick=""> <a href=""><img src="images/navs/tmxb.webp" alt="" /></a> <a href="">天猫新品</a> </li> <li class="item"> <a href=""><img src="images/navs/jrbk.webp" alt="" /></a> <a href="">今日爆款</a> </li> <li class="item"> <a href=""><img src="images/navs/tmgj.webp" alt="" /></a> <a href="">天猫国际</a> </li> <li class="item"> <a href=""><img src="images/navs/fzlx.webp" alt="" /></a> <a href="">飞猪旅行</a> </li> <li class="item"> <a href=""><img src="images/navs/tmcx.webp" alt="" /></a> <a href="">天猫超市</a> </li> <li class="item"> <a href=""><img src="images/navs/tbch.webp" alt="" /></a> <a href="">淘宝吃货</a> </li> <li class="item"> <a href=""><img src="images/navs/sqk.webp" alt="" /></a> <a href="">省钱卡</a> </li> <li class="item"> <a href=""><img src="images/navs/ltjb.webp" alt="" /></a> <a href="">领淘金币</a> </li> <li class="item"> <a href=""><img src="images/navs/alpm.webp" alt="" /></a> <a href="">阿里拍卖</a> </li> <li class="item"> <a href=""><img src="images/navs/fl.webp" alt="" /></a> <a href="">分类</a> </li> </ul> <!-- 2 快捷入口 --> <ul class="entry"> <li class="item"> <div class="title"> <h3>聚划算</h3> <span>品牌折扣</span> </div> <a href=""><img src="images/items/item-1.webp" alt="" /></a> <a href=""><img src="images/items/item-2.webp" alt="" /></a> </li> <li class="item"> <div class="title"> <h3>天天特卖</h3> <span>1元秒杀</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 class="item"> <div class="title"> <h3>有好货</h3> <span style="background-color: deepskyblue">好口碑</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 class="item"> <div class="title"> <h3>每日好店</h3> <span style="background-color: orange">特色</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> <!-- 3.商品列表 --> <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-renminbi_o">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-renminbi_o">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-renminbi_o">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-renminbi_o">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-renminbi_o">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-renminbi_o">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-renminbi_o">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-renminbi_o">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-renminbi_o">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-renminbi_o">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-renminbi_o">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-renminbi_o">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-renminbi_o">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-renminbi_o">288</span> <span>123人已购买</span> </div> </div> </li> </ul> </main> <!-- 页脚 --> <footer> <a href="" class="iconfont icon-taobao"></a> <a href="" class="iconfont icon-gouwuche"></a> <a href="" class="iconfont icon-wode"></a> </footer></body></html>
css相关文件
index.css
@import 'reset.css';@import 'public.css';@import 'style.css';@import '../font_icon/iconfont.css';
reset.css
*{margin: 0;padding: 0;box-sizing: border-box; }a{text-decoration: none;color: #555;}li{list-style: none;}html{ font-size: calc(100vw/3.75);}body{font-size:0.13rem ; color: #333;margin: auto;background-color: #f4f4f4;padding: 0 0.15rem;overflow-y: auto;}body img{width: 100%;height: 100%;}@media (max-width:320px) { html{ font-size: 85px; }}@media (min-width:640px) { html{ font-size: 170px; }}
public.css
header,footer{height: 50px;background-color: #fff;position: fixed;z-index: 9999; }header{top: 0;left: 0;right: 0;}footer{bottom: 0;left: 0;right: 0;}main{min-height: 2000px;overflow: hidden;position: relative;top: 50px;left: 0;right: 0; padding-bottom: 0.5rem;}header{ display: grid;grid-template-columns: 0.58rem 1fr 0.33rem; /*分成散列*/grid-auto-rows: 0.5rem;place-items: center;gap: 0.1rem;}header a.logo{padding-left: 0.1rem;}header > a.search{width: 100%;border: 2px solid #ff5000;height: 0.3rem;border-radius: 0.5rem;display: flex;place-content: space-between;place-items: center;}header > a.search span:first-child{padding-left: 0.1rem;}header > a.search span:last-of-type{background: linear-gradient(to left,#ff5000, #ffa000);padding: 0.03rem 0.15rem;color: #fff;margin-right: 0.02rem;border-radius: 0.5rem;}header > a.qiandao{color: #ff5000;font-size: large;}footer{border-top: 1px solid #ccc;display: grid;grid-template-columns: repeat(3,1fr);place-content: space-around;place-items: center;font-size: smaller;}footer >a{display: grid;place-items: center;}footer >a:first-child{color: #ff5000;font-size: 0.35rem;}footer >a {font-size: 0.2rem;}
style.css
main .navs,main .entry,main .list{background-color: #f2f2f2;border-radius: 0.1rem;margin-top: 0.08rem;}main .navs{display: grid;grid-template-columns: repeat(5,1fr);place-items: center;}main .navs .item{display: grid;place-items: center;gap: 0 0.5rem;}main .entry{display: grid;grid-template-columns: repeat(2,1fr);padding: 0.1rem;}main .entry .item{display: grid;grid-template-columns: repeat(2,1fr);padding: 0.1rem;}main .entry .item span{background-color: #ff5000;border-radius: 0.1rem;padding: 0 0.1rem;font-size: smaller;color: #fff;}main .entry .item:nth-of-type(-n+2){border-bottom:0.01rem solid #dedede;}main .entry .item .title{ grid-column: span 2; display: flex; place-items: center;}main .list{display: grid; grid-template-columns:repeat(2,1fr)}main .list .item{display: grid;padding: 0.05rem;}main .list .item img{border-radius: 0.1rem 0.1rem 0 0;}main .list .item .desc{padding: 0.1rem;font-size: smaller;}main .list .item .price .iconfont{color: #ff5500;font-size: smaller;}main .list .item .price span:last-of-type{color: #bbb; font-size: smaller;}
iconfont.css
@font-face { font-family: "iconfont"; /* Project id 3510297 */ src: url('iconfont.woff2?t=1657963012397') format('woff2'), url('iconfont.woff?t=1657963012397') format('woff'), url('iconfont.ttf?t=1657963012397') format('truetype');}.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.icon-qiandao-xuanzhong:before { content: "\e62c";}.icon-gouwuche:before { content: "\e652";}.icon-taobao:before { content: "\e660";}.icon-renminbi_o:before { content: "\eba2";}.icon-wode:before { content: "\e625";}
