收藏
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"><link rel="stylesheet" href="../static/第13章/index2.css"><title>仿造移动端淘宝网首页部分</title></head><body><!-- *1.页眉 --><header><!-- *1淘宝logo --><a href="" class="logo"><img src="../static/images13/taobao.png" alt=""></a><!-- *2搜索框 --><a href="" class="search"><span>寻找宝贝店铺</span><span>搜索</span></a><!-- *3签到图标 --><a href="" class="iconfont icon-qiandao"></a></header><!-- *2.主体 --><main><!-- *1顶部导航 --><ul class="navs"><li class="item" onclick=""><a href=""><img src="../static/images13/navs/tmxb.webp" alt=""></a><a href="">天猫新品</a></li><li class="item" onclick=""><a href=""><img src="../static/images13/navs/jrbk.webp" alt=""></a><a href="">今日爆款</a></li><li class="item" onclick=""><a href=""><img src="../static/images13/navs/tmgj.webp" alt=""></a><a href="">天猫国际</a></li><li class="item" onclick=""><a href=""><img src="../static/images13/navs/fzlx.webp" alt=""></a><a href="">飞猪旅行</a></li><li class="item" onclick=""><a href=""><img src="../static/images13/navs/tmcx.webp" alt=""></a><a href="">天猫超市</a></li><li class="item" onclick=""><a href=""><img src="../static/images13/navs/tbch.webp" alt=""></a><a href="">淘宝吃货</a></li><li class="item" onclick=""><a href=""><img src="../static/images13/navs/sqk.webp" alt=""></a><a href="">省钱卡</a></li><li class="item" onclick=""><a href=""><img src="../static/images13/navs/ltjb.webp" alt=""></a><a href="">领淘金币</a></li><li class="item" onclick=""><a href=""><img src="../static/images13/navs/alpm.webp" alt=""></a><a href="">阿里拍卖</a></li><li class="item" onclick=""><a href=""><img src="../static/images13/navs/fl.webp" alt=""></a><a href="">分类</a></li></ul><!-- *快速入口 --><ul class="entry"><li class="item"><div class="title"><h3>聚划算</h3><span>品牌折扣</span></div><a href=""><img src="../static/images13/items/item-1.webp" alt="" /></a><a href=""><img src="../static/images13/items/item-2.webp" alt="" /></a></li><li class="item"><div class="title"><h3>天天特卖</h3><span>1元秒杀</span></div><a href=""><img src="../static/images13/items/item-3.webp" alt="" /></a><a href=""><img src="../static/images13/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="../static/images13/items/item-5.webp" alt="" /></a><a href=""><img src="../static/images13/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="../static/images13/items/item-7.webp" alt="" /></a><a href=""><img src="../static/images13/items/item-8.webp" alt="" /></a></li></ul><!-- *商品列表 --><ul class="list"><li class="item"><a href=""><img src="../static/images13/items/item-9.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-10.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-11.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-12.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-13.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-14.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-15.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-16.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-17.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-18.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-19.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-20.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-21.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li><li class="item"><a href=""><img src="../static/images13/items/item-22.webp" alt="" /></a><div class="desc"><a href="">商品描述商品描述商品描述商品描述商品描述</a><div class="price"><span class="iconfont icon-renminbi">288</span><span>123人已购买</span></div></div></li></ul></main><!-- *3页脚 --><footer><a href="" class="iconfont icon-shejiaotubiao-44"></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>
@import url(public2.css);@import url(reset2.css);@import url(../icon_font/font_icon6/iconfont.css);@import url(main2.css);
*{margin: 0;padding: 0;box-sizing: border-box;}/* *链接 */a{text-decoration: none;color: #555;}/* *列表 *//* *无小圆点 */li{list-style: none;}/* *移动端布局方案：rem+vw(这里还是1rem=100px) */html{font-size:calc(100vw/3.75);}body{/* *字体大小比原来的0.16rem要小一点 */font-size: 0.13rem;color: #333;/* *在body中居中 */margin: auto;/* *为body做一个浅灰色的背景 */background-color: #f4f4f4;padding: 0 0.15rem;/* *滚动条自动隐藏 */overflow-y: auto;}body img{width: 100%;}/* *当屏幕宽度小于320或大于640px时对文字大小作一个限制 */@media(max-width: 320px){html{font-size: 85px;}}@media (min-width: 640px){html{font-size: 170px;}}
header,footer{width: 375px;height: 50px;background-color: #f4f4f4;/* background-color: #f4f4f4; *//* *固定定位 */position: fixed;/* *把页眉与页脚的层级往上提一级，使之与main（主体）不在一个层级上，这样就不会互相干涉 */z-index: 100;}header{top: 0;left: 0;right: 0;}footer{bottom: 0;left: 0;right: 0;}header{/* *grid布局 */display: grid;/* *整个页眉分一行三列 */grid-template-columns: 0.58rem 1fr 0.33rem;/* *行高 */grid-auto-rows: 0.5rem;/* *每个项目在网格单元中垂直与水平居中 */place-items: center;/* *行间隙0，列间隙0.1rem */gap: 0 0.1rem;}header a.logo{/* *让logo与左面隔开一点 */padding-left: 0.1rem;}/* *搜索框的设置 */header>a.search{width: 100%;border: 2px solid #ff5000;height: 0.3rem;border-radius: 0.3rem;/* *flex布局 */display: flex;/* *两端对齐 */place-content: space-between;/* *项目在水平方向的交叉轴上居中对齐 */place-items: center;}/* *让搜索框第一个span标签离边框开一点 */header>a.search span:first-of-type{padding-left: 0.1rem;}/* *搜索框第二个span标签 */header>a.search span:last-of-type{background-color: #ff5000;background: linear-gradient(to left,#ff5000,#ffa000);color: white;/* *内边距上下与左右 */padding: 0.03rem 0.15rem;/* *右外边距 */margin-right: 0.01rem;border-radius: 0.3rem;}/* *签到按钮的设置 */header>a.iconfont{color: #ff5000;font-size: larger;}/* *页脚 */footer{border-top: 1px solid #ccc;display: grid;/* *分成3列，每列占3分之一 */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: #ff5000;font-size: 0.35rem;}
main{/* *最小高度2000px */min-height: 2000px;/* *溢出隐藏 */overflow: hidden;/* *由于页眉比主体高一级，故主体被页眉遮挡住，故主体main来个相对定位，并且向下偏移50px */position: relative;top: 50px;/* *防止最下面的商品被页脚遮挡 */padding-bottom: 0.6rem;}/* *主体导航，快速入口，商品列表用到的公共样式 */main .navs,main .entry,/* *商品列表下的各个商品 */main .list>.item{background-color: #FFF;border-radius: 0.1rem;margin-top: 0.08rem;}/* *1导航区 */main .navs{/* *grid布局 */display: grid;/* *这里分为一行5列，如果是10个项目自然会分成两行，故只能不用添加行数 */grid-template-columns: repeat(5,1fr);/* *垂直间隙0，水平间隙0.1rem */gap: 0 0.1rem;padding: 0.1rem;}/* *导航里边的项目再嵌套一个brid布局，目的是使项目里边的项目能够居中 */main .navs .item{display: grid;place-items: center;}/* *2快速入口 */main .entry{display: grid;/* *快速入口分2列 */grid-template-columns: repeat(2,1tr);padding: 0.1rem;}/* *快速入口里边的项目 */main .entry .item{display: grid;/* *快速入口里边的项目也是分2列 */grid-template-columns: repeat(2,1tr);padding: 0.1rem;}main .entry .item .title{/* *跨两列，再来个flex布局，再居中 */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 .title>span{background-color: #ff5000;color: white;border-radius: 0.05rem;font-size: smaller;padding: 0 0.03rem;/* *稍微移开一点 */margin-left: 0.05rem;}/* *3.商品列表 */main .list{/* *grid布局 */display: grid;/* *分两列，每列对半 */grid-template-columns: repeat(2,1fr);/* *行间隙0，列间隙0.1rem */gap: 0 0.1rem;}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: #f50;font-size: smaller;}main .list .item .price span:last-of-type{color: #bbb;font-size: smaller;}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
