淘宝网首页仿写(html+css+js）

伐木累!

已于 2024-01-30 11:40:15 修改

阅读量2.5w

点赞数 46

分类专栏：网页设计文章标签： html css

于 2021-08-10 16:19:33 首次发布

本文链接：https://blog.csdn.net/weixin_46811890/article/details/119572118

版权

网页设计专栏收录该内容

3 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
	<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
	<title>淘宝网首页</title>
	<!-- 引入favicon图标 -->
	<link rel="shortcut icon" href="favicon.ico" />
	<!-- 引入样式文件 -->
	<link href='css/style.css' type="text/css" rel="stylesheet">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<script src="js/js.js"></script>
	<script src="bootstrap/js/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.js"></script>
</head>

<body>
	<div class="bg">
		<!-- 顶栏菜单栏 -->
		<div class="top">
			<div class="top-l">
				<a href="#" style="color:red;">亲,请登录</a>
				<a href="#">免费注册</a>
				<a href="#">手机逛淘宝</a>
			</div>

			<div class="top-r">
				<ul>
					<li><a href="#" style="color:red;">淘宝网首页</a></li>
					<li><a href="#">我的淘宝</a></li>
					<li><a href="#"><span></span>购物车</a></li>
					<li><a href="#"><span></span>收藏夹</a></li>
					<li><a href="#">商品分类</a></li>
					<li><a href="#">卖家中心</a></li>
					<li><a href="#">联系客服</a></li>
					<li><a href="#"><span></span>网站导航</a></li>
				</ul>
			</div>
		</div>

		<div class="top-x">
			<img src='img/tianmao2.png'>
		</div>

		<!-- 搜索栏 -->
		<div class="sousuo">
			<img src='img/logo.jpg'>
			<input type="text" value=" 春节年货档" maxlength="30">
			<ul>
				<li><a href="#" style="color:red;">一淘限时抢</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="#">无线耳机</a></li>
				<li><a href="#">沐浴露</a></li>
				<li><a href="#">帆布鞋</a></li>
				<li><a href="#">电动车</a></li>
				<li><a href="#">牙膏</a></li>
			</ul>
		</div>

		<button class="btnFind">搜索</button>
		<!-- 超市平台 -->
		<div class="daily">
			<ul>
				<li><a href="#">每日爆品 1元起</a></li>
				<li><a href="#">聚划算</a></li>
				<li><a href="#">淘抢购</a></li>
				<li><a href="#">天猫超市</a></li>
				<li><a href="#">天猫国际官方直营</a></li>
			</ul>
		</div>
		<!-- 商品类别区 -->
		<div class="xia-l">
			<img src="upload/鞋_箱包.png" alt="">
			<table>
				<tr>
					<td>双肩背包</td>
					<td>托特包</td>
					<td>&nbsp;&nbsp;zara</td>
					<td>背包</td>
				</tr>
				<tr>
					<td class="color">行李箱</td>
					<td>腰包</td>
					<td>斜挎男包</td>
					<td>挎包</a></td>
				</tr>
			</table>
			<table>
				<img src="upload/数码.png" alt="">
				<tr>
					<td>空调</td>
					<td>冰箱</td>
					<td>&nbsp;耳机</td>
					<td class="color">格力空调</td>
				</tr>
				<tr>
					<td>投影仪</td>
					<td>键盘</td>
					<td>小冰箱</td>
					<td>饮水机</td>
				</tr>
			</table>
			<table>
				<img src="upload/女装.png" alt="">
				<tr>
					<td>凉鞋</td>
					<td>半身裙</td>
					<td>上衣夏</td>
					<td>套装夏</td>
				</tr>
				<tr>
					<td>鞋子</td>
					<td>高跟鞋</td>
					<td>半身裙夏</td>
					<td class="color">旗袍</td>
				</tr>
			</table>
			<table>
				<img src="upload/服饰-男装-线性.png" alt="">
				<tr>
					<td>短裤</td>
					<td>电动车</td>
					<td>帆布鞋</td>
					<td>打火机</td>
				</tr>
				<tr>
					<td>眼镜</td>
					<td class="color">&nbsp;头盔</td>
					<td>男士衬衫</td>
					<td>男裤</td>
				</tr>
			</table>
			<table>
				<img src="upload/母婴.png" alt="">
				<tr>
					<td>饼干</td>
					<td>文具盒</td>
					<td>婴儿床</td>
					<td class="color">护膝</a></td>
				</tr>
				<tr>
					<td>奶粉</td>
					<td>妈咪包</td>
					<td>月子服</td>
					<td>铅笔盒</td>
				</tr>
			</table>
			<table>
				<img src="upload/家居家纺.png" alt="">
				<tr>
					<td>床垫子</td>
					<td>拖鞋女</td>
					<td>&nbsp;枕头</td>
					<td class="color">四件套</td>
				</tr>
				<tr>
					<td>衣架</td>
					<td>毛巾</td>
					<td>洗脸巾</td>
					<td>夏凉被</td>
				</tr>
			</table>
			<table>
				<img src="upload/美食.png" alt="">
				<tr>
					<td>咖啡</td>
					<td>饼干</td>
					<td>茶叶</td>
					<td>零食礼包</td>
				</tr>
				<tr>
					<td class="color">巧克力</td>
					<td>牛肉干</a></td>
					<td>白酒</a></td>
					<td>&nbsp;矿泉水</td>
				</tr>
			</table>
			<table style="border-bottom:0;">
				<img src="upload/美妆类目.png" alt="">
				<tr>
					<td>沐浴乳</td>
					<td class="color">防晒霜</td>
					<td>&nbsp;香水</td>
					<td>口红</td>
				</tr>
				<tr>
					<td>防晒喷雾</td>
					<td>眼影盘</td>
					<td>眼影盒</td>
					<td>美甲</td>
				</tr>
			</table>
		</div>

		<div class="banner">
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="img/banner.jpg" alt="...">
					</div>
					<div class="item">
						<img src="img/banner.jpg" alt="...">
					</div>
					<div class="item">
						<img src="img/banner.jpg" alt="...">
					</div>
				</div>

				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
		<div class="product"></div>
		<!-- 我的淘宝 -->
		<div class="my">
			<table>
				<tr>
					<td colspan="2" style="border-top-style:none;">
						<img src="img/五角星.jpg" class="star">
						<a href="#" class="star">
							<span>我的淘宝</span>
						</a>
					</td>
				</tr>
				<tr>
					<td>
						<a href="#"><img src="img/天猫logo.jpg"></a>
					</td>
					<td>
						<a href="#"><img src='img/淘宝网logo.jpg'></a>
					</td>
				</tr>
				<tr>
					<td>
						<a href="#"><img src='img/聚划算logo.jpg'></a>
					</td>
					<td>
						<a href="#"><img src='img/天猫国际logo.jpg'></a>
					</td>
				</tr>
				<tr>
					<td>
						<a href="#"><img src='img/9.9logo.jpg'></a>
					</td>
					<td>
						<a href="#"><img src='img/淘抢购logo.jpg'></a>
					</td>
				</tr>
				<tr>
					<td>
						<a href="#"><img src='img/天猫超市logo.jpg'></a>
					</td>
					<td>
						<a href="#"><img src='./img/大药房logo.jpg'></a>
					</td>
				</tr>
			</table>
		</div>
		<!-- 超值专区 -->
		<div class="chaozhi">
			<p>超值活动专区</p>
			<em>每天10点更新</em>
		</div>

		<div class="fashion">
			<img src='img/时尚.jpg'>
			<img src='img/女装特惠.jpg' style="padding-left:5px;">
		</div>

		<div class="station">
			<img src='img/一站式.jpg'>
		</div>
		<!-- 一站式购物 -->
		<div class="yizhanshi">
			<a href="#">
				<p>
					<img src='img/男装.jpg'>
					<em>酱心十足 下饭开胃</em>
				</p>
			</a>
			<a href="#">
				<p>
					<img src='img/家居1.jpg'>
					<em>海尔净水品牌团</em>
				</p>
			</a>
			<a href="#">
				<p>
					<img src='img/聚划算.jpg'>
					<em>聚划算天天折上折</em>
				</p>
			</a>
			<a href="#">
				<p>
					<img src='img/活动.jpg'>
					<em>海尔净水品牌团</em>
				</p>
			</a>
		</div>
		<!-- 商品展区 -->
		<div class="like">
			<h3>猜你喜欢</h3>
			<div class="tuijian1">
				<a href="#">
					<img src='img/1.jpg'>
					<p style="margin:-15px 0px 0px 164px;">月销3</p>
				</a>
			</div>
			<div class="tuijian1">
				<a href="#">
					<img src='img/2.jpg'>
					<p style="margin:-15px 0px 0px 145px;">月销2981</p>
				</a>
			</div>
			<div class="tuijian1">
				<a href="#">
					<img src='img/3.jpg'>
					<p style="margin:-15px 0px 0px 132px;">月销5.13万</p>
				</a>
			</div>
			<div class="tuijian1">
				<a href="#">
					<img src='img/4.jpg'>
					<p style="margin:-15px 0px 0px 133px;">月销5.28万</p>
				</a>
			</div>
			<div class="tuijian1">
				<a href="#">
					<img src='img/5.jpg'>
					<p style="margin:-15px 0px 0px 152px;">月销143</p>
				</a>
			</div>
			<div class="tuijian1">
				<a href="#">
					<img src='img/6.jpg'>
					<p style="margin:-15px 0px 0px 133px;">月销2.08万</p>
				</a>
			</div>
			<div class="tuijian1">
				<a href="#">
					<img src='img/7.jpg'>
					<p style="margin:-15px 0px 0px 150px;">月销327</p>
				</a>
			</div>
			<div class="tuijian1">
				<a href="#">
					<img src='img/8.jpg'>
					<p style="margin:-15px 0px 0px 145px;">月销5106</p>
				</a>
			</div>

			<div class="tuijian1">
				<a href="#">
					<img src='img/9.jpg'>
					<p style="margin:-15px 0px 0px 150px;">月销384</p>
				</a>
			</div>
			<div class="tuijian1">
				<a href="#">
					<img src='img/10.jpg'>
					<p style="margin:-15px 0px 0px 132px;">月销3.22万</p>
				</a>
			</div>
			<div class="tuijian2">
				<a href="#">
					<img src='img/11.jpg'>
					<p>月销3.22万</p>
				</a>
			</div>
			<div class="tuijian2">
				<a href="#">
					<img src='img/15.jpg'>
					<p>月销3.22万</p>
				</a>
			</div>
			<div class="tuijian2">
				<a href="#">
					<img src='img/12.jpg'>
					<p>月销3.22万</p>
				</a>
			</div>
			<div class="tuijian2">
				<a href="#">
					<img src='img/13.jpg'>
					<p>月销3.22万</p>
				</a>
			</div>
			<div class="tuijian2">
				<a href="#">
					<img src='img/14.jpg'>
					<p>月销3.22万</p>
				</a>
			</div>
			<div class="tuijian2">
				<a href="#">
					<img src='img/16.jpg'>
					<p>月销3.22万</p>
				</a>
			</div>
			<div class="tuijian2">
				<a href="#">
					<img src='img/17.jpg'>
					<p>月销3.22万</p>
				</a>
			</div>
			<div class="tuijian2">
				<a href="#">
					<img src='img/18.jpg'>
					<p>月销3.22万</p>
				</a>
			</div>
			<div class="tuijian2">
				<a href="#">
					<img src='img/19.jpg'>
					<p>月销3.22万</p>
				</a>
			</div>
			<div class="tuijian2">
				<a href="#">
					<img src='img/20.jpg'>
					<p>月销3.22万</p>
				</a>
			</div>
		</div>
	</div>

	<div class="number">
		<a href="#" class="main">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
	</div>

	<div class="menu">
		<img src="img/新年-龙头.png" class='newYear'>
		<span class="gotop"">年货节</span>
		<span>促销</span>
		<span>热卖</span>
		<span>反馈</span>
	    <span class=" goback"></span>
	</div>
	<!-- 底栏 -->
	<div class="footer">
		<a href="#">
			<p>联系客服</p>
		</a>
		<a href="#">
			<p>开放平台</p>
		</a>
		<a href="#">
			<p>法律声明</p>
		</a>
		<p>Taobao.com版权所有2003-现在</p>
		<a href="#">
			<p>增值电信业务经营许可证</p>
		</a>
		<img src='img/公安.jpg' style="float:left;height:20px;margin:0 -12px 0 10px;">
		<p>浙公网安备 33010002******号</p>
		<a href="#">
			<p>阿里云计算</p>
		</a>
		<a href="#">
			<p>AliOS</p>
		</a>
		<a href="#">
			<p>阿里通信</p>
		</a>
		<a href="#">
			<p>高德</p>
		</a>
		<a href="#">
			<p>阿里巴巴集团</p>
		</a>
		<a href="#">
			<p>淘宝网</p>
		</a>
		<a href="#">
			<p>天猫</p>
		</a>
		<a href="#">
			<p>聚划算</p>
		</a>
		<a href="#">
			<p>全球速卖通</p>
		</a>
		<a href="#">
			<p>阿里巴巴国际交易市场</p>
		</a>
		<a href="#">
			<p>1688</p>
		</a>
		<a href="#">
			<p>阿里妈妈</p>
		</a>
		<a href="#">
			<p>飞猪</p>
		</a>
		<a href="#">
			<p>UC</p>
		</a>
		<a href="#">
			<p>友盟</p>
		</a>
		<a href="#">
			<p>虾米</p>
		</a>
		<a href="#">
			<p>阿里星球</p>
		</a>
		<a href="#">
			<p>钉钉</p>
		</a>
		<a href="#">
			<p>支付宝</p>
		</a>
		<a href="#">
			<p>达摩院</p>
		</a>

		<div class="symbol">
			<img src='img/police.jpg'>
			<img src='img/徽.jpg'>
			<img src='img/police1.jpg'>
		</div>
	</div>
	</div>
	<script src="js/js.js"></script>
</body>

</html>

* {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-decoration: none;
	font-family: 黑体;
}

/* 字体图标引用 */
@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot?a5ern');
	src: url('fonts/icomoon.eot?a5ern#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf?a5ern') format('truetype'),
		url('fonts/icomoon.woff?a5ern') format('woff'),
		url('fonts/icomoon.svg?a5ern#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

body {
	overflow-x: hidden;
}

/* 背景设置 */
.bg {
	position: relative;
	width: 1520px;
	height: 2270px;
	/* background-color: #F2F5F1; */
}

/* 顶部栏设置 */
.top {
	height: 33px;
	font-size: 11px;
	padding-left: 290px;
	line-height: 33px;
	background-color: #F5F5F5;
	overflow: hidden;
}

.top-l {
	float: left;
	margin-left: 20px;
}

.top-r ul {
	float: right;
	margin-right: 300px;
}

.top-r ul li {
	float: left;
	margin-right: 15px;
}

.top-r span {
	font-family: 'icomoon';
	font-size: 10px;
	color: #808080;
}

.top-r span:hover {
	color: #F03726;
}

.top a {
	color: gray;
}

.top a:hover {
	color: #FF0000;
}

/* 天猫超市一站式购齐 */
.top-x {
	position: relative;
	/* width: 1500px; */
	height: 80px;
	/* background-color: #4ad2aa; */
	background-color: #f4430d;
}

.top-x img {
	display: block;
	width: 1070px;
	height: 80px;
	margin: 0 auto;
}

/* 搜索栏 */
.sousuo input {
	float: left;
	width: 530px;
	height: 35px;
	margin-left: 30px;
	margin-top: 2px;
	color: #999;
	border: 2.5px solid #FF0000;
	border-right: none;
	outline: none;
}

.btnFind {
	position: absolute;
	top: 135px;
	right: 33%;
	width: 70px;
	height: 35px;
	font-size: 14px;
	border: 0;
	background: #ec4c3e;
	color: #fff;
}

.sousuo {
	float: left;
	width: 1020px;
	height: 75px;
	margin: 20px 0px 0px 230px;
}

.sousuo img {
	float: left;
	width: 170px;
	height: 75px;
}

.sousuo ul {
	float: left;
	margin: 5px 0px 0px 30px;
}

.sousuo ul li {
	float: left;
	padding-right: 12px;
	font-size: 14px;
}

.sousuo a {
	color: #808080;
}

.sousuo a:hover {
	text-decoration: underline;
	color: #f03726;
}

.sousuo a:active {
	border: 1px dashed #F03726;
}

/* 每日爆品 */
.daily {
	width: 1520px;
	height: 30px;
	margin-top: 120px;
	background-color: #f03726;
}

.daily a {
	color: #FFFFFF;
}

.daily ul {
	margin-left: 225px;
}

.daily ul li {
	float: left;
	padding-right: 50px;
	font-size: 14px;
	line-height: 30px;
}

/* 商品种类 */
.xia-l {
	width: 235px;
	height: 480px;
	font-size: 22px;
	margin-left: 225px;
	border-color: #F03726;
	border-style: solid;
	border-width: 0 1px 1px;
	background-color: white;
	overflow: hidden;
}

.xia-l img {
	position: absolute;
	width: 28px;
	margin: 18px 0 3px 10px;
	color: #F03726;
	z-index: 9999;
}

.xia-l table {
	position: relative;
	width: 235px;
	height: 15px;
	/* margin-bottom: 8px; */
	margin-top: 8px;
	border-bottom: 1px solid #F5F5F5;
}

.xia-l table tr {
	display: block;
	margin-left: 40px;
	line-height: 25.3px;
}

.xia-l td:hover {
	text-decoration: underline;
}

.xia-l table td {
	padding-left: 10px;
	font-size: 12px;
}

.xia-l .color {
	color: #F03726;
}

.banner {
	float: left;
	width: 465px;
	height: 240px;
	margin: -481px 0px 0px 470px;
}

.carousel,
.carousel img {
	width: 100%;
	height: 240px !important;
}

.product {
	position: absolute;
	top: 11.6%;
	right: 29%;
	width: 130px;
	height: 240px;
	background-color: pink;
	background: url("../img/产品.jpg") no-repeat;
}

/* 我的淘宝 */
.my {
	float: right;
	width: 208px;
	height: 238px;
	margin: -480px 224px 0px 0px;
	border: 1px solid #F5F5F5;
	text-align: center;
}

.my table {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}

.my span {
	font-size: 14px;
	color: #F03726;
}

.my .star {
	width: 21px;
	vertical-align: bottom;
}

.my img {
	width: 70px;
}

/* 超值活动专区 */
.chaozhi {
	float: left;
	width: 465px;
	height: 26px;
	margin: -230px 0px 0px 470px;
	color: #F03726;
	font-size: 13px;
	border-bottom: 2px solid #F03726;
}

.chaozhi p {
	float: left;
	margin-top: 5px;
	color: #A9A9A9;
}

.chaozhi em {
	float: right;
	margin-top: 5px;
	font-style: normal;
}

.fashion {
	float: left;
	width: 465px;
	height: 190px;
	margin: -190px 0px 0px 470px;
}

.fashion img {
	float: left;
	width: 230px;
	height: 190px;
}

.station {
	position: absolute;
	top: 524px;
	right: 440px;
	width: 130px;
}

.station img {
	width: 130px;
	height: 221px;
}

.yizhanshi {
	position: relative;
	float: right;
	width: 208px;
	height: 221px;
	margin: -220px 224px 0px 0px;
	border: 1px solid #F5F5F5;
}

.yizhanshi img {
	float: left;
	height: 15px;
	margin: -1px 5px 10px 7px;
}

.yizhanshi p {
	float: left;
	margin-top: 5px;
	font-size: 10px;
}

.yizhanshi em {
	font-style: normal;
}

.yizhanshi a {
	color: #808080;
}

.yizhanshi a:hover {
	color: #F03726;
}

/* 商品展示区 */
.like {
	width: 1072px;
	margin: 25px auto;
}

.like h3 {
	margin-bottom: 5px;
	font-family: 幼圆;
	font-size: 15px;
	color: #F03726;
}

.tuijian1,
.tuijian2 {
	position: relative;
	float: right;
	width: 212px;
	height: 330px;
	margin-left: -1px;
	border: 1px solid #F5F5F5;
}

.tuijian1:hover,
.tuijian2:hover {
	z-index: 1;
	border-color: #F03726;
}

.tuijian1 img,
.tuijian2 img {
	width: 180px;
	height: 285px;
	margin: 17px;
	border-bottom: 1px solid #f5f5f5;
}

.tuijian1 img:hover,
.tuijian2 img:hover {
	transform: scale(1.01);
}

.tuijian1 p {
	font-size: 13px;
	color: #A9A9A9;
}

/* .tuijian2 img {
	width: 175px;
	height: 285px;
	margin: 19px;
} */

.tuijian2 p {
	margin: -18px 0px 0px 127px;
	font-size: 13px;
	color: #A9A9A9;
}

.number {
	position: relative;
	top: -100px;
	text-align: center;
}

.number a {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	background-color: #F03726;
	text-align: center;
	text-decoration: none;
	border: 1px solid #F03726;
}

.number .main {
	border: 1px solid #F03726;
	background-color: #fff;
	color: #000;
}

/* 侧边栏 */
.menu {
	position: absolute;
	top: 80%;
	right: 100px;
	width: 65px;
	height: 250px;
	background-color: #fffefc;
	border-radius: 10px;
	border: 1px solid #f03726;

}

.menu span {
	display: block;
	width: 65px;
	height: 50px;
	color: #f03726;
	font-family: Mircosoft Yahei;
	font-size: 14px;
	text-align: center;
	line-height: 50px;
	border-bottom: 1px solid #f03726;
}

.menu .gotop {
	color: #f03726;
	font-weight: 700;
	user-select: none;
}

.menu .goback {
	border-bottom: 0;
}

.common {
	background-color: #FF6905;
	border-radius: 10px 10px 0 0;
	cursor: pointer;
}

.square {
	background-color: #FF6905;
	color: #fff;
	cursor: pointer;
}

.newYear {
	position: absolute;
	top: -30px;
	width: 60px;
	/* z-index:9999; */
}

/* 底栏 */
.footer {
	position: relative;
	width: 1072px;
	height: 180px;
	margin: 0 auto;
	font-size: 12px;
}

.footer p {
	float: left;
	margin-left: 15px;
	line-height: 20px;
}

.footer p,
a {
	color: #808080;
}

.symbol {
	position: absolute;
	top: 60px;
	left: 10px;
	width: 150px;
}

.symbol img {
	width: 30px;
}

var top_x = document.querySelector('.top-x');
var input = document.querySelector('.sousuo').querySelector('input');
var btnFind = document.querySelector('.btnFind');
input.onfocus = function () {
  if (this.value === " 春节年货档") {
    this.value = '';
  }
  this.style.color = '#333';
}
input.onblur = function () {
  if (this.value === "") {
    this.value = " 春节年货档";
  }
  this.style.color = '#999';
}

var menu = document.querySelector('.menu');
var banner = document.querySelector('.banner');
var main = document.querySelector('.like');
var goback = document.querySelector('.goback');
var bannerTop = banner.offsetTop;
var menuTop = menu.offsetTop - bannerTop;
var mainTop = main.offsetTop;

document.addEventListener('scroll', function () {
  // window.pageYOffset 和 window.pageXOffset  IE9开始支持
  if (window.pageYOffset >= bannerTop) {  // 如果距页面上方的偏移量大于等于banner距父元素的偏移，
    menu.style.position = "fixed";        // 则变为固定定位，
    menu.style.top = menuTop + 'px';      // 并且给top赋menu距离banner顶部的距离，也就是固定到原始位置
  } else {
    menu.style.position = "absolute";   // 否则，变为绝对定位
    menu.style.top = '60%';           // 并且让top变为原始的top值
  }
  if (window.pageYOffset >= mainTop) {
    goback.style.display = 'block';
    goback.innerText = '↑顶部'
  } else {
    goback.innerText = '﹀';
  }
})

goback.addEventListener('click', function () {
  // window.scroll(0, 0);
  if (goback.innerText == "↑顶部") {
    animate(window, 0);
  }
});
// 简单动画函数封装 obj目标对象  target目标位置
function animate(obj, target, callback) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    // 步长值写到定时器里且步长值的计算不能出现小数
    // 如果多个元素都是用这个动画特效，每次都要var声明定时器，比较浪费内存资源并且每次声明名字都一样会引起歧义
    // 此时需要给不同元素记录不同定时器，可以用obj.timer来代替var timer
    // var step= Math.ceil((target - obj.offsetLeft) / 15); // Math.ceil向上取整
    var step = (target - window.pageYOffset) / 2;
    step = step > 0 ? Math.ceil(step) : Math.floor(step); //实现盒子前进后退的功能
    //缓动动画公式：（ 目标值 - 现在的位置 ) / 10    10是步长，可以改变
    //匀速动画公式：盒子当前位置 + 固定的值（比如10）
    if (window.pageYOffset == target) {
      clearInterval(obj.timer);
      // if (callback) {
      //   callback();
      // }
      callback && callback();
    } else {
      // obj.style.left = window.pageYOffset + step + 'px';
      window.scroll(0, window.pageYOffset + step)
    }
  }, 100)
}
var spans = menu.querySelectorAll('span');
var gotop = document.querySelector('.gotop');
for (var i = 1; i < spans.length - 1; i++) {
  spans[i].addEventListener('mouseover', function () {
    this.className = 'square';
    this.style.color = '#fff';
  });
  spans[i].addEventListener('mouseleave', function () {
    this.className = 'none';
    this.style.color = '#f03726';
  })
}
goback.addEventListener('mouseover', function () {
  this.className = 'common';
  this.style.color = '#fff';
  this.style.borderRadius = "0 0 10px 10px";
})
goback.addEventListener('mouseout', function () {
  this.className = 'none';
  this.style.color = '#f03726';
  this.style.border = "0";
})
var xia_l = document.querySelector('.xia-l');
var tables = xia_l.querySelectorAll('table');
var imgs = xia_l.querySelectorAll('.imgs');
var colors = xia_l.querySelectorAll('.color');
var index=0;
for (var i = 0; i < tables.length; i++) {
  tables[i].addEventListener('mouseenter', function () {
    this.style.backgroundColor = '#ff694f';
    this.style.color = '#fff';
    this.style.cursor = 'pointer';
    index=i;
    
  });
  tables[i].addEventListener('mouseleave', function () {
    this.style.backgroundColor = '#fff';
    this.style.color = '#000';

  });

//banner滚动延时
$('.carousel').carousel({
  interval: 2000
})