<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>快乐购首页</title>
<link rel="stylesheet" type="text/css" href="./css/head.css"/>
<link rel="stylesheet" type="text/css" href="./css/index.css"/>
<link rel="stylesheet" type="text/css" href="./css/footer.css"/>
<script src="./js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//轮播图效果
var c = 0;
//加一个时间事件
function timer(){
//获得序号
c++;
if(c==6){
c=0;
}
// alert(c);
//让自己显示，兄弟元素隐藏
$("#inBaner .big_eye_pic li").eq(c).stop().fadeIn(1800).siblings().fadeOut(800);
//改变颜色
$("#inBaner .btn ul li").eq(c).stop().addClass("cur").siblings().removeClass("cur");
}
time = setInterval(timer,2000);
//给图片添加一个移入移出效果
$("#inBaner").hover(function(){
//停止时间
clearInterval(time);
},function(){
//时间继续
time = setInterval(timer,2000);
});
//给色块添加一个移入移出事件
$("#inBaner .btn ul li").mouseenter(function(){
var n = $(this).index();
//让第一个人图片显示 其余的隐藏
$("#inBaner .big_eye_pic li").eq(n).stop().show().siblings().hide();
//改变颜色
$("#inBaner .btn ul li").eq(n).stop().addClass("cur").siblings().removeClass("cur");
});
//添加一个点击事件
$(".her_top .her_title .her_menu li").click(function(){
var n = $(this).index();
//切换颜色
$(".her_menu li").eq(n).addClass("current").siblings().removeClass("current");
//切换商品
$(".her_top .pro_con").eq(n).show().siblings(".pro_con").hide();
})
//搜索框下滑
$(window).scroll(function(){
//获得滚动条距离顶部距离
var t = $(document).scrollTop();
document.title = t;
if(t>530){
$("#nav").show();
}else{
$("#nav").hide();
}
});
});
</script>
</head>
<body>
<!--顶部公用-->
<div class="header">
<!--顶部导航-->
<div class="header_top">
<div class="w1200">
<div class="h_t_l">
<div class="login_l">
<span>欢迎来到快乐购!</span>
<a class="a_login" href="register.html">[登录]</a>
<span class="line"></span>
<a class="" href="login.html">[注册]</a>
</div>
</div>
<div class="h_t_r">
<ul>
<li>
<a href="">订单查询</a>
<span class="line"></span>
</li>
<li>
<a href="">我的快乐购</a>
<span class="line"></span>
</li>
<li>
<i class="tel_icon"></i>
<a href="">400-705-1111</a>
<span class="line"></span>
</li>
<li>
<a href="">下载快乐购app</a>
<div class="down_load">
<div class="down_border">
<b class="icon_top"></b>
<img style="" src="image/down_load_20160411.png">
<p>快乐生活 快乐购</p>
</div>
</div>
<span class="line"></span>
</li>
<li class="cus_c_box">
<a href="">客服中心</a>
<div class="cus_center">
<a href="">帮助中心</a>
<a href="">会员反馈</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--搜索-->
<div class="full_sc">
<div class="w1200 header_conter">
<div class="h_c_logo">
<a href="index.html">
<img src="./image/logo.jpg"/>
</a>
</div>
<div class="h_c_bz">
<img src="./image/top_center.jpg" style="width: 467px;29px"/>
</div>
<div class="h_c_search">
<div class="search_input">
<form action="" method="post">
<input type="text" style="color: rgb(102, 102, 102);" name="keyword" class="text_search" placeholder="limu 胶原蛋白" value="" />
<input type="submit" class="btn_search" value="搜索"/>
</form>
</div>
<div class="search_key">
<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>
<li>
<a href="">BB霜</a>
</li>
<li>
<a href="">乳胶枕</a>
</li>
<li>
<a href="">蝙蝠侠系列石英表</a>
</li>
<li>
<a href="">拍立得</a>
</li>
</ul>
</div>
</div>
<div class="h_c_right">
<a href="" class="h_c_r_car">
<b class="b_car1"></b>
<span><i class="ci-count">0</i>我的购物车</span>
<b class="b_car2"></b>
</a>
</div>
</div>
</div>
<!--菜单-->
<div class="full_nav">
<div class="w1200">
<ul class="nav">
<li class="li_all_type">
<a href="">全部分类</a>
<b class="b_down"></b>
</li>
<li class="home">
<a href="index.html" style="color: #C41F3A;">首页</a>
</li>
<li>
<a href="refined.html">精选品牌</a>
</li>
<li>
<a href="go.html">全球购</a>
</li>
<li>
<a href="brand.html">品牌馆</a>
</li>
</ul>
</div>
</div>
</div>
<!--头部end-->
<!--轮播区域-->
<div class="full_big_eye">
<!--菜单-->
<div class="index_type">
<ul class="index_type_ul">
<li>
<span>个护美妆<b>></b></span>
<div class="nav_type_list" data="1">
<ul>
<li><a href="list.html" target="_blank">面部护肤</a></li>
<li><a href="list.html" target="_blank">洗发护发</a></li>
<li><a href="list.html" target="_blank">身体护理</a></li>
<li><a href="list.html" target="_blank">口腔护理</a></li>
<li><a href="list.html" target="_blank">女性个护</a></li>
<li><a href="list.html" target="_blank">香水彩妆</a></li>
</ul>
</div>
</li>
<li>
<span>个护美妆<b>></b></span>
<div class="nav_type_list" data="1">
<ul>
<li><a href="list.html" target="_blank">面部护肤</a></li>
<li><a href="list.html" target="_blank">洗发护发</a></li>
<li><a href="list.html" target="_blank">身体护理</a></li>
<li><a href="list.html" target="_blank">口腔护理</a></li>
<li><a hr
HTML快乐购商城模板
需积分: 19 200 浏览量
2018-07-06
09:34:12
上传
评论 1
收藏 9.34MB RAR 举报
HTML快乐购商城模板 （168个子文件） 
suercenter.css 14KB go.css 14KB iemt.css 12KB index.css 10KB head.css 10KB footer.css 5KB login.css 4KB goods.css 2KB refined.css 2KB contact.css 1KB list.css 1KB submit.css 2B
index.html 43KB go.html 28KB gou_2.html 28KB refined.html 27KB iemt.html 24KB list.html 21KB submitpath.html 15KB usersub.html 15KB newPath.html 13KB brand.html 12KB usercenter.html 11KB userindex.html 10KB usertui.html 9KB collect.html 8KB truesubmit.html 7KB submit.html 6KB register.html 5KB login.html 4KB
d_1.jpg 308KB d_8.jpg 280KB register.jpg 264KB d_4.jpg 239KB logo_img.jpg 223KB web-101-101-1.jpg 220KB d_7.jpg 200KB d_6.jpg 200KB p_4.jpg 172KB web-101-101-3.jpg 166KB web-101-101-4.jpg 160KB d_5.jpg 153KB d_2.jpg 152KB web-101-101-2.jpg 145KB web-101-101-5.jpg 141KB p_7.jpg 107KB list_top_1.jpg 103KB p_6.jpg 102KB top_2_4.jpg 92KB d_3.jpg 85KB top_2_1.jpg 81KB p_5.jpg 80KB top_2_5.jpg 77KB top_2_2.jpg 75KB top_2_3.jpg 74KB p_3.jpg 73KB shop_1.jpg 68KB t_1.jpg 67KB p_8.jpg 66KB p_2.jpg 64KB shop_9.jpg 61KB list_2.jpg 57KB list_1.jpg 56KB list_8.jpg 55KB c.jpg 52KB pin_1.jpg 51KB p_1.jpg 51KB list_3.jpg 49KB list_6.jpg 48KB list_5.jpg 46KB list_4.jpg 45KB day_11.jpg 44KB foot_img1.jpg 38KB day_12.jpg 38KB t_11.jpg 37KB t_10.jpg 35KB list_7.jpg 35KB day_10.jpg 34KB top_2.jpg 34KB day_9.jpg 32KB day_8.jpg 30KB shop_8.jpg 30KB shop_7.jpg 28KB t_3.jpg 28KB day_6.jpg 28KB t_7.jpg 26KB shop_4.jpg 26KB t_5.jpg 25KB shop_11.jpg 25KB t_9.jpg 25KB tui_5.jpg 24KB t_12.jpg 24KB shop_12.jpg 24KB day_4.jpg 23KB top_3.jpg 21KB shop_5.jpg 21KB shop_3.jpg 21KB shop_6.jpg 21KB t_8.jpg 21KB t_4.jpg 21KB共 168 条
- 1
- 2
资源评论
