移动端布局-实战淘宝首页
HTML DOM 结构
<!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" /> <title>淘宝移动端首页布局顶部-页眉</title> <link rel="stylesheet" href="font_icon/iconfont.css" /> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/public.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <!-- 1. 页眉 --> <header> <a class="logo" href="https://m.taobao.com"><img src="images/taobao.png" alt="" /></a> <a class="search" href=""> <span>寻找宝贝店铺</span> <span>搜索</span> </a> <a href="" class="iconfont icon-qiandao-xuanzhong"></a> </header> <!-- 2. 主体 --> <main> <!-- 1. 顶部导航 --> <ul class="navs"> <li class="item"> <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>好口碑</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>头条</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">14.9</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">14.9</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">14.9</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">14.9</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">14.9</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">14.9</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">14.9</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">14.9</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">14.9</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">14.9</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">14.9</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">14.9</span> <span>123人购买</span> </div> </div> </li> </ul> </main> <!-- 3. 页脚 --> <footer> <a href="m.taobao.com" class="iconfont icon-taobao"></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>
public CSS
/* 页眉 */header,footer { height: 50px; /* 固定定位 */ position: fixed;}header { background-color: #f4f4f4; /* 定位空间 */ top: 0; left: 0; right: 0; /* z-index: 控制定位元素的显示层级 */ z-index: 1;}footer { background-color: #f4f4f4; /* 页脚与页眉相比，只要把top,改为 bottom */ bottom: 0; left: 0; right: 0;}main { /* background-color: yellow; */ min-height: 2000px; /* overflow: hidden; */ position: relative; top: 50px;}header { display: grid; grid-template-columns: 0.56rem 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.35rem; border-radius: 0.3rem; /* grid:整体 fiex:细节 */ display: flex; place-content: space-between; place-items: center;}header>a.search>span:first-of-type { padding-left: 0.1rem;}header>a.search>span:last-of-type { /* background-color: #ff5000; */ /* 渐变色：从左开始 */ background: linear-gradient(to left, #ff5000, #ffa000); color: white; padding: 0.05rem 0.2rem; border-radius: 0.3rem; margin-right: 0.02rem;}header>a.iconfont { color: #ff5000;}/* 页脚 */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-of-type { color: #f50; font-size: xx-large;}footer > a:first-of-type + a > span.iconfont { font-size: x-large;}
main CSS
/* 主体样式 */main { min-height: 2000px; overflow: hidden;}/* 主体 顶部导航 *//* 顶部导航，快速入口，商品列表的public style */main .navs,main .entry,main .list > item { background-color: #fff; border-radius: 0.1rem; margin-top: 0.08rem;}main .navs { display: grid; /* 水平5列等宽 */ grid-template-columns: repeat(5,1fr); gap: 0 10px;}main .navs .item { display: grid; place-items: center;}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 .title { grid-column: span 2; display: flex; place-items: center;}main .entry .item:nth-of-type(-n + 2){ border-bottom: 1px solid #dedede;}main .entry .item span { background-color: #f50; color: white; border-radius: 0.03rem; font-size: smaller; padding: 0 0.03rem; margin-left: 0.05rem;}/* 商品列表 */main .list { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 10px;}/* 商品图片圆角 */main .list .item img { border-radius: 0.1rem 0.1rem 0 0;}/* 商品描述 */main .list .item .desc { padding: 0.1rem;}/* 价格 */main .list .item .desc .iconfont { color: #f50;}main .list .item .price span:last-of-type { color: #bbb; font-style: x-small;}
