HTML+CSS实现淘宝首页（一）https://developer.aliyun.com/article/1382559
三、部分源代码如下：（如需要全部代码 关注我或者私信我评论区留言我发你们邮箱,原创不易，记得点赞和收藏哦）。
HTML部分源代码如下：
<!DOCTYPE html> <html> <head> <title>淘宝网-淘！我喜欢</title> <meta charset="utf-8"> <link rel="shortcut icon" href="logo.png" type="logo.png" /> <link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" type="text/css" href="第二页商品.css"> <link rel="stylesheet" type="text/css" href="第三页商品.css"> <link rel="stylesheet" type="text/css" href="轮播图.css"> <style> #junjie{ width:300px; height:200px; border-color: #000000; } </style> </head> <body> <div class="wrapper"> <!-- 导航条+ad --> <div class="top-nav-wrap"> <div class="top-nav"> <ul class="top-nav-l"> <li class="top-nav-menu china"> <span class="c-span">中国大陆</span> <span class="bg-pic xsj-pic"></span> </li> <li class="top-nav-menu login-sign"> <a href="登录.html" class="login">亲，请登录</a> <a href="注册.html" class="sign">免费注册</a> </li> <li class="top-nav-menu"> <a href="#">手机逛淘宝</a> </li> </ul> <ul class="top-nav-r"> <li class="top-nav-menu my-taobao"> <a href="#">我的淘宝</a> <span class="bg-pic xsj-pic"></span> </li> <li class="top-nav-menu shop-car"> <a href="购物车/demo.html "> <span class="bg-pic shopCar-pic"></span> <span>购物车</span> </a> <span class="bg-pic xsj-pic"></span> </li> <li class="top-nav-menu like"> <a href="#"> <span class="bg-pic like-pic"></span> <span>收藏夹</span> </a> <span class="bg-pic xsj-pic"></span> </li> <li class="top-nav-menu goods"> <a href="#">商品分类</a> </li> <li class="top-nav-menu cut-off"> <span>|</span> </li> <li class="top-nav-menu seller"> <a href="#">卖家中心</a> <span class="bg-pic xsj-pic"></span> </li> <li class="top-nav-menu customer"> <a href="#">联系客服</a> <span class="bg-pic xsj-pic"></span> </li> <li class="top-nav-menu web-nav"> <a href="#"> <span class="bg-pic web-nav-pic"></span> <span>网站导航</span> </a> <!--第二段--> <span class="bg-pic xsj-pic"></span> </li> </ul> </div> <!--五个小广告广告--> <div class="ad-wrap"> <div class="ad"> <a href=""><img src="图片/四个广告图.png"></a> </div> </div> </div> <!-- 搜索区域 --> <div class="search-wrap"> <div class="search-con"> <div class="logo-box"></div> <div class="search-box"> <div class="search-t"> <div class="search-tab"> <ul> <li class="select">宝贝</li> <li>天猫</li> <li>店铺</li> </ul> </div> <div class="search-panel"> <a href="#" class="sousuo"></a> <form action=""> <div class="btn"> <button class="submit"><a href="商品详细/index.html"> <font color="#fff">搜索</font> </a></button> </div> <div class="search-inp-box"> <div class="search-inp"> <!-- placeholder为灰色字体 --> <input type="text" name="" placeholder="小杰资源网"> </div> </div> </form> <a href="#" class="camera"></a> </div> </div> <div class="search-bl"> <a href="#" class="active">新款连衣裙</a> <a href="#">四件套</a> <a href="#">潮流T恤</a> <a href="#">时尚女鞋</a> <a href="#" class="active">短裤</a> <a href="#">半身裙</a> <a href="#">男士外套</a> <a href="#">墙纸</a> </div> </div> <div class="code-box"> <a href="#" class="phone">手机淘宝</a> <a href="#" class="code"></a> <a href="#" class="close">X</a> </div> </div> </div> <!-- 导航条 --> <div class="screen-nav"> <div class="screen-nav-con"> <h2>主题市场</h2> <ul> <li><a href="#">天猫</a></li> <li><a href="#">聚划算</a></li> <li><a href="#">天猫超市</a></li> </ul> <ul> <li><a href="#">|</a></li> <li><a href="#">淘抢购</a></li> <li><a href="#">电器城</a></li> <li><a href="#">司法拍卖</a></li> <li><a href="#">淘宝心选</a></li> <li><a href="#">兴农扶贫</a></li> </ul> <ul> <li><a href="#">|</a></li> <li><a href="#">飞猪旅行</a></li> <li><a href="#">智能生活</a></li> <li><a href="#">苏宁易购</a></li> <li><a href="#"><img src="img/小导航图.gif"/></a></li> </ul> </div> </div> <!-- 图片主体展示部分 --> <div class="screen-box"> <div class="main"> <div class="main-inner"> <div class="inner-left"> <ul> <div id="box11"> <li class=""> <a href="商品详细/index.html">女装</a> / <a href="商品详细/index.html">男装</a> / <a href="#">内衣</a> <div id="box22"> <a href="商品详细/index.html"> <img src="图片/分类1.png"/></a> </div> </li> </div> <div id="box111"> <li> <a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a> <div id="box222"> <img src="图片/分类2.png"/> </div> </li> </div> <div id="box4"> <li> <a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a> <div id="box44"> <img src="图片/分类3.png"/> </div> </div> </li> <li> <a href="#">家电</a> / <a href="#">手机</a> / <a href="#">数码</a> <span></span> </li> <li> <a href="#">美妆</a> / <a href="#">洗肤</a> / <a href="#">保养品</a> <span></span> </li> <li> <a href="#">珠宝</a> / <a href="#">眼睛</a> / <a href="#">手表</a> <span></span> </li> <li> <a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a> <span></span> </li> <li> <a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影频</a> <span></span> </li> <li> <a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a> <span></span> </li> <li> <a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a> <span></span> </li> <li> <a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a> <span></span> </li> <li> <a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家访</a> <span></span> </li> <li> <a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a> <span></span> </li> <li> <a href="#">办公</a> / <a href="#">GIY</a> / <a href="#">五金电子</a> <span></span> </li> <li> <a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a> <span></span> </li> <li> <a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a> <span></span> </li> </ul> </div> <!--轮播图--> <div class="inner-content"> <div id="box1"> </div> <div class="inner-mall"> <div class="head"> <img src="./img/tm.png" alt=""> <span class="tm">理想生活上天猫 </span> <a href="#"> <img src="./img/pic3.png" alt=""> </a> </div> </div> </div> <div class="inner-right"> <a href="#"> <img src="./img/pic1.png" alt=""> </a> <div class="hot"> <span>今日热卖</span> <a href="#"> <img src="./img/pic4.png" alt=""> </a> </div> </div> </div> <!--淘宝头条里面东西--> <div class="main-bottom"> <div class="content"> <div class="logo-box"></div> <a href="#"> <img src="./img/pic5.png"> <h4>扦插花卉不生根？教你3分钟学“高压”</h4> <p>喜欢养花的人越来越多，想必很多花友经常会去花店或者花卉市场买一些绿植盆栽养在家里，当然随着养花的经验越来越足。</p> </a> </div> </div> </div> <!--网页里面登录 注册 等--> <div class="col-right"> <div class="member"> <div class="member-head"> <div class="head"> <a href="#"></a> </div> <span class="info">hi!您好</span> <p> <a href="#" class="icon"> <span></span> 领淘金币抵钱 </a> <a href="#" class="club"> <span></span> 会员俱乐部 </a> </p> </div> <div class="member-foot"> <a href="登录.html" class="login">登录</a> <a href="注册.html">注册</a> <a href="#">开店</a> </div> </div> <div class="message"> <a href="#">网上有害信息举报 <span></span> </a> </div> <div class="notice"> <div class="title"> <ul> <li><a href="#">公告</a></li> <li><a href="#">规则</a></li> <li><a href="#" class="active">论坛</a></li> <li><a href="#">安全</a></li> <li><a href="#">公益</a></li> </ul> </div> <div class="content"> <ul> <li><a href="#" class="active">阿里88VIP群益在升级</a></li> <li><a href="#">飞猪加入阿里生活圈</a></li> <li><a href="#">天猫上线轻松换</a></li> <li><a href="#">盲盒背后的千万级市场</a></li> </ul> </div> </div> <div class="module"> <ul> <li> <a href="#"> <span class="icon1"></span> <p>冲话费</p> </a> </li> <li> <a href="#"> <span class="icon2"></span> <p>旅行</p> </a> </li> <li> <a href="#"> <span class="icon3"></span> <p>车险</p> </a> </li> <li> <a href="#"> <span class="icon4"></span> <p>游戏</p> </a> </li> <li> <a href="#"> <span class="icon5"></span> <p>彩票</p> </a> </li> <li> <a href="#"> <span class="icon6"></span> <p>电影</p> </a> </li> <li> <a href="#"> <span class="icon7"></span> <p>酒店</p> </a> </li> <li> <a href="#"> <span class="icon8"></span> <p>理财</p> </a> </li> <li> <a href="#"> <span class="icon9"></span> <p>找服务</p> </a> </li> <li> <a href="#"> <span class="icon10"></span> <p>演出</p> </a> </li> <li> <a href="#"> <span class="icon11"></span> <p>水煤电</p> </a> </li> <li> <a href="#"> <span class="icon12"></span> <p>火车票</p> </a> </li> </ul> </div> <!--阿里APP小应用--> <div class="ali"> <h4 class="zt">阿里App <a href="#" class="many">更多></a> </h4> <ul> <li><a href="#"> <img src="tb.png" class="tp" alt="" /></a> </div> </div> </div> <!--第二页商品详细--> <!--选择器跳转第二页商品.css--> <div class="layer clearfix"> <div class="layer-inner clearfix"> <div class="tbh-discover-goods J_Module on"> <div class="goods-inner"> <h3 class="goods-hd mod-hd com-hd"> <img class="mlogo fl" src="小图标/有好货-148-48.png" title="有好货"> <p> <span class="subtitle ">与品质生活而不遇</span> </p> <span class="tb-fn clearfix"></span> </h3> <ul class="list clearfix goods-list"> <a href="商品详细/index.html" role="listitem" aria-posinset="0" aria-setsize="6"> <!--第一个商品--> <div class="img-wrapper"> <img class="a-all" src="小图标/sp15.png"> </div> <div class="info"> <h4 id="dg-item-tl-0" class="a-all">耐克短袖男2019夏季</h4> <p>耐克短袖男2019夏季新款纯棉宽松运动体恤休闲T恤半袖AR5005-101</p> <p class="extra"> <span class="tb-ifont"></span> 5958 人说好 </p> </div> </a> <a href="" role="listitem" aria-posinset="0" aria-setsize="6"> <div class="img-wrapper"> <img class="a-all" src="小图标/sp14.png" > </div> <div class="info"> <h4 id="dg-item-tl-1" class="a-all">宽松日系连帽男士卫衣</h4> <p>宽松日系连帽男士卫衣新款长袖男装国潮秋季韩版潮流上衣套头衣服 。</p> <p class="extra"> <span class="tb-ifont"></span> 205 人说好 </p> </div> </a> <a href="" role="listitem" aria-posinset="0" aria-setsize="6"> <div class="img-wrapper"> <img class="a-all" src="小图标/sp13.png"/> </div> <div class="info"> <h4 id="dg-item-tl-2" class="a-all">全职高手叶修杨洋同款牛仔</h4> <p>全职高手叶修杨洋同款牛仔外套拼接毛边流苏情侣上衣牛仔外套宽松 </p> <p class="extra"> <span class="tb-ifont"></span> 127 人说好 </p> </div> </a> <a href="" role="listitem" aria-posinset="0" aria-setsize="6"> <div class="img-wrapper"> <img class="a-all" src="小图标/sp12.png"/> </div> <div class="info"> <h4 id="dg-item-tl-2" class="a-all">Nike耐克t恤女</h4> <p>Nike耐克t恤女夏季运动跑步上衣棉质舒适透气短袖学生宽松T恤 </p> <p class="extra"> <span class="tb-ifont"></span> 127 人说好 </p> </div> </a> <a href="" role="listitem" aria-posinset="0" aria-setsize="6"> <div class="img-wrapper"> <img class="a-all" src="小图标/sp11.png"/> </div> <div class="info"> <h4 id="dg-item-tl-2" class="a-all">网红上衣女潮短款修身夏装</h4> <p>网红上衣女潮短款修身夏装港风洋气复古百搭古着感短袖女学生森系 </p> <p class="extra"> <span class="tb-ifont"></span> 127 人说好 </p> </div> </a> <a href="" role="listitem" aria-posinset="0" aria-setsize="6"> <div class="img-wrapper"> <img class="a-all" src="小图标/sp10.png"/> </div> <div class="info"> <h4 id="dg-item-tl-2" class="a-all">桔梗裙子超仙女森裙子</h4> <p>2019新款厌世风egg智熏法式过膝丧桔梗裙子超仙女森系甜美复古夏 </p> <p class="extra"> <span class="tb-ifont"></span> 5627 人说好 </p> </div> </a> </ul> </div> </div> </div> </div> <div class="tbh-shopping fl J_Module"> <div class="shopping-inner"> <h3 class="shopping-hd mod-hd com-hd"> <img class="mlogo fl" src="小图标/爱逛街-112-46.png" title="爱逛街"> <p> <span class="subtitle ml6">献给聪明可爱的你</span> </p> <span class="tb-fn clearfix"></span> </h3> <ul class="list clearfix goods-list"> <a href="" role="listitem" aria-posinset="0" aria-setsize="6"> <!--第一个商品--> <div class="img-wrapper"> <img class="a-all" src="小图标/sp9.png"> </div> <div class="info"> <h4 id="dg-item-tl-0" class="a-all">html5+css3入门到精通</h4> <p>HTML+CSS+JavaScript编程从入门到精通 html5+css3基础自学教程web前端开发书籍JavaScript高级程序设计 网站网页前端设计制作建设</p> <p class="extra"> <span class="tb-ifont"></span> 5958 人说好 </p> </div> </a> <a href="" role="listitem" aria-posinset="0" aria-setsize="6"> <div class="img-wrapper"> <img class="a-all" src="小图标/sp8.png" > </div> <div class="info"> <h4 id="dg-item-tl-1" class="a-all">c语言从入门到精通</h4> <p>C语言程序设计 c语言从入门到精通 零基础自学C语言编程教程书籍 计算机电脑编程软件开发入门自学数据结构与算法c ++primer plus </p> <p class="extra"> <span class="tb-ifont"></span> 2005 人说好 </p> </div> </a> <a href="" role="listitem" aria-posinset="0" aria-setsize="6"> <div class="img-wrapper"> <img class="a-all" src="小图标/sp7.png"/> </div> <div class="info"> <h4 id="dg-item-tl-2" class="a-all">java语言程序设计框架</h4> <p>java从入门到精通 java语言程序设计框架开发软件编程教程书籍 javascript电脑计算机零基础自学java编程思想核心技术项目java web </p> <p class="extra"> <span class="tb-ifont"></span> 9427 人说好 </p> </div> </a> <a href="" role="listitem" aria-posinset="0" aria-setsize="6"> <div class="img-wrapper"> <img class="a-all" src="小图标/sp6.png"/> </div> <div class="info"> <h4 id="dg-item-tl-2" class="a-all">php从入门到精通</h4> <p>php从入门到精通 第4版 php电脑编程入门 零基础自学书籍 语言程序设计网站视频教程教材 PHP项目实战教程计算机前端开发书籍 </p> <p class="extra"> <span class="tb-ifont"></span> 7527 人说好 </p> </div> </a> <a href="" role="listitem" aria-posinset="0" aria-setsize="6"> <div class="img-wrapper"> <img class="a-all" src="小图标/sp5.png"/> </div> <div class="info"> <h4 id="dg-item-tl-2" class="a-all">python基础教程</h4> <p>Python编程从入门到精通 计算机电脑编程入门自学零基础书籍网络爬虫 pathon编程从入门到实践python基础教程语言程序设计小甲鱼 </p> <p class="extra"> <span class="tb-ifont"></span> 3795 人说好 </p> </div> </a> <a href="" role="listitem" aria-posinset="0" aria-setsize="6"> <div class="img-wrapper"> <img class="a-all" src="小图标/sp4.png"/> </div> <div class="info"> <h4 id="dg-item-tl-2" class="a-all">Java从入门到精通</h4> <p>【官方正版】 Java从入门到精通 清华大学出版社 Java从入门到精通 第5版 明日科技 软件开发视频大讲堂 计算机 程序设计 Java </p> <p class="extra"> <span class="tb-ifont"></span> 1788人说好 </p> </div> </a> </ul> </div> </div> </div> </div> </div> </body> </html>
HTML+CSS实现淘宝首页（三）https://developer.aliyun.com/article/1382562
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)