还想起刚开始学完HTML时候自己做的第一个项目就是这个淘宝网页，由于当时还没有学JS，网页用了大量的超链接，而且仅兼容最新版的谷歌与IE，所以仅适合刚学完Html的同学作为学习参考，我已经将提取链接放到文章底部
html代码：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
#imgs{
width: 520px;
height: 280px;
}
#_imgs{
width: 160px;
height: 280px;
}
</style>
<link rel="stylesheet" href="cs1.css">
</head>
<body>
<div class="v1">
<select name="" id="se1">
<option value="">全球</option>
<option value="" selected>中国大陆</option>
<option value="">中国香港</option>
<option value="">中国台湾</option>
<option value="">中国澳门</option>
<option value="">韩国</option>
<option value="">马来西亚</option>
</select>
<a href="https://login.taobao.com/member/login.jhtml?spm=a21bo.2017.754894437.1.498011d9JrWnY6&f=top&redirectURL=https%3A%2F%2Fwww.taobao.com%2Findex.php" target="_self" class="a1">亲，请登录</a>
<a href="https://reg.taobao.com/member/new_register.jhtml?spm=a21bo.2017.754894437.2.498011d9JrWnY6&from=tbtop&ex_info=&ex_sign=" target="_self" class="a2">免费注册</a>
<a href="https://market.m.taobao.com/app/fdilab/download-page/main/index.html?spm=a21bo.2017.1997563273.1.498011d9JrWnY6" target="_self" class="a2">手机逛淘宝</a>
<select name="" id="se2" class="a2" id="s1">
<option value=""><a href="" target="_self" >我的淘宝</a></option>
<option value=""><a href="" target="-self" >已买宝贝</a></option>
<option value=""><a href="" target="_self" >我的足迹</a></option>
</select>
<a href="file:///C:/Users/%E4%BC%8D%E5%8B%87/Desktop/web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%95%99%E7%A8%8B/cz01/demo01.html" target="_self" class="a2" id="s1">购物车</a>
<a href="https://shoucang.taobao.com/item_collect.htm?spm=a21bo.2017.1997525053.1.498011d9JrWnY6" target="_self" class="a2" id="s1">收藏夹</a>
<a href="https://www.taobao.com/tbhome/page/market-list?spm=a21bo.2017.1997563209.1.498011d9JrWnY6" target="_self" class="a2" id="s1">商品分类</a>
<a href="https://mai.taobao.com/seller_admin.htm?spm=a21bo.2017.1997525073.1.498011d9JrWnY6" target="_self" class="a2" id="s1">千牛卖家中心</a>
<a href="https://consumerservice.taobao.com/?spm=a21bo.2017.754895749.1.498011d9JrWnY6" target="_self" class="a2" id="s1">联系客服</a>
<a href="https://www.taobao.com/tbhome/page/sitemap?spm=a21bo.2017.1997525077.1.498011d9JrWnY6" target="_self" class="a2" id="s1">网站导航</a>
</div>
<div class="v2">
<a href="https://market.m.taobao.com/app/miniapp-biz/taoxiaopuPc/index.html?spm=a21bo.2017.201855.1.498011d9fn0PH3" ><img class="t1" src="https://img.alicdn.com/tfs/TB1OaEjIhD1gK0jSZFsXXbldVXa-1190-70.png" alt="" style="margin-top: -21px;"></a>
</div>
<div class="v4">
<a class="a3" href="https://www.taobao.com/?spm=a21bo.2017.201857.1.498011d90ti6Jb" target="_blank"><b>淘 宝 网</b><br>Taobao.com</a>
<input type="text" class="i1" placeholder="搜索一下吧">
<input type="button" value="搜索" class="i2">
<img class="t2" src="img/imgs01.png" alt="">
</div>
<div class="v5">
<span class="p1">主题市场</span>
<a href="https://www.tmall.com/?spm=a21bo.2017.201859.1.498011d9Mb4VrP" class="a4" style="text-indent: 12px;" target="_blank">天猫</a>
<a href="https://ju.taobao.com/?spm=a21bo.2017.201859.2.498011d9Mb4VrP" class="a4" target="_blank">聚划算</a>
<a href="https://chaoshi.tmall.com/?spm=a21bo.2017.201859.3.498011d9Mb4VrP" class="a4" target="_blank">天猫超市</a>
<a href="https://qiang.taobao.com/?spm=a21bo.2017.201859.4.498011d9XztQgO" class="a4" target="_blank">淘抢购</a>
<a href="https://3c.tmall.com/?spm=a21bo.2017.201859.5.498011d9XztQgO" class="a4" target="_blank">电器城</a>
<a href="https://sf.taobao.com/?spm=a21bo.2017.201859.6.498011d9XztQgO" class="a5" target="_blank">司法拍卖</a>
<a href="https://good.tmall.com/?spm=a21bo.2017.201859.7.498011d9XztQgO" class="a5" target="_blank">淘宝心选</a>
<a href="https://www.taobao.com/markets/xt/znfp?spm=a21bo.2017.201859.8.498011d9XztQgO" class="a5" target="_blank">兴农脱贫</a>
<a href="https://www.fliggy.com/?spm=a21bo.2017.201859.9.498011d9XztQgO" class="a5" target="_blank">飞猪旅行</a>
<a href="https://yun.taobao.com/?spm=a21bo.2017.201859.10.498011d9XztQgO" class="a5" target="_blank">智能生活</a>
<a href="https://suning.tmall.com/?spm=a21bo.2017.201859.11.498011d9XztQgO" class="a5" target="_blank">苏宁易购</a>
</div>
<div class="v6">
<ul>
<li style="margin-top: -20px;">
<a href="https://www.taobao.com/markets/nvzhuang/taobaonvzhuang?spm=a21bo.2017.201867-main.1.498011d9UxAdbZ" target="_blank">女装/</a>
<a href="https://www.taobao.com/markets/nanzhuang/2017new?spm=a21bo.2017.201867-main.2.498011d9UxAdbZ" target="_blank">男装/</a>
<a href="https://neiyi.taobao.com/?spm=a21bo.2017.201867-main.3.498011d9UxAdbZ" target="_blank">内衣</a>
</li><br>
<li>
<a href="https://www.taobao.com/markets/xie/nvxie/index?spm=a21bo.2017.201867-main.4.498011d9UxAdbZ" target="_blank">鞋靴/</a>
<a href="https://www.taobao.com/markets/bao/xiangbao?spm=a21bo.2017.201867-main.5.498011d9UxAdbZ" target="_blank">箱包/</a>
<a href="https://pei.taobao.com/?spm=a21bo.2017.201867-main.6.498011d9UxAdbZ" target="_blank">配件</a>
</li><br>
<li>
<a href="https://www.taobao.com/markets/qbb/index?spm=a21bo.2017.201867-main.7.498011d9UxAdbZ&pvid=b9f2df4c-6d60-4af4-b500-c5168009831f&scm=1007.12802.34660.100200300000000" target="_blank">童装玩具/</a>
<a href="https://www.taobao.com/markets/qbb/index?spm=a21bo.2017.201867-main.8.498011d9UxAdbZ&pvid=b9f2df4c-6d60-4af4-b500-c5168009831f&scm=1007.12802.34660.100200300000000" target="_blank">孕产/</a>
<a href="https://www.taobao.com/markets/qbb/index?spm=a21bo.2017.201867-main.9.498011d9UxAdbZ&pvid=b9f2df4c-6d60-4af4-b500-c5168009831f&scm=1007.12802.34660.100200300000000" target="_blank">用品</a>
</li><br>
<li>
<a href="https://www.taobao.com/markets/3c/tbdc?spm=a21bo.2017.201867-main.10.498011d9UxAdbZ" target="_blank">家电/</a>
<a href="https://www.taobao.com/markets/3c/tbdc?spm=a21bo.2017.201867-main.11.498011d9UxAdbZ" target="_blank">数码/</a>
<a href="https://www.taobao.com/markets/3c/tbdc?spm=a21bo.2017.201867-main.12.498011d9UxAdbZ" target="_blank">手机</a>
</li><br>
<li>
<a href="https://mei.taobao.com/?spm=a21bo.2017.201867-main.13.498011d9UxAdbZ" target="_blank">美妆/</a>
<a href="https://www.taobao.com/market/baihuo/xihuyongpin.php?spm=a21bo.2017.201867-main.14.498011d9UxAdbZ" target="_blank">洗护/</a>
<a href="https://g.taobao.com/brand_detail.htm?spm=a21bo.2017.201867-main.15.498011d9UxAdbZ&navigator=all&_input_charset=utf-8&q=%E8%90%A5%E5%85%BB%E5%93%81" target="_blank">保健品</a>
</li><br>
<li>
<a href="https://www.taobao.com/market/peishi/zhubao.php?spm=a21bo.2017.201867-main.16.498011d9UxAdbZ" target="_blank">珠宝/</a>
<a href="https://www.taobao.com/market/peishi/yanjing.php?spm=a21bo.2017.201867-main.17.498011d9UxAdbZ" target="_blank">眼镜/</a>
<a href="https://www.taobao.com/market/peishi/shoubiao.php?spm=a21bo.2017.201867-main.18.498011d9UxAdbZ" target="_blank">手表</a>
</li><br>
<li>
<a href="https://www.taobao.com/markets/coolcity/coolcityHome?spm=a21bo.2017.201867-main.19.498011d9UxAdbZ" target="_blank">运动/</a>
<a href="https://www.taobao.com/markets/coolcity/coolcityHome?spm=a21bo.2017.201867-main.20.498011d9UxAdbZ" target="_blank">户外/</a>
<a href="https://www.taobao.com/markets/amusement/home?spm=a21bo.2017.201867-main.21.498011d9UxAdbZ" target="_blank">乐器</a>
</li><br>
<li>
<a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.22.498011d9UxAdbZ&q=%E6%B8%B8%E6%88%8F&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&ie=utf8&initiative_id=tbindexz_20170306" target="_blank">游戏/</a>
<a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.23.498011d9UxAdbZ&q=%E5%8A%A8%E6%BC%AB&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20181010&ie=utf8" target="_blank">动漫/</a>
<a href="https://www.taobao.com/markets/acg/yingshi?spm=a21bo.2017.201867-main.24.498011d9UxAdbZ" target="_blank">影视</a>
</li><br>
<li>
<a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.25.498011d9UxAdbZ&q=%E7%BE%8E%E9%A3%9F&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20180724&ie=utf8" target="_blank">美食/</a>
<a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.26.498011d9UxAdbZ&ie=utf8&initiative_id=staobaoz_20180724&stats_click=search_radio_all%3A1&js=1&imgfile=&q=%E7%94%9F%E9%B2%9C&suggest=history_1&_input_charset=utf-8&wq=%E7%94%9F%E9%B2%9C&suggest_query=%E7%94%9F%E9%B2%9C&source=suggest" target="_blank">生鲜/</a>
<a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.27.498011d9UxAdbZ&q=%E9%9B%B6%E9%A3%9F&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&ie=utf8&initiative_id=tbindexz_20170306" target="_blank">零食</a>
</li><br>
<li>
<a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.28.498011d9UxAdbZ&q=%E5%9B%AD%E8%89%BA&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&ie=utf8&initiative_id=tbindexz_20170419" target="_blank">鲜花/</a>
<a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.29.498011d9UxAdbZ&ie=utf8&initiative_id=staobaoz_20170419&stats_click=search_radio_all%3A1&js=1&imgfile=&q=%E8%BF%9B%E5%8F%A3%E7%8B%97%E7%B2%AE&suggest=history_3&_input_charset=utf-8&wq=&suggest_query=&source=suggest" target="_blank">宠物/</a>
<a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.30.498011d9UxAdbZ&q=%E5%86%9C%E8%B5%84&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&ie=utf8&initiative_id=tbindexz_20170221" target="_blank">农资</a>
</li><br>
<li>
<a href="https://market.m.taobao.com/apps/abs/10/177/6ed578?spm=a21bo.2017.201867-main.31.498011d9UxAdbZ&wh_weex=true&psId=2336172" target="_blank">面料采集/</a>
<a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.32.498011d9UxAdbZ&source=youjia&cat=50097129" target="_blank">装修/</a>
<a href="https://www.jiyoujia.com/markets/youjia/zhuangxiucailiao?spm=a21bo.2017.201867-main.33.498011d9UxAdbZ" target="_blank">建材</a>
</li><br>
<li>
<a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.34.498011d9UxAdbZ&source=youjia&q=%E5%AE%B6%E5%85%B7" target="_blank">家具/</a>
<a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.35.498011d9UxAdbZ&source=youjia&cat=50065206%2C50065205" target="_blank">家饰/</a>
<a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.36.498011d9UxAdbZ&source=youjia&cat=50008163&bcoffset=0&s=240" target="_blank">家纺</a>
</li><br>
<li>
<a href="https://car.tmall.com/wow/car/act/carfp?spm=a21bo.2017.201867-main.37.498011d9UxAdbZ" target="_blank">汽车/</a>
<a href="https://2car.taobao.com/?spm=a21bo.2017.201867-main.38.498011d9UxAdbZ" target="_blank">二手车/</a>
<a href="https://car.tmall.com/wow/car/act/carfp?spm=a21bo.2017.201867-main.39.498011d9UxAdbZ" target="_blank">用品</a>
</li><br>
<li>
<a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.40.498011d9UxAdbZ&q=%E5%8A%9E%E5%85%AC%E5%AE%B6%E5%85%B7&commend=all&search_type=item&sourceId=tb.index" target="_blank">办公/</a>
<a href="https://www.taobao.com/markets/dingzhi/home?spm=a21bo.2017.201867-main.41.498011d9UxAdbZ&wh_ttid=pc" target="_blank">DIY/</a>
<a href="https://www.taobao.com/markets/wujin/pchome?spm=a21bo.2017.201867-main.42.498011d9UxAdbZ&wh_ttid=pc" target="_blank">五金电子</a>
</li><br>
<li>
<a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.43.498011d9UxAdbZ&source=youjia&q=%E7%99%BE%E8%B4%A7" target="_blank">百货/</a>
<a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.44.498011d9UxAdbZ&source=youjia&cat=50035867&bcoffset=0&s=240" target="_blank">餐厨/</a>
<a href="https://www.taobao.com/markets/promotion/tbbj?spm=a21bo.2017.201867-main.45.498011d9UxAdbZ" target="_blank">家庭保健</a>
</li><br>
<li>
<a href="https://xue.taobao.com/?spm=a21bo.2017.201867-main.46.498011d9UxAdbZ" target="_blank">学习/</a>
<a href="https://ka.taobao.com/?spm=a21bo.2017.201867-main.47.498011d9UxAdbZ" target="_blank">卡卷/</a>
<a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.48.498011d9UxAdbZ&q=%E4%B8%8A%E9%97%A8%E6%9C%8D%E5%8A%A1&cat=50097750" target="_blank">本地服务</a>
</li>
</ul>
<div class="v7">
<img id='imgs' src="imgs/imgs02.jpg" alt="" style="margin-left: 4px;">
<script>
var imgs=document.getElementById('imgs');
var arr=['imgs/imgs02.jpg','imgs/imgs03.png','imgs/imgs04.png','imgs/imgs05.png','imgs/imgs06.png','imgs/imgs07.png','imgs/imgs08.png'];
var i=0
var dsqId=setInterval(function(){
imgs.setAttribute('src',arr[i]);
i++;
if(i==7){
i=0
}
},2000)
</script>
<img id="_imgs" class="t3" src="imgs1/imgs03.webp" alt="">
<script>
var _imgs=document.getElementById('_imgs');
var _arr=['imgs1/imgs03.webp','imgs1/imgs04.webp','imgs1/imgs05.webp','imgs1/imgs06.webp','imgs1/imgs07.png','imgs1/imgs08.png'];
var _i=0
var dsqId=setInterval(function(){
_imgs.setAttribute('src',_arr[_i]);
_i++;
if(_i==6){
_i=0
}
},4000)
</script>
<img class="t4" src="img/imgs06.jpg" alt="">
<img class="t4" src="img/imgs05.jpg" alt="" style="margin-left: 5px;">
<img class="t5" src="img/imgs04.jpg" alt="">
</div>
<div class="v8">
<span style="display: block;width: 296px;"> <img class="t6" src="img/07.jpg" alt=""></span>
<a class="a6" href="https://taojinbi.taobao.com/index.htm?spm=a21bo.2017.201864-1.d3.498011d9b8sxx5&auto_take=true">淘金币抵钱</a>
<a class="a6" href="https://vip.taobao.com/?spm=a21bo.2017.201864-1.3.498011d9b8sxx5" style="margin-left: 0px;">会员俱乐部</a><br>
<a class="a7" href="https://login.taobao.com/member/login.jhtml?spm=a21bo.2017.201864-2.d1.498011d9WAwcIG&f=top&redirectURL=http%3A%2F%2Fwww.taobao.com%2F">登录</a>
<a class="a7" href="https://reg.taobao.com/member/new_register.jhtml?spm=a21bo.2017.201864-2.d2.498011d9WAwcIG&from=index&ex_info=&ex_sign=">注册</a>
<a class="a7" href="https://openshop.taobao.com/openshop/welcome.htm?spm=a21bo.2017.201864-2.3.498011d9WAwcIG">开店</a>
<div class="v9">
<a class="a8" href="http://report.12377.cn:13225/toreportinputNormal_anis.do?spm=a21bo.2017.0.0.498011d9Edm3lx&file=toreportinputNormal_anis.do">网上有害信息举报专区</a><span class="p5"></span>
</div>
</div>
</div>
</body>
</html>css部分：
.v1{
height: 40px;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: aliceblue;
}
#se1{
border: 0px none white;
margin-top: 10px;
margin-left: 20%;
outline: none;
}
#se1:hover{
background-color:gainsboro;
}
a{
text-decoration: none;
font-size: 8px;
color: gray;
margin-left: 5px;
}
.a1{
color: #FF6600;
}
.a2:hover{
color: #FF6600;
}
#se2{
margin-left: 20%;
border: 0px solid white;
outline: none;
color: gray;
}
.a3:hover{
color: #FF6600;
}
#s1:hover{
background-color: gainsboro;
}
.v2{
width: 100%;
height: 70px;
background-color: orangered;
position: absolute;
left: 0;
top: 40px;
}
.t1{
display: block;
margin: auto;
}
.v4{
height: 140px ;
width: 70%;
margin: 115px auto;
}
.a3{
display: inline-block;
width: 227px;
text-indent:40px;
color:orangered;
font-size: 40px;
margin-top: 15px;
}
.i1{
display: inline-block;
width: 550px;
height: 40px;
border: 2px solid orangered;
margin-left: 48px;
position: relative;
left: 0;
top: -35px;
border-radius: 20px 0 0 20px ;
outline: none ;
}
.i2{
display: inline-block;
width: 60px;
height:46px ;
border: 2px solid #FF6600;
position: relative;
left: -5px;
top: -32px;
background-color: #FF6600;
color: white;
border-radius: 0 20px 20px 0;
font-size: 18px;
}
.t2{
width:70px ;
margin-left:66px ;
}
.v5{
width: 89%;
height: 26px;
margin: -110px auto;
}
.p1{
display: inline-block;
width: 249px;
text-align: center;
color: white;
background-color: orangered;
font-size: 20px;
text-align: center;
}
.a4{
display: inline-block;
width: 87px;
background-color: #FF6600;
color: white;
font-size:20px ;
margin-left: -5px;
}
.a5{
display: inline-block;
width: 96px;
background-color: #FF6600;
color: white;
font-size:20px ;
margin-left: -5px;
}
.v6{
width: 83.5%;
height: 500px;
border: 1px solid red;
margin: 110px auto;
position: relative;
left: -41px;
overflow: hidden;
}
.v6 ul{
list-style-type: none;
display: block;
float: left;
}
.v6 ul li{
display: inline-block;
width: 250px;
margin-left: -40px;
text-align: center;
font-size: 20px;
line-height: 28px;
}
.v6 ul li:hover{
background-color: bisque;
}
.v6 ul li a{
font-size: 15px;
}
.v6 ul li a:hover{
border-bottom: 1px solid orangered;
}
.v7{
width: 700px;
height: 500px;
border-left: 1px solid red;
float: left;
margin-left: -3px;
}
.t3{
margin:0 5px ;
}
.t4{
width: 252px;
height: 200px;
margin-left: 4px;
margin-top: 0px;
}
.t5{
margin-left: 12px;
}
.v8{
width: 296px;
height: 180px;
float: left;
}
.t6{
position: relative;
left: 120px;
border-radius: 50px;
}
.a6{
color: orangered;
display: inline-block;
width: 100px;
height: 20px;
background-color: antiquewhite;
margin-left: 40px;
text-align: center;
border-radius: 15px ;
font-size: 14px;
}
.a7{
display: inline-block;
width: 80px;
height: 25px;
background-color: orangered;
color: white;
margin-left: 10px;
margin-top: 15px;
border: 1px solid orangered;
border-radius: 8px;
font-size: 16px;
text-align: center;
}
.v9{
width: 296px;
height: 25px;
background-color: antiquewhite;
margin-top: 30px;
}
.a8{
color: orangered;
margin-left:80px ;
font-size: 13px;
}
.p5{
display: inline-block;
width: 0;
height: 0;
border: 6px solid antiquewhite;
border-left-color: orangered;
margin-left: 10px;
}页面效果：
具有图片轮播效果的淘宝网页
压缩包
链接：https://pan.baidu.com/s/1Yb7KfQUiw0f6Lq7-bSsZSg
提取码：qrer
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
