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模板网站
