淘宝网是中国电商行业的领军企业，其前端网站技术一直处于国内领先水平。本博客旨在分享淘宝网前端在技术方面的积累与探索。内容涵盖前端开发、性能优化、移动端适配、架构设计等诸多方面，对于前端开发人员有着较高的技术参考价值。注：不含源码
先看图吧，是个（html+css+js）阶段性作业
1.index.html
2.goods.html
3.goodsDetails.html
部分详细代码
<!DOCTYPE html> <html> <head> <title>淘宝网-淘！我喜欢</title> <meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.ico" /> <link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/common.css" /> <link rel="stylesheet" href="myfont/myfont.css" /> <link rel="stylesheet" href="css/change_font.css" /> </head> <body> <!--隐藏的导航栏nav--> <div id="nav"> <div id="navcont"> <div id="tbwang"> <h1> <a href="https://www.taobao.com/" title="淘宝网">淘宝网</a> </h1> </div> <div id="serchnav"> <div id="left_bb"> <div id="lbb"> </div> <div id="rbb"> </div> <!-- ul --> <ul id="serchnav_ul"> <li>宝贝</li> <li>天猫 <span id="redline"></span></li> <li>店铺</li> </ul> </div> <div id="ser_ab"> <input type="text" autofocus="autofocus" /> <div class="gap"> </div> </div> <button>搜索</button> <!-- 绝对定位的内容 --> <!-- 向下图标 --> <div id="down"> <span id="down1" class="iconfont icon-xia"></span> </div> <!-- 搜索font --> <i class="iconfont icon-sousuo"></i> <!-- 相机font --> <a href="script:;"> <em class="iconfont icon-zhaoxiangji"></em> </a> </div> </div> </div> <!--头部：中国大陆版块--> <div id="chdalu"> <div id="head_wrap1"> <!--左边模块--> <div id="left_chdalu"> <ul> <li id="cdl_li01"> <a href=""><span id="area_change">中国大陆</span><span class="iconfont icon-xia change"></span> </a> <!--地区列表--> <div id="areasBox"> <ul id="areas"> <li>全球</li> <li>中国大陆</li> <li>中国香港</li> <li>中国澳门</li> <li>中国台湾</li> <li>韩国</li> <li>马来西亚</li> <li>澳大利亚</li> <li>新加坡</li> <li>新西兰</li> <li>加拿大</li> <li>美国</li> <li>日本</li> <li>法国</li> <li>德国</li> <li>瑞士</li> </ul> </div> </li> <li><a href="">亲，请登录</a></li> <li><a href="">免费注册</a></li> <li><a href="">手机逛淘宝</a></li> </ul> </div> <!--右边模块--> <div id="rig_chdalu"> <li id="rig_chdalu_li01"><a href=""><span id="mytb">我的淘宝</span> <span class="iconfont icon-xia change1"></span></a> <div id="mytbBox"> <ul id="mytbbox_ul01"> <li>已买到的宝贝</li> <li>我的足迹</li> </ul> </div> </li> <li><a href=""><span class="iconfont icon-gouwuche1 change2"></span>购物车</a></li> <li> <a href=""> <span class="iconfont icon-start change4"></span>收藏夹 <span class="iconfont icon-xia change3"></span> </a> </li> <li><a href="">商品分类</a></li> <li id="shuxian">|</li> <li><a href="">千牛卖家中心</a></li> <li><a href="">联系客服</a></li> <li><a href=""><span class="iconfont icon-daohang change8"></span> 网站导航</a></li> </div> </div> </div> <!--淘小铺版块--> <div id="xiaopu"> <a href=""><img src="upload/taoxiaopu.png" width="1190px" alt="淘小铺" /></a> </div> <!--淘宝搜索栏版块--> <div id="tbcom"> <div id="tbcom_wrap"> <!--淘宝logo--> <div id="tblogo"> <h1> <a href="https://www.taobao.com/?spm=a21bo.2017.201857.1.5af911d9SiQ4jf"></a> </h1> </div> <!--宝贝 天猫 店铺 搜索栏--> <div id="search_box"> <div id="words"> <ul id="words_ul01"> <li id="words_bb">宝贝</li> <li id="words_tm">天猫</li> <li id="words_dp">店铺</li> </ul> </div> <!--左边的搜索栏 右边的按钮--> <div id="searchbar"> <div id="left_searchbar"> <input id="inp" type="text" placeholder="p40手机壳" autofocus="autofocus" /> <i class="iconfont icon-sousuo change6"></i> <div id="rleft_searchbar"> <a class="a1" href=""> <span class="iconfont icon-zhaoxiangji change5"></span> </a> </div> </div> <button>搜索</button> </div> <!--新款连衣裙...沙发--> <div id="a"> <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> <a href="">新款男鞋</a> <a href="">耳机</a> <a href="">时尚女包</a> <a href="">沙发</a> </div> </div> <!--手机淘宝--> <div id="phonetb"> <a href=""> <span>手机淘宝</span> <img src="upload/phonetb.png" alt="手机淘宝下载" /> </a> <!--小×号--> <div id="x">× </div> </div> </div> </div> <!--引入版心版块--> <div class="typearea"> <!--主题市场版块--> <div id="mkt"> <!--市场模块的左边版块 商品列表--> <div id="left_mkt"> <!--左边版块的上部--> <div id="top_left_mkt">主题市场</div> <!--左边版块的下部--> <div id="btm_left_mkt"> <ul> <li><a href="./goods.html">女装</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> </ul> </div> </div> <!--主题市场 右边模块--> <div id="rig_mkt"> <!--右边模块的头部长条--> <div id="head_rig_mkt"> <ul id ="left_head_rig_mkt"> <li><a href="">天猫</a></li> <li><a href="">聚划算</a></li> <li><a href="">天猫超市</a></li> </ul> <ul id ="rig_head_rig_mkt"> <li><span>|</span></li> <li><a href="">淘抢购</a></li> <li><a href="">电器城</a></li> <li><a href="">司法拍卖</a></li> <li><a href="">兴农脱贫</a></li> <li><span>|</span></li> <li><a href="">飞猪旅行</a></li> <li><a href="">智能生活</a></li> <li><a href="">苏宁易购</a></li> </ul> </div> <!--右边模块的body--> <div id="body_rig_mkt"> <!--两个焦点图 focus --> <div id="focus_brm"> <!--焦点图1 focus1 --> <div id="focus1_brm"> <ul id="ul01"> <li> <a href=""> <img src="upload/focus1_01.jpg" width="520px" /> </a> </li> </ul> <div id="leftbtn"> </div> <div id="rigbtn"> </div> <div id="cir_dot"> <ul id="ul02"> </ul> </div> </div> <!--焦点图2 focus2--> <div id="focus2_brm"> <div id="up_focus2_brm"><span>理想生活上天猫</span><i>1/6</i> </div> <div id="btm_focus2_brm"> <a href=""><img src="upload/focus2_0101.jpg" /></a> <a href=""><img src="upload/focus2_0102.jpg" /></a> </div> </div> </div> <!--卖 mai--> <div id="mai_brm"> <!--特卖 temai--> <div id="temai_brm"> <a href=""><img src="upload/temai.webp.jpg" width="160px" alt="特卖" /></a> </div> <div class="daymai">今日热卖</div> <!--热卖 remai--> <div id="remai_brm"> <a href=""><img src="upload/remai.jpg" height="202px" alt="热卖" /></a> </div> </div> <!--右边body rig_brm--> <div id="rig_brm"> <div id="rig_brm1"> <div id="toux_rig_brm1"> <div id="yuan_toux_rig_brm1"> <a href=""><img src="upload/toux.jpg" /></a> </div> </div> <div id="nihao_rig_brm1">Hi! 你好 </div> <div id="club_rig_brm1"> <a href="">领淘金币抵钱</a> <a href="">会员俱乐部</a> </div> <div id="denglu_rig_brm1"> <button>登录</button> <button>注册</button> <button>开店</button> </div> </div> <a href id="rig_brm2"> <span>网上有害信息举报专区</span> <div></div> </a> <div id="rig_brm3"> <!--头部head 公告 规则 论坛 ...--> <div id="rig_brm3_head"> <ul id="rig_brm3_head_ul01"> <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> </div> <div id="rig_brm3_body"> <ul id="rbb3_ul01"> <li> <a href="">95公益周阿里、腾讯等六家公司同台联合做公益</a> </li> <li> <a href="">淘宝造物节之城市秘密</a> </li> <li> <a href="">聚划算88红包省钱卡</a> </li> </ul> </div> </div> <!--充话费 旅行 车险 游戏...彩票 理财--> <div id="rig_brm4"> <ul id="rig_brm4_ul"> <li> <a href=""> <span class="iconfont icon-chonghuafei"><span> <p>充话费</p> </a> <div id="rig_brm4_box1"> <div id="rig_brm4_box1cont"> <div id="rb4b1c_01"> <a href="script:;">充话费</a> <a href="script:;">充流量</a> <a href="script:;">充固话</a> <a href="script:;">充宽带</a> </div> <div id="scrollBox11"> <div id="rb4b1c_02"> <input type="text" name="pnhonenum" placeholder="请输入手机号" autocomplete="on" /> <div id="autoc"> </div> <span class="iconfont icon-chonghuafei"><span> </div> <div id="rb4b1c_03"> <input type="text" name="tablelist" value="50元" title="50元" readonly="readonly" /> <!--readonly表示这个输入框是只读属性 即用户不能选中 不能更改value内容 不能输入--> <span class="iconfont icon-xia"></span> </div> <div id="rb4b1c_04"> <i>售价</i> <i>¥</i> <i>49-49.8</i> </div> <button id="rb4b1c_btn">立即充值</button> </div> </div> <em id="x2">×</em> </div> </li> <li> <a href=""> <span class="iconfont icon-feizhu"><span> <p>旅行</p> </a> <div id="rig_brm4_box2"> <div id="rig_brm4_box1cont"> <div id="rb4b1c_02"> <a href="script:;">国内机票</a> <a href="script:;">国际机票</a> <a href="script:;">酒店客栈</a> <a href="script:;">度假门票</a> <a href="script:;">火车票</a> </div> <div id="scrollBox21"> <form id="form1"> <input type="radio" name="travel" checked="checked" id="单" /> <label for="单">单程</label> <input type="radio" name="travel" id="双" /> <label for="双">往返</label> <span>中国港澳台请选择国际机票</span> </form> <div id="fromTo1"> <div id="left_fromTo1"> <div id="left2_fromTo1" class="disp"> <div id="left11_fromTo1"> <label for="go2">返程</label> </div> <input type="text" placeholder="日期" id="go2" name="f_city" /> <span class="iconfont icon-rili-y" id="location"></span> </div> </div> </div> <button id="chazhao_btn">查找</button> </div> </div> <em id="x2">×</em> </div> </li> <li> <a href=""> <span class="iconfont icon--"><span> <p>车险</p> </a> </li> <li> <a href=""> <span class="iconfont icon-youxi"><span> <p>游戏</p> </a> </li> <li> <a href=""> <span class="iconfont icon-caipiao"><span> <p>彩票</p> </a> </li> </ul> </div> <!--阿里app 淘宝 天猫 支付宝 钉钉 淘小铺--> <div id="rig_brm5"> <div id="rig_brm51"> <span>阿里APP</span> <a href=""> <span>更多</span> <span class="iconfont icon-dayu"></span> </a> </div> <div id="rig_brm52"> <ul> <a href=""> <img src="upload/app05.webp" /> </a> <div id="saotb"> <img src="upload/saotb.jpg" /> <p>扫一扫淘小铺</p> </div> </li> </ul> </div> </div> </div> </div> </div> <!--底部结尾 footer--> <div id="footer"> <img src="upload/footer.png" /> </div> </div> <!-- 侧边固定栏 --> <div id="sidebar"> <span id="sb_font1" class="iconfont icon-taobao"></span> <ul id="sb_ul"> <li> <a href="" class="sb_ula1"> 爱逛好货 </a> <i></i> </li> </ul> </div> <script src="js/taobao.js"></script> </body> </html>
