收藏
PHPz批改状态：合格
老师批语：移动端的页面最好是添加一个媒体查询
<!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>
/* 页眉 */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 {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;}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
