![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：写的很好，加油
Collection
Collection
<!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>
@import 'reset.css';@import 'public.css';@import 'style.css';@import '../font_icon/iconfont.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;}}
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;}
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;}
@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";}
