Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 使用Grid布局高仿淘宝首页PC端+移动端[完整html,css源码](1028)
Blogger Information
Blog 26
fans 0
comment 0
visits 12275
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
使用Grid布局高仿淘宝首页PC端+移动端[完整html,css源码](1028)
高空中的云
Original
416 people have browsed it

pc端效果图如下

全部完成,pc端大概花了7~9个小时.自我感觉,如果肯再花4~5个小时精修一下,还原度应该就差不多了…
如果再肯花1~2天时间,布局能更优雅和更合理
移动端是花了4个小时…哎~

目前遗留问题,

  • 部分字号混乱
  • 间距&对齐方
  • 内容丰富度

犹豫再三,就不跟同学们卷移动端的淘宝首页了[体力和空余时间不允许]…
卷TM的…
移动端需要注意的点,
轮播图+商品推荐,那里的定位是有一点点小技巧,觉得挺有意思

PC端


移动端

完整代码如下(压缩过排版的)

如果需要阅读或调试,可自行重新排列格式(在线工具)或编辑器”格式化”选项操作

pc端,html

  1. <!DOCTYPE html><html lang="zh-CN"><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>pc端淘宝首页</title><link rel="stylesheet" href="//at.alicdn.com/t/c/font_3737215_maxpvtohxgq.css"><link rel="stylesheet" href="css/pc.css"></head><body><header><div class="header_TxtNav"><ul class="txtNav_Left"><li><span>中国大陆</span><span class="iconfont icon-arrow-down"></span></li><li><span class="red">亲,请登录</span><span>免费注册</span></li><li><span>手机逛淘宝</span></li><li><span>网页无障碍</span></li></ul><ul class="txtNav_Right"><li><span>我的淘宝</span><span class="iconfont icon-arrow-down"></span></li><li><span class="iconfont icon-cart red"></span><span>购物车</span></li><li><span class="iconfont icon-shoucang"></span><span>收藏夹</span><span class="iconfont icon-arrow-down"></span></li><li><span>商品分类</span></li><li><span>免费开店</span></li><li><span>千牛卖家中心</span><span class="iconfont icon-arrow-down"></span></li><li><span>联系客服</span><span class="iconfont icon-arrow-down"></span></li></ul></div><div class="header_PinkBg"><div class="header_IMGNav"><a class="img_Logo"          href="https://pages.tmall.com/wow/a/act/tmall/35385/pha?spm=a21bo.jianhua.1112.1.5af911d9opNNdI&wh_bizStageId=8888&pha=true&disableNav=YES&wh_act_nativebar=0"><img src="images/img_logo.png" alt="" srcset=""></a><div class="img_List"><a><div class="titleDesc"><h3>图像音像</h3><p>避坑指南</p></div><div class="imgBanner"><img src="images/imgbannerP1.webp" alt="" srcset=""></div></a><a><div class="titleDesc"><h3>家装家居</h3><p>抢百元补贴</p></div><div class="imgBanner"><img src="images/imgbannerP2.webp" alt="" srcset=""></div></a><a><div class="titleDesc"><h3>潮酷数码</h3><p>20点抢半价</p></div><div class="imgBanner"><img src="images/imgbannerP3.webp" alt="" srcset=""></div></a><a><div class="titleDesc"><h3>大牌母婴</h3><p>买1送1</p></div><div class="imgBanner"><img src="images/imgbannerP4.webp" alt="" srcset=""></div></a><a><div class="titleDesc"><h3>教育乐器</h3><p>放心学放心买</p></div><div class="imgBanner"><img src="images/imgbannerP5.webp" alt="" srcset=""></div></a></div></div></div></header><aside><div class="aside_Box"><ul><li><span class="iconfont icon-xiaoxi"></span><span>消息</span></li><li><span class="iconfont icon-kefu"></span><span>消息</span></li><li><span class="iconfont icon-fankui"></span><span>反馈</span></li><li><span class="iconfont icon-jubao"></span><span>举报</span></li><li><span class="iconfont icon-huidingbu"></span><span>回顶部</span></li></ul></div></aside><section class="main"><div class="main_Content"><div class="main_Left"></div><div class="main_Right"></div><div class="main_Bg"><div class="main_Header"><a class="header_Logo" href="//www.taobao.com"><img src="images/logo.png" alt=""></a><div class="header_Search"><form class="search_Upper"><div class="search_Label"><span>宝贝</span><span class="iconfont icon-arrow-down"></span></div><input class="search_Input" type="text" placeholder="手机壳"><button class="search_Btn">搜索</button></form><div class="search_Bottom"><a href="#">新款连衣裙</a><a href="#">四件套</a><a href="#">潮流T恤</a><a href="#">时尚女鞋</a><a href="#">短裤</a><a href="#">半身裙</a><a href="#">男士外套</a><a href="#">墙纸</a><a href="#">行车记录仪</a></div></div><div class="main_Erweima"><p class="red">下载淘宝</p><img src="images/erweima.png" alt=""></div></div><div class="main_CateAccount"><div class="leftCate"><h2>分类</h2><ul class="cateList"><li><span class="iconfont icon-qunzi"></span><a href="#">女装</a><span>/</span><a href="#">内衣</a><span>/</span><a href="#">奢品</a></li><li><span class="iconfont icon-xiezi"></span><a href="#">女鞋</a><span>/</span><a href="#">男鞋</a><span>/</span><a href="#">箱包</a></li><li><span class="iconfont icon-meizhuang"></span><a href="#">美妆</a><span>/</span><a href="#">饰品</a><span>/</span><a href="#">洗护</a></li><li><span class="iconfont icon-nanzhuang"></span><a href="#">男装</a><span>/</span><a href="#">运动</a><span>/</span><a href="#">百货</a></li><li><span class="iconfont icon-shouji"></span><a href="#">手机</a><span>/</span><a href="#">数码</a><span>/</span><a href="#">企业礼品</a></li><li><span class="iconfont icon-weibiaoti2fuzhi13"></span><a href="#">家装</a><span>/</span><a href="#">电器</a><span>/</span><a href="#">车品</a></li><li><span class="iconfont icon-shipin"></span><a href="#">食品</a><span>/</span><a href="#">生鲜</a><span>/</span><a href="#">母婴</a></li><li><span class="iconfont icon-zu"></span><a href="#">医药</a><span>/</span><a href="#">保健</a><span>/</span><a href="#">进口</a></li></ul></div><div class="rightCate"><div class="rightCate_Top"><ul><li class="item">天猫</li><li class="item">|</li><li class="item">聚划算</li><li class="item">|</li><li class="item">天猫超时</li><li class="item">|</li><li class="item">司法拍卖</li><li class="item">|</li><li class="item">飞猪旅行</li><li class="item">|</li><li class="item">天天特卖</li><li class="item">|</li><li class="item">极有家</li><li class="item">|</li><li class="item">淘宝直播</li></ul></div><div class="rightCate_Bot"><a class="slider"><img src="images/slider.png" alt=""><div class="dots"><span></span><span></span><span></span><span></span><span></span></div></a><div class="account"><img src="images/user.jpg" alt=""><p>Hi!你好</p><div class="accountBtn"><a href="#" class="background-red">登录</a><a href="#" class="background-orange">注册</a><a href="#" class="border-orange orange background-white">开店</a></div><div class="linkGroup"><a href="#"><span class="iconfont icon-shoucang"></span><span>宝贝收藏</span></a><a href="#"><span class="iconfont icon-shangpin-xianxing"></span><span>买过的店</span></a><a href="#"><span class="iconfont icon-dianpu"></span><span>收藏的店</span></a><a href="#"><span class="iconfont icon-lishi"></span><span>我的足迹</span></a></div></div></div></div></div><div class="main_Products"><h2>猜你喜欢&nbsp;<small class="background-orange white">个性推荐</small></h2><ul><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li><li><a href="#"><img src="images/product1.webp" alt="" srcset=""><div class="productTxt"><div class="upperTxt"><p><span>天猫</span><span>双11抢先购</span>双面德绒冬季打底衫男长袖t恤2022新款中领款春秋半高领保暖上衣</p><span class="label">每300减50</span></div><div class="orange price"><span class="small">¥</span>10</div></div></a></li></ul></div><ul class="main_Info"><li><h4><span class="iconfont icon-guifandunpai"></span>规则与协议</h4><div class="links"><a href="">淘宝规则</a><a href="">退货退款流程</a><a href="">服务中心</a><a href="">更多特色服务</a><a href="">平台服务协议</a><a href="">规则意见征集</a></div></li><li><h4><span class="iconfont icon-bangzhu"></span>新手上路</h4><div class="links"><a href="">新手专区</a><a href="">24小时在线帮助</a><a href="">免费开店</a></div></li><li><h4><span class="iconfont icon-daifukuan"></span>付款方式</h4><div class="links"><a href="">快捷支付</a><a href="">信用卡</a><a href="">余额宝</a><a href="">蚂蚁花呗</a></div></li><li><h4><span class="iconfont icon-taobaotese"></span>淘宝特色</h4><div class="links"><a href="">手机旺旺</a><a href="">旺旺/旺信</a><a href="">大众评审</a></div></li></ul></div></div></section><footer class="pb-30"><div class="foot"><div class="ali_Links"><a href="">阿里巴巴集团</a><span>|</span><a href="">淘宝网</a><span>|</span><a href="">天猫</a><span>|</span><a href="">聚划算</a><span>|</span><a href="">全球速卖通</a><span>|</span><a href="">阿里巴巴国际交易市场</a><span>|</span><a href="">1688</a><span>|</span><a href="">阿里妈妈</a><span>|</span><a href="">飞猪</a><span>|</span><a href="">阿里云计算</a><span>|</span><a href="">AliOS</a><span>|</span><a href="">阿里通信</a><span>|</span><a href="">一淘</a><span>|</span><a href="">万网</a><span>|</span><a href="">高德</a><span>|</span><a href="">UC</a><span>|</span><a href="">友盟</a><span>|</span><a href="">阿里安全</a><span>|</span><br><a href="">大卖网</a><span>|</span><a href="">钉钉</a><span>|</span><a href="">支付宝</a><span>|</span><a href="">优酷</a><span>|</span><a href="">土豆</a><span>|</span><a href="">阿里健康</a><span>|</span><a href="">阿里影业</a><span>|</span><a href="">网商银行</a><span>|</span></div><div class="about_Links"><a href="">关于淘宝</a><a href="">营销中心</a><a href="">廉政举报</a><a href="">联系客服</a><a href="">开放平台</a><a href="">诚征英才</a><a href="">联系我们</a><a href="">隐私权政策</a><a href="">法律声明</a><a href="">知识产权</a><a href="">不当竞争举报</a><span>|</span><span>© 2003-现在 Taobao.com 版权所有</span></div></div></footer></body></html>

pc端css

  1. @import "reset.css";body{background-color:#f6f6f6!important;color:#3c3c3c}.red{color:#f22e00}.container{padding:0 360px}header{width:100%}header>.header_TxtNav{display:grid;grid-template-columns:repeat(5,1fr);height:100%;place-content:center;border-bottom:1px solid #eee;width:1190px;margin:0 auto}header>.header_TxtNav>ul>li>span{font-size:.1rem}header>.header_TxtNav>ul>li>span.iconfont{font-size:.25rem}.txtNav_Left{grid-area:1/1/1/3}.txtNav_Left li{float:left;margin-right:1rem}.txtNav_Right{grid-area:1/3/1/6;justify-self:right}.txtNav_Right li{float:left;margin-left:1rem}.txtNav_Right li:nth-last-of-type(2){padding-left:1rem;border-left:1px solid #ddd}header>.header_PinkBg{width:100%;height:100px;background-color:#ff72b5}header>.header_PinkBg>.header_IMGNav{background-color:#ff72b5;height:100px;width:1190px;margin:0 auto}header>.header_PinkBg>.header_IMGNav>.img_Logo{width:105px;padding:10px;float:left}.img_Logo>img{width:100%}header>.header_PinkBg>.header_IMGNav>.img_List{display:grid;width:calc(100% - 105px);grid-template-columns:repeat(5,1fr);gap:0 10px;align-items:center;padding:10px 0}.img_List>a{display:inline-flex;padding:12px 16px;color:#fff;align-items:center}.img_List>a:nth-of-type(1){background:url("../images/imgBanner1.png") no-repeat center}.img_List>a:nth-of-type(2){background:url("../images/imgBanner2.png") no-repeat center}.img_List>a:nth-of-type(3){background:url("../images/imgBanner3.png") no-repeat center}.img_List>a:nth-of-type(4){background:url("../images/imgBanner4.png") no-repeat center}.img_List>a:nth-of-type(5){background:url("../images/imgBanner5.png") no-repeat center}.img_List>a>.imgBanner,.img_List>a>.imgBanner>img{width:52px;height:52px}.img_List>a>.titleDesc{width:calc(100% - 52px)}.img_List>a>.titleDesc>h3{font-size:1rem;font-weight:normal}.img_List>a>.titleDesc>p{font-size:.5rem}aside>.aside_Box{background-color:#fff;position:fixed;right:0;top:30%;border-radius:10px;width:60px;z-index:1}aside>.aside_Box>ul{padding:20px 5px;box-shadow:-5px 5px 15px 0 rgba(168,168,168,0.25)}aside>.aside_Box>ul>li{margin-bottom:20px;text-align:center}aside>.aside_Box>ul>li:last-of-type{margin-bottom:0}aside>.aside_Box>ul>li>.iconfont{font-size:1.5rem;padding:0 4px;display:block}aside>.aside_Box>ul>li>span:nth-of-type(2){font-size:.8rem}.mlr-360{margin-left:360px;margin-right:360px}.main>.main_Content>.main_Left,.main>.main_Content>.main_Right{width:calc((100% - 1190px)/2);height:800px;position:absolute;top:124px}.main>.main_Content>.main_Left{background:url("../images/main_Left.png") no-repeat;left:0;background-size:100% 100%}.main>.main_Content>.main_Right{background:url("../images/main_right.png") no-repeat;right:0;background-size:100% 100%}.main>.main_Content{width:100%;width:1190px;margin:0 auto}.main_Bg{background-color:#fff;width:1190px;padding:24px 18px}.main_Header{height:88px;display:grid;grid-template-columns:190px auto 100px}.main_Header>a.header_Logo{display:block;align-self:center}.main_Header>a.header_Logo>img{width:142px;height:58px}.main_Erweima{width:72px;padding:5px;border:1px solid #eee}.main_Erweima>p{text-align:center;font-size:.6rem;line-height:1.2rem}.main_Erweima>img{width:62px}.header_Search{align-self:center}.search_Upper{border:1px solid #f22e00;border-radius:100px;padding:10px 20px;margin:0 56px 0 20px;height:45px}.search_Upper>.search_Label{line-height:25px;padding-right:10px;border-right:1px solid #ececec;width:72px;float:left}.search_Upper>.search_Input{border:0;width:calc(100% - 72px);padding-left:10px;line-height:25px;outline:0}.search_Upper>.search_Btn{padding:0 20px;line-height:40px;border-radius:100px;border:0;background:linear-gradient(270deg,#ff5000,#ffc000);color:#fff;position:relative;right:-18px;float:right;top:-34px;font-size:1.2rem}.search_Bottom{margin:5px 56px 0 40px}.search_Bottom>a{font-size:.8rem;color:#666;white-space:nowrap;margin-right:8px;line-height:1.5rem}.main_CateAccount{margin-top:30px;display:grid;grid-template-columns:270px auto;gap:15px}.leftCate,.rightCate_Top{background-color:#f7f9fa;border-radius:12px;float:left;padding:20px}.leftCate>h2{font-size:1.1rem;color:#111;line-height:1.5rem;letter-spacing:0}.leftCate>ul{margin-top:16px}.leftCate>ul>li{font-size:.9rem;font-weight:400;margin-bottom:18px}.leftCate>ul>li:nth-last-of-type(1){margin-bottom:0}.leftCate>ul>li>a{color:#666}.leftCate>ul>li>span.iconfont{padding:0;margin-right:12px}.leftCate>ul>li>span{width:7px;height:20px;padding:0 8px}.leftCate>ul>li>a:hover{color:#ff5000}.rightCate_Top{padding:12px 20px;width:100%;margin-bottom:15px}.rightCate_Top>ul{display:flex;justify-content:space-around}.rightCate_Top>ul>li{color:#333;font-weight:400}a.slider{display:block;float:left;height:315px}a.slider>img{width:564px;height:315px;border-radius:10px}a.slider>.dots{position:relative;bottom:34px;left:calc(50% - 60px)}a.slider>.dots>span{width:15px;height:15px;background-color:#fff;border-radius:50%;float:left;margin-right:5px}
  2. a.slider>.dots>span:nth-of-type(2){background-color:#f22e00}.rightCate_Bot>.account{width:297px;float:left;text-align:center;padding:20px 20px 0 20px}.rightCate_Bot>.account>img{border-radius:50%}.rightCate_Bot>.account>p{margin-top:22px}.rightCate_Bot>.account>.accountBtn{margin-top:13px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.rightCate_Bot>.account>.accountBtn>a{color:#fff;line-height:40px;border-radius:20px}.background-red{background-color:#f22e00}.background-orange{background-color:#ff5000}.background-white{background-color:#fff}.border-orange{border:1px solid #ff5000}.orange{color:#ff5000!important}.white{color:#fff!important}.linkGroup{display:grid;grid-template-columns:repeat(3,1fr);gap:.1rem;margin-top:10px}.linkGroup>a{color:#3c3c3c}.linkGroup>a>span.iconfont{font-size:2rem;padding:0 15px 5px 15px}.linkGroup>a>span{font-size:.8rem}.main_Products{margin-top:40px}.main_Products>h2{font-size:1.2rem;line-height:1.5rem;margin-right:5px;margin-bottom:20px}.main_Products>h2>small{font-weight:normal;padding:0 5px}.main_Products>ul{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.main_Products>ul>li{background-color:#f7f9fa;padding:11px;display:flex;border-radius:10px}.main_Products>ul>li>a{display:flex}.main_Products>ul>li:hover{border-color:#f22e00}.main_Products>ul>li>a>img{width:150px;border-radius:10px;float:left}.productTxt{padding:5px}.productTxt>.upperTxt>p{font-size:1rem;overflow:hidden;line-height:1.4rem;height:2.8rem;margin-bottom:5px}.productTxt>.upperTxt>p>span{background-color:#f22e00;margin-right:5px;font-size:.5rem;color:#fff;padding:2px 5px;border-radius:5px}.productTxt>.upperTxt{height:116px}.productTxt>.upperTxt>.label{background-color:#fff;color:#ff5000;border-color:#fab596;border:1px solid;padding:0 5px;font-size:.6rem}.price{font-size:1.1rem}.price>.small{font-size:.8rem}.main_Info{display:grid;grid-template-columns:repeat(4,1fr);gap:50px;color:#999;padding-top:40px;padding-bottom:20px}.main_Info>li>h4{color:#3c3c3c;margin-bottom:5px}.main_Info>li>h4>span.iconfont{font-size:2rem;color:#999;margin-right:12px}.main_Info>li>.links>a{color:#999;line-height:.21rem;font-size:.16rem;white-space:nowrap;font-weight:lighter;letter-spacing:normal;word-spacing:normal;margin-right:10px}footer{background-color:#fff;margin-top:20px;padding-bottom:50px;display:grid;grid-template-rows:max-content;width:100%}.foot{width:1190px;margin:0 auto;padding:24px 18px}.ali_Links{margin-top:10px;border-bottom:1px solid #ddd;height:84px;width:100%}.ali_Links>a{font-size:.5rem;color:#6c6c6c;white-space:nowrap}.ali_Links>span{font-size:.1rem;color:#6c6c6c;margin:0 2px}.about_Links>a{font-size:.5rem;color:#6c6c6c;margin-right:8px}.about_Links>span:nth-last-of-type(2){font-size:.5rem;color:#ddd;margin-right:20px}.about_Links>span:nth-last-of-type(1){font-size:.5rem;color:#9c9c9c}.pb-30{padding-bottom:30px}

移动端html

  1. <!DOCTYPE html><html lang="zh-CN"><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, user-scalable=no"><title>移动端淘宝</title><link rel="stylesheet" href="//at.alicdn.com/t/c/font_3737215_maxpvtohxgq.css"><link rel="stylesheet" href="css/mobile.css"></head><body><header><a class="logo" href="https://m.taobao.com"><img src="images/m_logo.png" alt="" srcset=""></a><a href="" class="search"><span>寻找宝贝店铺</span><span>搜索</span></a><a href=""><img src="images/m_sign.png" alt="" srcset=""></a></header><main><div class="iconNav"><a href="#"><img src="images/m_cate1.webp" alt="" srcset=""><p>天猫新品</p></a><a href="#"><img src="images/m_cate2.webp" alt="" srcset=""><p>天猫新品</p></a><a href="#"><img src="images/m_cate3.webp" alt="" srcset=""><p>天猫新品</p></a><a href="#"><img src="images/m_cate4.webp" alt="" srcset=""><p>天猫新品</p></a><a href="#"><img src="images/m_cate5.webp" alt="" srcset=""><p>天猫新品</p></a><a href="#"><img src="images/m_cate6.webp" alt="" srcset=""><p>天猫新品</p></a><a href="#"><img src="images/m_cate7.webp" alt="" srcset=""><p>天猫新品</p></a><a href="#"><img src="images/m_cate8.webp" alt="" srcset=""><p>天猫新品</p></a><a href="#"><img src="images/m_cate9.webp" alt="" srcset=""><p>天猫新品</p></a><a href="#"><img src="images/m_cate10.webp" alt="" srcset=""><p>天猫新品</p></a></div><div class="cubeNav"><div class="item"><h3>聚划算<small>品牌折扣</small></h3><img src="images/m_cube_1.webp" alt="" srcset=""><img src="images/m_cube_2.webp" alt="" srcset=""></div><div class="item"><h3>天天特卖<small>1元秒杀</small></h3><img src="images/m_cube_3.webp" alt="" srcset=""><img src="images/m_cube_4.webp" alt="" srcset=""></div><div class="item"><h3>有好货</h3><img src="images/m_cube_5.webp" alt="" srcset=""><img src="images/m_cube_6.webp" alt="" srcset=""></div><div class="item"><h3>每日好店<small>特色</small></h3><img src="images/m_cube_7.webp" alt="" srcset=""><img src="images/m_cube_8.webp" alt="" srcset=""></div></div><div class="slider"><img src="images/m_slider.webp" alt="" srcset=""><div class="dots"><span></span><span></span><span></span><span></span><span></span></div></div><div class="productList"><a></a><a><img src="images/m_product_2.webp"><p>这是一个占据两行位置的商品标题,多的部分不予显示</p><p><span>¥ 43.8</span><span>200+人已购买</span></p></a><a><img src="images/m_product_1.webp"><p>这是一个占据两行位置的商品标题,多的部分不予显示</p><p><span>¥ 43.8</span><span>200+人已购买</span></p></a><a><img src="images/m_product_3.webp"><p>这是一个占据两行位置的商品标题,多的部分不予显示</p><p><span>¥ 43.8</span><span>200+人已购买</span></p></a><a><img src="images/m_product_4.webp"><p>这是一个占据两行位置的商品标题,多的部分不予显示</p><p><span>¥ 43.8</span><span>200+人已购买</span></p></a><a><img src="images/m_product_5.webp"><p>这是一个占据两行位置的商品标题,多的部分不予显示</p><p><span>¥ 43.8</span><span>200+人已购买</span></p></a><a><img src="images/m_product_6.webp"><p>这是一个占据两行位置的商品标题,多的部分不予显示</p><p><span>¥ 43.8</span><span>200+人已购买</span></p></a><a><img src="images/m_product_7.webp"><p>这是一个占据两行位置的商品标题,多的部分不予显示</p><p><span>¥ 43.8</span><span>200+人已购买</span></p></a><a><img src="images/m_product_8.webp"><p>这是一个占据两行位置的商品标题,多的部分不予显示</p><p><span>¥ 43.8</span><span>200+人已购买</span></p></a><a><img src="images/m_product_9.webp"><p>这是一个占据两行位置的商品标题,多的部分不予显示</p><p><span>¥ 43.8</span><span>200+人已购买</span></p></a><a><img src="images/m_product_10.webp"><p>这是一个占据两行位置的商品标题,多的部分不予显示</p><p><span>¥ 43.8</span><span>200+人已购买</span></p></a></div></main><footer><div class="foot"><div class="foot_Btn"><a href="">登录</a><a href="">注册</a><a href="">手淘App</a><a href="">用户反馈</a></div><p>2018 浙B2-20080224<a class="service">服务中心</a></p></div><div class="footNav"><a href=""><img src="images/m_footIcon1.png"></a><a href=""><span class="iconfont icon-cart"></span><span>购物车</span></a><a href=""><span class="iconfont icon-taobaotese"></span><span>我的淘宝</span></a></div></footer></body></html>

移动端css

  1. *{  padding: 0;  margin: 0;  box-sizing: border-box;}@media screen and (max-width : 474px) {  html {    font-size: 100px;  }}@media screen and (min-width : 475px) and (max-width : 540px) {  html {    font-size: 104px;  }}@media screen and (min-width : 541px) and (max-width : 800px) {  html {    font-size: 120px;  }}@media screen and (min-width : 800px) {  html {    font-size: 160px;  }}header{  height: 0.5rem;  width: 100%;    position:fixed;  top: 0;  left: 0;  right: 0;  z-index: 999;}footer{  bottom:0;  left: 0;  right: 0;}main {  position: relative;  top: 0.5rem;}a {  text-decoration: none;  color: #000;  display: grid;}body {  background-color:#f4f4f4;  padding: 0 0.15rem;}header {    display: grid;    grid-template-columns: 0.58rem auto 0.33rem;  grid-auto-rows: 0.5rem;  place-items: center;  gap: 0.1rem;  padding: 0 0.15rem;  background-color: #f4f4f4;  width: 100%;}header a.logo {  align-self: center;}header a.logo img {  width: 0.56rem;}header a.search {  width: 100%;  border: 0.01rem solid orangered;  height: 0.35rem;  border-radius: 0.3rem;    display: flex;  place-content: space-between;  place-items: center;}header > a.search > span:first-of-type {  padding-left: 0.1rem;  font-size: 0.1rem;}header > a.search > span:last-of-type{    background: linear-gradient(to left,#ff5000, #ffc000);  color:#fff;  padding: 0.06rem 0.15rem;  border-radius: 0.3rem;  margin-right: 0.01rem;  font-size: 0.1rem;}header > a > a {  width: 0.33rem;}header > a > img {  width: 0.33rem;}.iconNav {  display: grid;  grid-template-columns: repeat(5,1fr);  margin: 0.15rem 0;  background-color: #fff;  border-radius: 0.1rem;  padding: 0.05rem;  gap: 0.05rem;  }.iconNav a img {  width:0.61rem;  height: 0.48rem;}.iconNav a p {  font-size: 0.13rem;}.cubeNav {  display: grid;  grid-template-columns: repeat(2,1fr);  grid-row: 0.8rem;  margin: 0.1rem 0;  background-color: #fff;  border-radius: 0.1rem;  padding: 0.05rem;}.cubeNav .item {  display: grid;  grid-template-columns: repeat(2,1fr);  position:relative;  padding: 0.1rem;  border: 1px solid #dddddd54;}.cubeNav .item:nth-of-type(1) {  border-top: none;  border-left:none;}.cubeNav .item:nth-of-type(2) {  border-top: none;  border-right:none;}.cubeNav .item:nth-of-type(3) {  border-bottom: none;  border-left:none;}.cubeNav .item:nth-of-type(4) {  border-bottom: none;  border-right:none;}.cubeNav .item h3 {  font-size: 0.15rem;  color: #111;  position: absolute;  left: 0.05rem;  top: 0.05rem;}.cubeNav .item small {  background-color: rgb(255, 66, 0);  margin-left: 0.02rem;  font-weight: lighter;  color:#fff;}.cubeNav .item img:nth-of-type(1){  width:0.63rem;  height: 0.63rem;  align-self: end;}.cubeNav .item img:nth-of-type(2){  width:0.8rem;  height: 0.8rem;}.slider {  width: calc(50vw - 0.2rem);  position:absolute;  z-index: 2;}.slider img {  width: 100%;    border-radius: 0.06rem;  float: left;}.dots {  position: relative;  bottom: 0.2rem;  float: left;  margin-left: calc((100% - 0.7rem + 0.04rem)/2);  }.dots span {  width: 0.1rem;  height: 0.1rem;  margin-right: 0.04rem;  background-color: #ffffff6b;  border-radius: 50%;  float: left;}.dots span:nth-of-type(3) {  background-color: aliceblue;}.productList {  display: grid;  grid-template-columns: repeat(2,1fr);  gap: 0.1rem;  grid-row: auto;  position: relative;  left: 0;  top: 0;}.productList a {  background-color: #fff;  border-radius: 0.06rem;}.productList a:first-of-type {  background-color: transparent;}.productList a img {  width: 100%;  border-radius: 0.06rem 0.06rem 0 0;}.productList a p:first-of-type {  font-size: 0.13rem;  padding: 0 0.08rem;  height: 0.4rem;  overflow: hidden;}.productList a p:nth-of-type(2) {  font-size: 0.14rem;  padding: 0.12rem 0.08rem 0.08rem 0.08rem;}.productList a p:nth-of-type(2) span {  font-size: 0.14rem;  height: 0.24rem;  }.productList a p:nth-of-type(2) span:first-of-type {  color: #ff5500;  margin-right: 0.1rem;}.productList a p:nth-of-type(2) span:nth-of-type(2) {  color: #999;  margin-right: 0.1rem;}footer {  width: 100%;  background-color: rgb(78, 82, 94);  margin-top: 1rem;  padding: 0.2rem 0.09rem 0.56rem;}.foot .foot_Btn {  display: grid;  grid-template-columns: repeat(4,1fr);  align-content: center;}.foot .foot_Btn > a {  border: 0.01rem solid rgb(66, 69, 77);  border-radius: 0.06rem;  color: rgb(195, 198, 202);  padding: 0;  margin: 0;  text-align: center;  max-width: 1.5rem;  line-height: 0.35rem;  height: 0.35rem;  font-size: 0.14rem;  background-color: rgb(85, 89, 101);}.foot p {  font-size: 0.12rem;  text-align: center;  margin-top: 0.25rem;  color:rgb(195, 198, 202);}.foot p > .service {  color:rgb(195, 198, 202);  margin-left: 0.05rem;  display: inline-block;}.footNav {  width: 100%;  position: fixed;  left: 0;  bottom:0;  height: 0.5rem;  background-color: #fff;  border-top: 1px solid #e7e7e7;  border-bottom: 1px solid #f8f8f8;  display: grid;  grid-template-columns: repeat(3,1fr);  place-items: center;  z-index: 999;}.footNav a {  text-align: center;}.footNav a img {  width: 0.36rem;  background-image: linear-gradient(90deg, #FF8002 0%, #FF5900 100%);  border-radius: 50%;}.footNav a span.iconfont {  font-size: 0.25rem;}.footNav a span:nth-of-type(2) {  font-size: 0.12rem;  color:#666;  margin: 0.02rem 0 0;}
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：效果实现的很好，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post