淘宝主页+女装会场+详情页（html+css+js）

先看图吧，是个（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>&gt;</span></li><li><a href="">鞋靴</a>/<a href="">箱包</a>/<a href="">配件</a><span>&gt;</span></li><li><a href="">童装玩具</a>/<a href="">孕产</a>/<a href="">用品</a><span>&gt;</span></li><li><a href="">家电</a>/<a href="">数码</a>/<a href="">手机</a><span>&gt;</span></li><li><a href="">美妆</a>/<a href="">洗护</a>/<a href="">保健品</a><span>&gt;</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>

淘宝主页+女装会场+详情页（html+css+js）相关推荐

黄聪：淘宝用户在宝贝详情页想看到什么
下载地址:淘宝用户在宝贝详情页想看到什么_(1).pdf
Flutter实现京东淘宝电商商品详情页效果
之前开发电商的功能时,需要做商品界面,UI基本是参考京东.淘宝的效果,以前android原生开发的时候觉得很好做,切到Flutter之后只能自己想办法,所以自己后来做出了这样的效果,分享下实现方案. ...
android 仿淘宝、京东商品详情页向上拖动查看图文详情控件
一.淘宝商品详情页效果先看一下淘宝详情页的效果我们的效果二.实现思路使用两个scrollView,两个scrollView 竖直排列,通过自定义viewGroup来控制两个scrollView ...
仿淘宝上拉进入详情页交互的实现
可以看到,该页面是分为两部分的,一部分是一开始就能看到的商品信息,然后我们上拉屏幕,屏幕不断往上滚动,滚动到第一部分结束时可以看到底部有"继续拖动,查看图文详情"一行文本出现.继续 ...
iOS 仿淘宝,上拉进入详情页面
今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 // // ViewCo ...
HTML5期末大作业：仿淘宝电商网站设计——仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品大学生网页制作期末作业
HTML5期末大作业:仿淘宝电商网站设计--仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品大学生网页制作期末作业常见网页设计作业题材有个人. ...
html网页制作——仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品大学生网页制作期末作业C71
HTML5期末大作业:仿淘宝电商网站设计--仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品大学生网页制作期末作业常见网页设计作业题材有个人. ...
淘宝开女装店前期需要准备什么？开淘宝服装店要注意什么？
随着淘宝平台的不断壮大,越来越多的人开始在淘宝开店了,如果要在淘宝开店卖女装的话,前期的时候是一定要做好准备的,那么具体要做好哪些方面的准备呢?下面为大家进行介绍. 淘宝开女装店前期需要准备什么? 开 ...
selenium 反爬虫之跳过淘宝滑块验证！首先要搞定JS！
在处理问题的之前,给大家个第一个锦囊! 你需要将chorme更新到最新版版本84,下载对应的chorme驱动驱动地址注意划重点!!一定要做这一步,因为我用的83的chorme他是不行滴,~~~~ ...

淘宝主页+女装会场+详情页（html+css+js）

淘宝主页+女装会场+详情页（html+css+js）相关推荐

最新文章

热门文章