HTML5期末大作业
文章目录
HTML5期末大作业一、作品展示二、文件目录三、代码实现四、学习资料一、作品展示
二、文件目录
三、代码实现
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>仿团购首页html+css</title><link rel="stylesheet" type="text/css" href="css/common.css"><link rel="stylesheet" type="text/css" href="css/index.css"><link href="favicon.ico" type="image/x-icon" rel="icon"></head><body><div class="m_side_btns" id="m_side_btns"><a class="side_btn toTopBtn" href="javascript:;" id="returnToTop" style="display:none;">回 到顶 部</a><a class="side_btn surveyBtn" href="javascript:;">问 卷调 查</a><a class="side_btn helpBtn" href="javascript:;">帮 助中 心</a><a class="side_btn fbBtn" href="javascript:;">意 见反 馈</a></div><!--顶部--><div class="g_header"><div class="topbg"><div class="wrap1200 clearFix"><ul class="hd_l fl"><li> <a class="collection" href="javascript:;">收藏团购</a> <a class="login" href="login.html">登录</a> <a class="register" href="register.html">注册</a><div class="app_box fl"><a class="app" href="javascript:;">手机团购 <span class="phone"></span> <span class="arrow"></span> </a><div class="app_pos"><a class="app_pos_one" href="javascript:;"><p>免费下载团购手机版</p> <img src="images/app_down.png" alt=""> <span class="app_pos_r"></span> </a><a href="javascript:;"><p>免费下载团购手机版</p> <img src="images/app_down.png" alt=""> <span class="app_pos_r"></span> </a></div></div></li></ul><a class="order fl" href="javascript:;">我的订单</a><ul class="hd_r fr clearFix"><li class="fl hd_r_list"><div class="text_limit"><a class="text" href="javascript:;">我的团购 <span class="line_r"></span> <span class="arrow_r"></span> </a></div><ul class="admin_pos"><li> <a href="javascript:;">我的订单</a> <a href="javascript:;">我的评价</a> <a href="javascript:;">我的收藏</a> <a href="javascript:;">我的积分</a> <a href="javascript:;">抵用劵</a> <a href="javascript:;">团购余额</a> <a href="javascript:;">账户充值</a> <a href="javascript:;">账户设置</a> </li></ul></li><li class="fl hd_r_list"><div class="text_limit"><a class="text" href="javascript:;">最近浏览 <span class="line_r"></span> <span class="arrow_r"></span> </a></div><div class="browse_pos"><div class="browse_pos_t"><a href="javascript:;"> <img src="images/l_hoom.png" alt=""> </a><a class="tit" href="javascript:;">润光格林酒店大床入住1晚</a><a class="money" href="javascript:;">￥138<b>219</b></a></div><a class="clear" href="javascript:;">清楚最近浏览记录</a></div></li><li class="fl hd_r_list"><div class="text_limit"><a class="text cart" href="javascript:;">购物车<span> 0 </span>件 <span class="line_r"></span> <span class="arrow_r"></span> <span class="cart_r"></span> </a></div><div class="cart_pos"><p>暂时没有商品</p></div></li><li class="fl hd_r_list"><div class="text_limit"><a class="text" href="javascript:;">联系客服 <span class="line_r"></span> <span class="arrow_r"></span> </a></div><ul class="admin_pos wid92"><li> <a href="javascript:;">申请退款</a> <a href="javascript:;">申请退换货</a> <a href="javascript:;">查看团购劵</a> <a href="javascript:;">换绑手机号</a> <a href="javascript:;">常见问题</a> </li></ul></li><li class="fl hd_r_list"><div class="text_limit"><a class="text" href="javascript:;">我是商家 <span class="line_r"></span> <span class="arrow_r"></span> </a></div><ul class="admin_pos wid97"><li> <a href="javascript:;">登录商家中心</a> <a href="javascript:;">我想合作</a> <a href="javascript:;">商家营销平台</a> </li></ul></li><li class="fl hd_r_list"><div class="text_limit"><a class="text" href="javascript:;">更多 <span class="arrow_r"></span> </a></div><ul class="admin_pos wid92"><li> <a href="javascript:;">手机版</a> <a href="javascript:;">邮件订阅</a> <a href="javascript:;">邀请好友</a> </li></ul></li></ul></div></div><div class="hd_line"></div><div class="hd_ad wrap1200"><a href="javascript:;" alt=""> <img class="show" src="images/hd_ad2.jpg" alt=""> </a><a href="javascript:;" alt=""> <img src="images/hd_ad1.jpg" alt=""> </a><a href="javascript:;" alt=""> <img src="images/hd_ad3.jpg" alt=""> </a><a class="ad_clear" href="javascript:;"></a><div class="switch clearFix"><a class="active" href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div></div><div class="wrap1200 hd_cont clearFix"><div class="hd_cont_l fl clearFix"><a class="fl" href="javascript:;"><h1>团购</h1></a><a class="fl city" href="javascript:;">北京<span>切换城市</span></a></div><div class="hd_cont_c fl clearFix"><input class="text fl" type="text" placeholder="请输入商品名称、地址等"><input class="submit fl" type="submit" value="搜索"><div class="tuan_pos"><a class="c_tuan" href="javascript:;">团购</a><a class="c_Business" href="javascript:;">商家</a></div><ul class="clearFix"><li><a href="javascript:;">电影</a></li><li><a href="javascript:;">自助餐</a></li><li><a href="javascript:;">KTV</a></li><li><a href="javascript:;">生日蛋糕</a></li><li><a href="javascript:;">烤肉</a></li><li><a href="javascript:;">烤鱼</a></li><li><a href="javascript:;">按摩</a></li><li><a href="javascript:;">汉丽轩</a></li><li><a href="javascript:;">电影票</a></li><li><a href="javascript:;">蛋糕</a></li></ul></div><div class="hd_cont_r fr"><a href="javascript:;"></a></div><div class="hd_cont_b fl clearFix"><dl class="hd_cont_b_l fl clearFix"><dt><a href="javascript:;">全部分类</a></dt><dd><a href="index.html">首页</a></dd><dd><a href="list.html">身边团购</a></dd><dd><a href="list.html">身边外卖</a></dd><dd><a href="list.html">今日新单</a></dd><dd><a href="list.html">购物</a></dd><dd><a href="list.html">商家点评</a></dd><dd><a href="list.html">大牌街</a></dd><dd><a class="buy" href="list.html">名店抢购</a></dd></dl><ul class="hd_cont_b_r fl clearFix"><a class="fl" href="javascript:;">下载团购手机版</a></ul></div></div></div><!--顶部结束--><div class="wrap1200"><div class="g_nav fl clearFix"><div class="snav fl"><div class="snav_item "><dl class="unusual"><dt class="sort"> <a href="javascript:;"> 美食 </a> </dt><dd><a href="javascript:;"> 自助餐 </a><a href="javascript:;"> 火锅 </a><a href="javascript:;"> 烤肉 </a></dd></dl><span class="more_pos"></span></div><div class="snav_item"><dl><dt class="sort"> <a href="javascript:;"> 酒店 </a> </dt><dd><a href="javascript:;"> 经济型酒店 </a><a href="javascript:;"> 主题酒店 </a><a href="javascript:;"> 豪华酒店 </a></dd></dl><span class="more_pos"></span></div><div class="snav_item "><dl class="snav_special"><dt class="sort"> <a href="javascript:;"> 电影/在线选座 </a> </dt></dl><span class="more_pos"></span></div><div class="snav_item"><dl><dt class="sort"> <a href="javascript:;"> 休闲娱乐 </a> </dt><dd><a href="javascript:;"> KTV </a><a href="javascript:;"> 足疗按摩 </a><a href="javascript:;"> 水上世界 </a></dd></dl><span class="more_pos"></span></div><div class="snav_item"><dl><dt class="sort"> <a href="javascript:;"> 旅游 </a> </dt><dd><a href="javascript:;"> 景点门票 </a><a href="javascript:;"> 本地/周边游 </a><a href="javascript:;"> 国内游 </a></dd></dl><span class="more_pos"></span><div class="m_pos">热门漂流</div></div><div class="snav_item"><dl><dt class="sort"> <a href="javascript:;"> 生活服务 </a> </dt><dd><a href="javascript:;"> 婚纱摄影 </a><a href="javascript:;"> 个性写真 </a><a href="javascript:;"> 儿童摄影 </a></dd></dl><span class="more_pos"></span><div class="m_pos life_pos">品质婚纱照</div></div><div class="snav_item"><dl><dt class="sort"> <a href="javascript:;"> 购物 </a> </dt><dd><a href="javascript:;"> 电器/数码 </a><a href="javascript:;"> 女装 </a><a href="javascript:;"> 男装 </a></dd></dl><span class="more_pos"></span></div><div class="snav_item"><dl><dt class="sort"> <a href="javascript:;"> 丽人 </a> </dt><dd><a href="javascript:;"> 美发 </a><a href="javascript:;"> 美容美体 </a><a href="javascript:;"> 美甲 </a></dd></dl><span class="more_pos"></span><div class="m_pos">七夕送好礼</div></div><div class="snav_item "><dl class="snav_particular"><dt class="sort"> <a href="javascript:;"> 抽奖 </a> </dt></dl></div><div class="snav_pos"><h3> <a href="javascript:;">美食</a> </h3><ul><li class="food"> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> <a href="javascript:;"> 代金券 </a> </li></ul></div><div class="snav_pos"><h3> <a href="javascript:;">酒店</a> </h3><ul><li class="food"> <a href="javascript:;"> 经济型酒店 </a> <a href="javascript:;"> 豪华酒店 </a> <a href="javascript:;"> 公寓式酒店 </a> <a href="javascript:;"> 主题酒店 </a> <a href="javascript:;"> 度假酒店 </a> <a href="javascript:;"> 温泉酒店 </a> <a href="javascript:;"> 客栈 </a> <a href="javascript:;"> 青年旅舍 </a> </li></ul></div><div class="snav_pos"><h3> <a href="javascript:;">当前热映</a> </h3><ul><li class="food"> <a href="javascript:;"> 捉妖记 </a> <a href="javascript:;"> 煎饼侠 </a> <a href="javascript:;"> 西游记之大圣归来 </a> <a href="javascript:;"> 命中注定 </a> <a href="javascript:;"> 小羊肖恩 </a> <a href="javascript:;"> 通灵之六世古宅 </a> <a href="javascript:;"> 谜城 </a> <a href="javascript:;"> 模仿游戏 </a> </li></ul></div><div class="snav_pos"><h3> <a href="javascript:;">休闲娱乐</a> </h3><ul><li class="food"> <a href="javascript:;"> 足疗按摩 </a> <a href="javascript:;"> 温泉 </a> <a href="javascript:;"> 洗浴/汗蒸 </a> <a href="javascript:;"> 运动健身 </a> <a href="javascript:;"> 咖啡/酒吧 </a> <a href="javascript:;"> 桌游/电玩 </a> <a href="javascript:;"> 景点郊游 </a> <a href="javascript:;"> 主题公园/游乐园 </a> </li></ul></div><div class="snav_pos"><h3> <a href="javascript:;">旅游</a> </h3><ul><li class="food"> <a href="javascript:;"> 景点门票 </a> <a href="javascript:;"> 跟团游 </a> <a href="javascript:;"> 自由行 </a> <a href="javascript:;"> 签证 </a> <a href="javascript:;"> 国内游 </a> <a href="javascript:;"> 桌游/电玩 </a> <a href="javascript:;"> 境外游 </a> </li></ul></div><div class="snav_pos"><h3> <a href="javascript:;">生活服务</a> </h3><ul><li class="food"> <a href="javascript:;"> 婚纱摄影 </a> <a href="javascript:;"> 个性写真 </a> <a href="javascript:;"> 儿童摄影 </a> <a href="javascript:;"> 其他摄影 </a> <a href="javascript:;"> 照片冲印 </a> <a href="javascript:;"> 汽车服务 </a> <a href="javascript:;"> 体检保健 </a> </li></ul></div><div class="snav_pos"><h3> <a href="javascript:;">购物</a> </h3><ul><li class="food"> <a href="javascript:;"> 女装 </a> <a href="javascript:;"> 男装 </a> <a href="javascript:;"> 内衣 </a> <a href="javascript:;"> 女士鞋包 </a> <a href="javascript:;"> 男士鞋包 </a> <a href="javascript:;"> 运动户外 </a> <a href="javascript:;"> 配饰手表 </a> </li></ul></div><div class="snav_pos"><h3> <a href="javascript:;">美发</a> </h3><ul><li class="food"> <a href="javascript:;"> 美容美体 </a> <a href="javascript:;"> 美甲 </a> <a href="javascript:;"> 瑜伽/舞蹈 </a> <a href="javascript:;">个性写真</a> </li></ul></div><div class="snav_pos"></div></div><div class="main fl"><div class="main_tp"><div class="main_tp_con"><h3 class="hot fl"> <i class="hot_icon"></i> <span class="">热门团购</span> </h3><div class="hot_all clearFix"><ul class=" fl "><li class="hot_all_item fl"> <a class="col_f76120" href="javascript:;">代金券</a> </li><li class="hot_all_item fl"> <a class="col_f76120" href="javascript:;">电影</a> </li><li class="hot_all_item fl"> <a class="col_f76120" href="javascript:;">经济型酒店</a> </li><li class="hot_all_item fl"> <a href="javascript:;">KTV</a> </li><li class="hot_all_item fl"> <a class="col_f76120" href="javascript:;">火锅</a> </li><li class="hot_all_item fl"> <a href="javascript:;">烤肉</a> </li><li class="hot_all_item fl"> <a href="javascript:;">足底按摩</a> </li><li class="hot_all_item fl"> <a href="javascript:;">游泳/上水乐园</a> </li><li class="hot_all_item fl"> <a }}})(), false);for (i = 0; i < floors.length; i++) {floors[i].index = i;floors[i].onclick = function() {$(scrollElement).stop().animate({scrollTop: floorToTops[this.index]});}}/* slides */function tabSwitch(tabsId, tabTag, baseClass, activeClass) {var tabs = document.getElementById(tabsId).getElementsByTagName(tabTag);return function(prev, crt) {tabs[prev.value].className = baseClass;tabs[crt].className += ' ' + activeClass;}}function updatePage() {return function(prev, crt, btns) {var spans = btns[1].getElementsByTagName('span');spans[0].innerHTML = crt + 1;}}function slideByTab(tabsId, tabTag, baseClass, activeClass) {var tabs = document.getElementById(tabsId).getElementsByTagName(tabTag);return function(slides, crtIdx, slide, duration) {for (var i = 0; i < tabs.length; i++) {tabs[i].index = i;tabs[i].onclick = function() {var crt = crtIdx.value,index = this.index;if (crt !== index) {tabs[crt].className = baseClass;this.className += ' ' + activeClass;if (crt > index) {slide('100%', '-100%', index, duration);} else {slide('-100%', '100%', index, duration);}crtIdx.value = index;}}}}}initSlide('nav_slide', 'ul', 'slide_btn', 300, 2500, slideByTab('nav_btns', 'span', 'tb', 'active'), tabSwitch('nav_btns', 'span', 'tb', 'active'), updatePage());initSlide('shop_slide', 'ul', 'slide_btn', 300, 4000, null, updatePage());initSlide('raffle_slide', 'li', 'slide_btn', 300, 3500, slideByTab('raffle_tabs', 'span', 'btn fl', 'active'), tabSwitch('raffle_tabs', 'span', 'btn fl', 'active'));initSlide('kill_slide', 'li', 'slide_btn', 300, 3000, slideByTab('kill_tabs', 'span', 'btn fl', 'active'), tabSwitch('kill_tabs', 'span', 'btn fl', 'active'));</script></body></html>
四、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
HTML+CSS大作业——仿团购商城(1页) 简单个人网页设计作业 静态HTML旅行主题网页作业 DW个人网站模板下载 大学生简单个人网页作品代码 个人网页制作 学生个人网页Dreamwe
