200字范文 > 静态HTML网页设计作品——仿淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计

静态HTML网页设计作品——仿淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计

时间：2020-11-11 17:01:40

HTML5期末大作业

文章目录

HTML5期末大作业一、作品展示二、文件目录三、代码实现四、学习资料五、完整源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>淘宝天下</title><link rel="stylesheet" href="css/style.css" type="text/css" /></head><body><div class="top"><div class="topAll clearFix"><span>您好，欢迎来淘宝！<a href="##">[请登陆]</a> <a href="##">[免费注册]</a></span><ul><li class="tao List"><a href="##"><em></em>我的淘宝</a><i></i>|<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></li><li class="buy List"><a href="##"><em></em>购物车</a>|<ul><li>您的购物车暂时没有宝贝</li></ul></li><li class="save"><a href="##"><em></em>收藏夹</a>|</li><li><a href="##">社区</a>|</li><li class="help List"><a href="##"><em></em>帮助</a><i></i><ul><li><a href="##">常见问题</a></li><li><a href="##">自动服务</a></li><li><a href="##">联系我们</a></li></ul></li></ul></div></div><div class="nav clearFix"><div class="navLeft"></div><div class="navRight"><ul id="navMove"><li class="current"><a href="##">宝贝</a><span></span></li><li><a href="##">淘宝商城</a><span></span></li><li><a href="##">店铺</a><span></span></li><li><a href="##">拍卖</a><span></span></li><li><a href="##">全球购</a><span></span></li><li><a href="##">打听</a><span></span></li></ul><form action="#"><input type="text" value="输入您想搜索的宝贝" class="text" /><input type="submit" value="搜索" class="submit" /></form><div class="else"><ul><li><a href="##">高级搜索</a></li><li><a href="##">使用帮助</a></li></ul></div></div></div><div class="main clearFix"><div class="mainContent"><div class="left"><div class="leftTop"><div class="fashion"><div class="fashionPic"><img src="images/personHeader.jpg" width="40" height="40" alt="" /></div><div class="fashionInfo"><p>我最时尚 <em>2</em></p><span>身份:创意人</span><p><a href="##">设置</a> <a href="##">退出</a></p></div></div><ul><li><a href="##"><em></em>天下空间</a></li><li><a href="##"><em style="background-position:0 -19px;"></em>淘天下</a></li><li><a href="##"><em style="background-position:0 -40px;"></em>淘人</a></li><li><a href="##"><em style="background-position:0 -60px;"></em>淘物</a></li><li><a href="##"><em style="background-position:0 -80px;"></em>投稿</a></li><li><a href="##"><em style="background-position:0 -100px;"></em>推荐店铺</a></li><li><a href="##"><em style="background-position:0 -120px;"></em>品牌空间</a></li><li><a href="##"><em style="background-position:0 -140px;"></em>团购</a></li><li><a href="##"><em style="background-position:0 -160px;"></em>更便宜</a></li><li><a href="##"><em style="background-position:0 -180px;"></em>品牌旗舰店</a></li><li><a href="##"><em style="background-position:0 -200px;"></em>社区</a></li><li><a href="##"><em style="background-position:0 -220px;"></em>淘江湖</a></li></ul></div><div class="leftBottom"><h3>同城 <img src="images/city.jpg" width="24" height="14" alt="" /></h3><div class="leftTab"><ul id="tab_one"><li class="cityCur"><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 class="leftTabNews first"><div class="NewsPic"><a href="javascript:void(0)" class="NewsLeft"></a><ul><li class="ImgDisplay"><a href="##"><img src="images/city1.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city2.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city1.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city2.jpg" width="164" height="65" alt="" /></a></li></ul><a href="javascript:void(0)" class="NewsRight"></a></div><div class="NewsInfo"><p>11111张纪中版《西游记》目前在赶拍中如纪中版《西游记》目前在赶拍中,如果顺利,在赶拍中... <a href="##"></a></p></div></div><div class="leftTabNews"><div class="NewsPic"><a href="javascript:void(0)" class="NewsLeft"></a><ul><li class="ImgDisplay"><a href="##"><img src="images/city2.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city1.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city2.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city1.jpg" width="164" height="65" alt="" /></a></li></ul><a href="javascript:void(0)" class="NewsRight"></a></div><div class="NewsInfo"><p>222222张纪中版《也将于开播张纪中版《西游记》目前在赶拍中,如果顺利,在赶拍中... <a href="##"></a></p></div></div><div class="leftTabNews"><div class="NewsPic"><a href="javascript:void(0)" class="NewsLeft"></a><ul><li class="ImgDisplay"><a href="##"><img src="images/city1.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city2.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city1.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city2.jpg" width="164" height="65" alt="" /></a></li></ul><a href="javascript:void(0)" class="NewsRight"></a></div><div class="NewsInfo"><p>333333张纪中版《西游顺利,也将于开播张纪中版《西游记》目前在赶拍中,如果顺利,在赶拍中... <a href="##"></a></p></div></div><div class="leftTabNews"><div class="NewsPic"><a href="javascript:void(0)" class="NewsLeft"></a><ul><li class="ImgDisplay"><a href="##"><img src="images/city2.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city1.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city2.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city1.jpg" width="164" height="65" alt="" /></a></li></ul><a href="javascript:void(0)" class="NewsRight"></a></div><div class="NewsInfo"><p>44444张纪中版《西游记》利,也将于开播张纪中版《西游记》目前在赶拍中,如果顺利,在赶拍中... <a href="##"></a></p></div></div><div class="leftTabNews"><div class="NewsPic"><a href="javascript:void(0)" class="NewsLeft"></a><ul><li class="ImgDisplay"><a href="##"><img src="images/city1.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city2.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city1.jpg" width="164" height="65" alt="" /></a></li><li><a href="##"><img src="images/city2.jpg" width="164" height="65" alt="" /></a></li></ul><a href="javascript:void(0)" class="NewsRight"></a></div><div class="NewsInfo"><p>555555张纪中版《西利,也将于开播张纪中版《西游记》目前在赶拍中,如果顺利,在赶拍中... <a href="##"></a></p></div></div></div></div></div><div class="middle"><div class="mTitle"><i>04</i><b></b><span>解读时与最高端的时尚生活品味为伍。</span><em>04/03/ <a href="##"></a></em></div><div class="mBanner" id="Pictures"><ul id="box"><li class="boxCur"><a href="##"><img src="images/pic1.jpg" width="460" height="267" alt="" /></a><div class="bigPic"><div class="bigPicT"><span></span><h3>中国式时尚</h3></div><p>手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出你的个性潮流风尚。机的更新换代也是非常之快，受世人关注程度也日益增加。手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出</p></div></li><li><a href="##"><img src="images/pic2.jpg" width="460" height="267" alt="" /></a><div class="bigPic"><div class="bigPicT"><span></span><h3>中国式时尚</h3></div><p>手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出你的个性潮流风尚。机的更新换代也是非常之快，受世人关注程度也日益增加。手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出</p></div></li><li><a href="##"><img src="images/pic3.jpg" width="460" height="267" alt="" /></a><div class="bigPic"><div class="bigPicT"><span></span><h3>中国式时尚</h3></div><p>手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出你的个性潮流风尚。机的更新换代也是非常之快，受世人关注程度也日益增加。手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出</p></div></li><li><a href="##"><img src="images/pic4.jpg" width="460" height="267" alt="" /></a><div class="bigPic"><div class="bigPicT"><span></span><h3>中国式时尚</h3></div><p>手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出你的个性潮流风尚。机的更新换代也是非常之快，受世人关注程度也日益增加。手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出</p></div></li><li><a href="##"><img src="images/pic5.jpg" width="460" height="267" alt="" /></a><div class="bigPic"><div class="bigPicT"><span></span><h3>中国式时尚</h3></div><p>手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出你的个性潮流风尚。机的更新换代也是非常之快，受世人关注程度也日益增加。手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出</p></div></li><li><a href="##"><img src="images/pic6.jpg" width="460" height="267" alt="" /></a><div class="bigPic"><div class="bigPicT"><span></span><h3>中国式时尚</h3></div><p>手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出你的个性潮流风尚。机的更新换代也是非常之快，受世人关注程度也日益增加。手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出</p></div></li><li><a href="##"><img src="images/pic7.jpg" width="460" height="267" alt="" /></a><div class="bigPic"><div class="bigPicT"><span></span><h3>中国式时尚</h3></div><p>手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出你的个性潮流风尚。机的更新换代也是非常之快，受世人关注程度也日益增加。手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出</p></div></li><li><a href="##"><img src="images/pic8.jpg" width="460" height="267" alt="" /></a><div class="bigPic"><div class="bigPicT"><span></span><h3>中国式时尚</h3></div><p>手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出你的个性潮流风尚。机的更新换代也是非常之快，受世人关注程度也日益增加。手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出</p></div></li><li><a href="##"><img src="images/pic2.jpg" width="460" height="267" alt="" /></a><div class="bigPic"><div class="bigPicT"><span></span><h3>中国式时尚</h3></div><p>手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出你的个性潮流风尚。机的更新换代也是非常之快，受世人关注程度也日益增加。手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出</p></div></li><li><a href="##"><img src="images/pic5.jpg" width="460" height="267" alt="" /></a><div class="bigPic"><div class="bigPicT"><span></span><h3>中国式时尚</h3></div><p>手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出你的个性潮流风尚。机的更新换代也是非常之快，受世人关注程度也日益增加。手机已成为我们的生活必备品，一款个性时尚手机，就能彰显出</p></div></li></ul><div class="smallPic"><div class="smallLeft"><a href="javascript:void(0)"></a></div><div class="smallContent"><ul><li class="oldsmall smallCur"><a href="##"><img src="images/small1.jpg" width="39" height="38" alt="" /></a></li><li class="oldsmall"><a href="##"><img src="images/small2.jpg" width="39" height="38" alt="" /></a></li><li class="oldsmall"><a href="##"><img src="images/small3.jpg" width="39" height="38" alt="" /></a></li><li class="oldsmall"><a href="##"><img src="images/small4.jpg" width="39" height="38" alt="" /></a></li><li class="oldsmall"><a href="##"><img src="images/small5.jpg" width="39" height="38" alt="" /></a></li><li class="oldsmall"><a href="##"><img src="images/small6.jpg" width="39" height="38" alt="" /></a></li><li class="oldsmall"><a href="##"><img src="images/small7.jpg" width="39" height="38" alt="" /></a></li><li class="oldsmall"><a href="##"><img src="images/small1.jpg" width="39" height="38" alt="" /></a></li><li class="oldsmall"><a href="##"><img src="images/small2.jpg" width="39" height="38" alt="" /></a></li><li class="oldsmall"><a href="##"><img src="images/small3.jpg" width="39" height="38" alt="" /></a></li></ul></div><div class="smallRight"><a href="javascript:void(0)"></a></div></div></div><div class="middleTab"><ul id="tab_Two"><li class="tabTwoCur"><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 class="middleNews firstTwo"><ul><li><img src="images/news1.jpg" width="68" height="95" alt="" /><div class="news"><h3><a href="##">11巴黎时装周豆腐</a></h3><p>从一百多年前的“不可告过渡到今天人类对恋情一种勇时也是一类对... <a href="##"></a></p></div></li><li><img src="images/news2.jpg" width="68" height="95" alt="" /><div class="news"><h3><a href="##">巴黎时装周冻豆腐</a></h3><p>从一百多年前的“不可告过渡到今天人类对恋情一种勇时也是一类对... <a href="##"></a></p></div></li><li><img src="images/news3.jpg" width="68" height="95" alt="" /><div class="news"><h3><a href="##">巴黎时装周冻豆腐</a></h3><p>从一百多年前的“不可告过渡到今天人类对恋情一种勇时也是一类对... <a href="##"></a></p></div></li><li><img src="images/news4.jpg" width="68" height="95" alt="" /><div class="news"><h3><a href="##">巴黎时装周冻豆腐</a></h3><p>从一百多年前的“不可告过渡到今天人类对恋情一种勇时也是一类对... <a href="##"></a></p></div></li></ul></div><div class="middleNews"><ul><li><img src="images/news2.jpg" width="68" height="95" alt="" /><div class="news"><h3><a href="##">22巴黎时装周豆腐</a></h3><p>从一百多年前的“不可告过渡到今天人类对恋情一种勇时也是一类对... <a href="##"></a></p></div></li><li><img src="images/news3.jpg" width="68" height="95" alt="" /><div class="news"><h3><a href="##">巴黎时装周冻豆腐</a></h3><p>从一百多年前的“不可告过渡到今天人类对恋情一种勇时也是一类对... <a href="##"></a></p></div></li><li><img src="images/news1.jpg" width="68" height="95" alt="" /><div class="news"><h3><a href="##">巴黎时装周冻豆腐</a></h3><p>从一百多年前的“不可告过渡到今天人类对恋情一种勇时也是一类对... <a href="##"></a></p></div></li><li><img src="images/news4.jpg" width="68" height="95" alt="" /><div class="news"><h3><a href="##">巴黎时装周冻豆腐</a></h3><p>从一百多年前的“不可告过渡到今天人类对恋情一种勇时也是一类对... <a href="##"></a></p></div></li></ul></div><div class="middleNews"><ul><li><img src="images/news1.jpg" width="68" height="95" alt="" /><div class="news"><h3><a href="##">33吧里I时装周豆腐</a></h3><p>从一百多年前的“不可告过渡到今天人类对恋情一种勇时也是一类对... <a href="##"></a></p></div></li><li><img src="images/news3.jpg" width="68" height="95" alt="" /><div class="news"><h3><a href="##">巴黎时装周冻豆腐</a></h3><p>从一百多年前的“不可告过渡到今天人类对恋情一种勇时也是一类对... <a href="##"></a></p></div></li><li><a href="##">开放平台</a></li></ul><p><a href="##">阿里巴巴集团</a>：阿里巴巴网络-<a href="##">中国站</a> <a href="##">国际站</a> <a href="##">日文站</a> | <a href="##">淘宝站</a> | <a href="##">支付宝</a> | <a href="##">中国雅虎</a> | <a href="##">口碑网</a> | <ahref="##"> 阿里软件</a> | <a href="##">阿里妈妈</a> | <a href="##">集团研究中心</a> | <a href="##">淘宝天下</a></p><div class="bottom"><div class="bottomPicLeft"><img src="images/bottomLeft.jpg" width="60" height="65" alt="" /><img src="images/bottomLeft2.jpg" width="75" height="65" alt="" /></div><div class="bottomPicMiddle"><p>Copyright © - 版权所有</p><p>增值电信业务经营许可证：浙B2-0224</p><p>信息网络传播视听节目许可证：1109364号</p></div><div class="bottomPicRight"><img src="images/bottomRight.jpg" width="55" height="55" alt="" /><img src="images/bottomRight2.jpg" width="55" height="55" alt="" /></div></div></div></body></html><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/script.js"></script>