search

博客列表 >使用Grid布局高仿淘宝首页PC端+移动端[完整html,css源码](1028)

使用Grid布局高仿淘宝首页PC端+移动端[完整html,css源码](1028)

高空中的云
高空中的云原创
2022年10月31日 11:02:38413浏览

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;}
上一条：微信健身房小程序开发源码设计方案下一条：2022.10.26第十课：flex容器与项目常用属性的学习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多