900字范文 > HTML5期末大作业：商城网站设计——仿团购商城(1页) 简单个人网页设计作业静态HTML

HTML5期末大作业：商城网站设计——仿团购商城(1页) 简单个人网页设计作业静态HTML

时间：2020-11-28 01:32:48

HTML5期末大作业：商城网站设计——仿团购商城(1页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码个人网页制作学生个人网页Dreamweaver设计作业

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

作品介绍

1.网页作品简介：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

HTML5期末大作业：商城网站设计——仿团购商城(1页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码个人网页制作学生个人网页Dreamweaver设计作业作品介绍一、作品展示二、文件目录三、代码实现四、学习资料五、完整源码六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!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>