淘宝主页+女装会场+详情页（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>></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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-01-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
