master

分支 (1)

管理

管理

master

taobao
/
taobao.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/taobao0.css"/>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
//			alert($);

			$(function(){

				var $top_left_li1 = $('.top_left_li1');
				var $top_right_li1 = $('.top_right_li1');
				var $top_right_li3 = $('.top_right_li3');
				var $top_right_li6 = $('.top_right_li6');
				var $top_right_li7 = $('.top_right_li7');
				var $top_right_li8 = $('.top_right_li8');
//				var $l0 = $('.l0');


				var po = $top_left_li1.offset();
				var h = $top_left_li1.outerHeight();
				var w = $top_left_li1.outerWidth();
				$('.top_left_li11').css({left:po.left,top:po.top+h});

				var trl1 = $top_right_li1.offset();
				var trl1_h = $top_right_li1.outerHeight();
				var trl1_w = $top_right_li1.outerWidth();
				$('.top_right_li11').css({left:trl1.left,top:trl1.top+trl1_h});

				var trl3 = $top_right_li3.offset();
				var trl3_h = $top_right_li3.outerHeight();
//				var trl3_w = $top_right_li3.outerWidth();
				$('.top_right_li13').css({left:trl3.left,top:trl3.top+trl3_h});

				var trl6 = $top_right_li6.offset();
				var trl6_h = $top_right_li6.outerHeight();
				$('.top_right_li16').css({left:trl6.left,top:trl6.top+trl6_h});

				var trl7 = $top_right_li7.offset();
				var trl7_h = $top_right_li7.outerHeight();
				$('.top_right_li17').css({left:trl7.left,top:trl7.top+trl7_h});

				var trl8 = $top_right_li8.offset();
				var trl8_h = $top_right_li8.outerHeight();
				var trl8_w = $top_right_li8.outerWidth();
				$('.top_right_li18').css({right:trl8.left-1094,top:trl8.top+trl8_h});

//				var l0a = $l0.offset();
//				var l0_h = $l0.outerHeight();
//				var l0_w = $l0.outerWidth();
//				$('.l1').css(left:l0a.left,top:l0a.top+l0_h);
//

//
//				$top_left_li1.mouseover(function(){
//					$('.top_left_li11').show();
//				});
//
//				$top_left_li1.mouseout(function(){
//					$('.top_left_li11').hide();
//				});

//				$top_left_li11.mouseover(function(){
//					$('.top_left_li11').show();
//				});
//
//				$top_left_li11.mouseout(function(){
//					$('.top_left_li11').hide();
//				});


				var $searchPoint = $('.search_d_info_top_ul li');

				$searchPoint.click(function(){
					$(this).addClass('search_d_info_top_li1').siblings().removeClass('search_d_info_top_li1');
				});


			})

		</script>
		<script type="text/javascript" src="js/wufenggundong_pic.js"></script>
		<!--https://www.cnblogs.com/bluey/p/4827172.html-->
		<script type="text/javascript" src="js/suosuolanguding.js"></script>
	</head>
	<body>
		<div class="div0">
			<div class="top0">
				<div class="top">
					<div class="top_left">
						<ul>
							<li class="top_left_li1">
								<div class="">
									<span>中国大陆</span>
								</div>

								<div class="top_left_li11" style="width: 250px;height: 200px;">
									<ul name="" id="" role='listbox' aria-expanded='true' >
										<li role='option'><a href="#" >全球</a></li>
										<li role='option'><a href="#" >中国大陆</a></li>
										<li role='option'><a href="#" >香港</a></li>
										<li role='option'><a href="#" >台湾</a></li>
										<li role='option'><a href="#" >澳门</a></li>
										<li role='option'><a href="#" >韩国</a></li>
										<li role='option'><a href="#" >马来西亚</a></li>
										<li role='option'><a href="#" >澳大利亚</a></li>
										<li role='option'><a href="#" >新加坡</a></li>
										<li role='option'><a href="#" >新西兰</a></li>
										<li role='option'><a href="#" >加拿大</a></li>
										<li role='option'><a href="#" >美国</a></li>
										<li role='option'><a href="#" >日本</a></li>
									</ul>
								</div>

							</li>


							<li class="top_left_li2">
								<div class="">
									<a href="#" class="top_left_li2_a1">亲，请登录</a>
									<a href="#" class="top_left_li2_a2">免费注册</a>
								</div>
							</li>
							<li class="top_left_li3">
								<div class="">
									<a>手机逛淘宝</a>
								</div>
							</li>
						</ul>
					</div>
					<div class="top_right">
						<ul>
							<li class="top_right_li1">
								<div>
									<a href="#">我的淘宝</a>
									<span></span>
								</div>

								<div class="top_right_li11" style="width: 80px;height: 70px;">
									<ul>
										<li ><a href="#">已买到的宝贝</a></li>
										<li ><a href="#">我的足迹</a></li>
									</ul>
								</div>


							</li>
							<li class="top_right_li2">
								<div>
									<a href="#">&nbsp;&nbsp;购物车</a>
									<span></span>
								</div>
							</li>
							<li class="top_right_li3">
								<div>
									<a href="#">收藏夹</a>
									<span></span>
								</div>

								<div class="top_right_li13" style="width: 80px;height: 70px;">
									<ul>
										<li ><a href="#">收藏的宝贝</a></li>
										<li ><a href="#">收藏的店铺</a></li>
									</ul>
								</div>
							</li>
							<li class="top_right_li4">
								<div>
									<a href="#">商品分类</a>
								</div>
							</li>
							<li class="top_right_li5">
								|
							</li>
							<li class="top_right_li6">
								<div>
									<a href="#">千牛卖家中心</a>
									<span></span>
								</div>

								<div class="top_right_li16" style="width: 80px;height: 230px;">
									<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="#">问商友</a></li>
									</ul>
								</div>
							</li>
							<li  class="top_right_li7">
								<div>
									<a href="#">联系客服</a>
									<span></span>
								</div>

								<div class="top_right_li17" style="width: 80px;height: 70px;">
									<ul>
										<li ><a href="#">消费者客服</a></li>
										<li ><a href="#">卖家客服</a></li>
									</ul>
								</div>
							</li>
							<li class="top_right_li8">
								<div>
									<a href="#">网址导航</a>
									<span></span>
								</div>
								<div class="top_right_li18">
									<div class="top_right_li18_1">
										<div class="">
											<h4 style="color: red; font-weight: 500;">主题市场</h4>
										</div>
										<div class="top_right_li8_ul" id="top_right_li8_ul_1">
											<ul style="float: left;width: 100%;">
												<li style="width: 24%;float: left;"><a href="#" >女装</a></li>
												<li style="width: 24%;float: left;"><a href="#" >男装</a></li>
												<li style="width: 24%;float: left;"><a href="#" >内衣</a></li>
												<li style="width: 24%;float: left;"><a href="#" >鞋靴</a></li>

												<li style="width: 24%;float: left;"><a href="#">箱包</a></li>
												<li style="width: 24%;float: left;"><a href="#">婴童</a></li>
												<li style="width: 24%;float: left;"><a href="#">家电</a></li>
												<li style="width: 24%;float: left;"><a href="#">数码</a></li>

												<li style="width: 24%;float: left;"><a href="#">手机</a></li>
												<li style="width: 24%;float: left;"><a href="#">美妆</a></li>
												<li style="width: 24%;float: left;"><a href="#">珠宝</a></li>
												<li style="width: 24%;float: left;"><a href="#">眼镜</a></li>

												<li style="width: 24%;float: left;"><a href="#">手表</a></li>
												<li style="width: 24%;float: left;"><a href="#">运动</a></li>
												<li style="width: 24%;float: left;"><a href="#">户外</a></li>
												<li style="width: 24%;float: left;"><a href="#">乐器</a></li>

												<li style="width: 24%;float: left;"><a href="#">游戏</a></li>
												<li style="width: 24%;float: left;"><a href="#">动漫</a></li>
												<li style="width: 24%;float: left;"><a href="#">影视</a></li>
												<li style="width: 24%;float: left;"><a href="#">美食</a></li>

												<li style="width: 24%;float: left;"><a href="#">鲜花</a></li>
												<li style="width: 24%;float: left;"><a href="#">宠物</a></li>
												<li style="width: 24%;float: left;"><a href="#">农资</a></li>
												<li style="width: 24%;float: left;"><a href="#">房产</a></li>

												<li style="width: 24%;float: left;"><a href="#">装修</a></li>
												<li style="width: 24%;float: left;"><a href="#">建材</a></li>
												<li style="width: 24%;float: left;"><a href="#">家居</a></li>
												<li style="width: 24%;float: left;"><a href="#">百货</a></li>

												<li style="width: 24%;float: left;"><a href="#">汽车</a></li>
												<li style="width: 24%;float: left;"><a href="#">二手车</a></li>
												<li style="width: 24%;float: left;"><a href="#">办公</a></li>
												<li style="width: 24%;float: left;"><a href="#">定制</a></li>

												<li style="width: 24%;float: left;"><a href="#">教育</a></li>
												<li style="width: 24%;float: left;"><a href="#">卡卷</a></li>
												<li style="width: 24%;float: left;"><a href="#">本地</a></li>

											</ul>
										</div>
									</div>

									<div class="top_right_li18_2">
										<div class="">
											<h4 style="color: #44c644; font-weight: 500;">特色市场</h4>
										</div>
										<div class="top_right_li8_ul" id="top_right_li8_ul_2">
											<ul>
												<li style="width: 33%;float: left;"><a href="#">爱逛街</a></li>
												<li style="width: 33%;float: left;"><a href="#">美妆秀</a></li>
												<li style="width: 33%;float: left;"><a href="#">全球购</a></li>

												<li style="width: 33%;float: left;"><a href="#">腔调</a></li>
												<li style="width: 33%;float: left;"><a href="#">淘女郎</a></li>
												<li style="width: 33%;float: left;"><a href="#">星店</a></li>

												<li style="width: 33%;float: left;"><a href="#">极有家</a></li>
												<li style="width: 33%;float: left;"><a href="#">阿里拍卖</a></li>
												<li style="width: 33%;float: left;"><a href="#">淘宝众筹</a></li>

												<li style="width: 33%;float: left;"><a href="#">飞猪</a></li>
												<li style="width: 33%;float: left;"><a href="#">亲宝贝</a></li>
												<li style="width: 33%;float: left;"><a href="#">咸鱼</a></li>

												<li style="width: 33%;float: left;"><a href="#">农资</a></li>
												<li style="width: 33%;float: left;"><a href="#">天天特卖</a></li>
												<li style="width: 33%;float: left;"><a href="#">Outlets</a></li>

												<li style="width: 33%;float: left;"><a href="#">俪人购</a></li>
												<li style="width: 33%;float: left;"><a href="#">聚名品</a></li>
												<li style="width: 33%;float: left;"><a href="#">淘抢购</a></li>

												<li style="width: 33%;float: left;"><a href="#">全球精选</a></li>
												<li style="width: 33%;float: left;"><a href="#">非常大牌</a></li>
												<li style="width: 33%;float: left;"><a href="#">试用</a></li>

												<li style="width: 33%;float: left;"><a href="#">量贩团</a></li>
												<li style="width: 33%;float: left;"><a href="#">阿里翻译</a></li>

											</ul>
										</div>
									</div>

									<div class="top_right_li18_3">
										<div class="">
											<h4 style="color: #e122bd; font-weight: 500;">阿里APP</h4>
										</div>
										<div class="top_right_li8_ul" id="top_right_li8_ul_3">
											<ul>
												<li style="width: 33%;float: left;"><a href="#">淘宝</a></li>
												<li style="width: 33%;float: left;"><a href="#">天猫</a></li>
												<li style="width: 33%;float: left;"><a href="#">支付宝</a></li>

												<li style="width: 33%;float: left;"><a href="#">聚划算</a></li>
												<li style="width: 33%;float: left;"><a href="#">飞猪</a></li>
												<li style="width: 33%;float: left;"><a href="#">蚂蚁聚宝</a></li>

												<li style="width: 33%;float: left;"><a href="#">旺信</a></li>
												<li style="width: 33%;float: left;"><a href="#">咸鱼</a></li>
												<li style="width: 33%;float: left;"><a href="#">阿里钱盾</a></li>

												<li style="width: 33%;float: left;"><a href="#">钉钉</a></li>
												<li style="width: 33%;float: left;"><a href="#">高德地图</a></li>
												<li style="width: 33%;float: left;"><a href="#">点点虫</a></li>

												<li style="width: 33%;float: left;"><a href="#">虾米音乐</a></li>
												<li style="width: 33%;float: left;"><a href="#">淘票票</a></li>
												<li style="width: 33%;float: left;"><a href="#">菜鸟裹裹</a></li>

												<li style="width: 33%;float: left;"><a href="#">爱逛街</a></li>
												<li style="width: 33%;float: left;"><a href="#">拍卖会</a></li>
												<li style="width: 33%;float: left;"><a href="#">阿里云</a></li>

												<li style="width: 33%;float: left;"><a href="#">网商银行</a></li>
												<li style="width: 33%;float: left;"><a href="#">阿里邮箱</a></li>
												<li style="width: 33%;float: left;"><a href="#">阿里众包</a></li>

											</ul>
										</div>
									</div>

									<div class="top_right_li18_4">
										<div class="">
											<h4 style="color: #286ce3; font-weight: 500;">精彩推荐集</h4>
										</div>
										<div class="top_right_li8_ul" id="top_right_li8_ul_4">
											<ul>
												<li style="width: 50%;float: left;"><a href="#">余额宝</a></li>
												<li style="width: 50%;float: left;"><a href="#">大牌捡宝</a></li>

												<li style="width: 50%;float: left;"><a href="#">淘公仔</a></li>
												<li style="width: 50%;float: left;"><a href="#">浏览器</a></li>

												<li style="width: 50%;float: left;"><a href="#">淘宝香港</a></li>
												<li style="width: 50%;float: left;"><a href="#">淘宝台湾</a></li>

												<li style="width: 50%;float: left;"><a href="#">淘宝全球</a></li>
												<li style="width: 50%;float: left;"><a href="#">淘宝东南亚</a></li>

												<li style="width: 50%;float: left;"><a href="#">闺蜜淘货</a></li>
												<li style="width: 50%;float: left;"><a href="#">大众评审</a></li>

												<li style="width: 50%;float: left;"><a href="#">淘工作</a></li>
												<li style="width: 50%;float: left;"><a href="#">阿里巴巴认证</a></li>

											</ul>
										</div>
									</div>

								</div>
							</li>
						</ul>
					</div>

				</div>
			</div>


			<div class="search">
				<div class="search_d">
					<div class="search_d_img1">
						<a href="#"><img src="img/taobao_img.png"/></a>
						<!--//www.05.taobao.com?spm=a21bo.2017.201857.1.5af911d9dzdtcG"-->
					</div>
					<div class="search_d_info">
						<div class="search_d_info_top">
							<ul class="search_d_info_top_ul">
								<li class="search_d_info_top_li1">宝贝</li>
								<li>天猫</li>
								<li>店铺</li>
							</ul>
						</div>
						<!-- 搜索栏 -->
						<div class="search_d_info_middle">
							<button class="search_d_info_middle_button">搜索</button>
						</div>
						<div class="search_d_info_middle_">
							<div class="search_d_info_middle_0">
								<img src="img/taobaoimg3.png"/>
							</div>
							<div class="search_d_info_middle_1">
								<div class="search_d_info_middle_1_1">
									<ul>
										<li class="l0">宝贝</li>
										<li class="l1">天猫</li>
										<li class="l2">店铺</li>
									</ul>
								</div>
								<button class="search_d_info_middle_button">搜索</button>
							</div>
						</div>
						<div class="search_d_info_bottom">
							<a href="#">新款连衣裙</a>
							<a href="#">四件套</a>
							<a href="#" style="color: orangered;">潮流T恤</a>
							<a href="#">时尚女装</a>
							<a href="#">短裤</a>
							<a href="#">半身裙</a>
							<a href="#">男士外套</a>
							<a href="#">墙纸</a>
							<a href="#">行车记录仪</a>
							<a href="#">新款男鞋</a>
							<a href="#">耳机</a>
							<a href="#">时尚女包</a>
							<a href="#">沙发</a>
						</div>
					</div>
					<div class="search_d_img2">
						<a href="#"><img src="img/taobaoimg2.png"/></a>
					</div>

				</div>

			</div>


			<div class="top_search">
				<div class="top_search_div">
					<h2>主题市场</h2>

					<ul class="top_search_div_ul1">
						<li><a href="#">天猫</a></li>
						<li><a href="#">聚划算</a></li>
						<li><a href="#">天猫超市</a></li>
						<!--<div style="clear:both;"></div>-->
					</ul>
					<ul class="top_search_div_ul2">
						<li>|</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>
						<!--<div style="clear:both;"></div>-->
					</ul>
					<ul class="top_search_div_ul3">
						<li>|</li>
						<li><a href="#">飞猪旅行</a></li>
						<li><a href="#">智能生活</a></li>
						<li><a href="#">苏宁易购</a></li>
						<div style="clear:both;"></div>
						<!--
							由于浮动的原因使得背景色无法设置：
							两种解决方法
							1.给ul添加一个overflow:hidden的样式，缺点浮动样式丢失
							2.在</ul>前加入一个清除浮动的div；即 <div style="clear:both"></div>
						-->
					</ul>
				</div>
			</div>


			<div class="div4">
				<div class="div4_t">
					<div class="div4_left">
						<div class="div4_left_top">
							<div class="div4_left_top_left">
								<ul>
									<li>
										<a href="#">女装</a>/
										<a href="#">男装</a>/
										<a href="#">内衣</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">鞋靴</a>/
										<a href="#">箱包</a>/
										<a href="#">配件</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">儿童玩具</a>/
										<a href="#">孕产</a>/
										<a href="#">用品</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">家电</a>/
										<a href="#">数码</a>/
										<a href="#">手机</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">美妆</a>/
										<a href="#">洗护</a>/
										<a href="#">保健品</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">珠宝</a>/
										<a href="#">眼镜</a>/
										<a href="#">手表</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">运动</a>/
										<a href="#">户外</a>/
										<a href="#">乐器</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">游戏</a>/
										<a href="#">动漫</a>/
										<a href="#">影视</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">美食</a>/
										<a href="#">生鲜</a>/
										<a href="#">零食</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">鲜花</a>/
										<a href="#">宠物</a>/
										<a href="#">农资</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">工具</a>/
										<a href="#">装修</a>/
										<a href="#">建材</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">家具</a>/
										<a href="#">家饰</a>/
										<a href="#">家纺</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">汽车</a>/
										<a href="#">二手车</a>/
										<a href="#">用品</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">办公</a>/
										<a href="#">DIY</a>/
										<a href="#">五金电子</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">百货</a>/
										<a href="#">餐厨</a>/
										<a href="#">家庭保健</a>
										<i> > </i>
									</li>
									<li>
										<a href="#">学习</a>/
										<a href="#">卡卷</a>/
										<a href="#">本地服务</a>
										<i> > </i>
									</li>
								</ul>
							</div>
							<div class="div4_left_top_center">
								<div class="div4_left_top_center_top">  <!--框1 relativ-->
									<div class="div4_left_top_center_top_1">  <!--框2 absolute-->
										<div class="div4_left_top_center_top_10">
											<a href="#"><img src="img/wufengundon0.png"/></a>
										</div>
										<div class="div4_left_top_center_top_11">
											<a href="#"><img src="img/wufengundon1.png"/></a>
										</div>
										<div class="div4_left_top_center_top_12">
											<a href="#"><img src="img/wufengundon2.png"/></a>
										</div>
										<div class="div4_left_top_center_top_13">
											<a href="#"><img src="img/wufengundon3.png" ></a>
										</div>
										<div class="div4_left_top_center_top_14">
											<a href="#"><img src="img/wufengundon4.png" alt=""></a>
										</div>
									</div>
								</div>
								<div class="div4_left_top_center_bottom">
									<div class="div4_left_top_center_bottom_1">
										<div style="height: 14px;"></div>
										<div class="div4_left_top_center_bottom_11">
											<span><img src="img/tianmao1.png"/></span>
											<!--由于一开始设置了  *{margin:0} 所以这边定义就没有用了  -->
											<p style="font-size: 12px; line-height: 18px;color: #666; float: left;margin-left: 16px;">理想生活上天猫</p>
											<!--<hr style="color: red; size: a3 ;"/>-->
										</div>
									</div>
									<div class="div4_left_top_center_bottom_2">

									</div>
								</div>
							</div>
							<div class="div4_left_top_right">

							</div>
						</div>
						<div class="div4_left_bottom">

						</div>
					</div>
					<div class="div4_right">

					</div>
				</div>
			</div>


			<div class="div5"></div>
			<div class="div6"></div>
			<div class="div7"></div>
			<div class="div8"></div>
			<div class="div9"></div>
			<div class="div10"></div>
			<div class="div11"></div>
			<div class="div12"></div>
			<div class="div13"></div>
			<div class="div14"></div>
			<div class="div15"></div>
			<div class="div16"></div>
			<div class="div17"></div>
			<div class="div18"></div>
			<div class="div19"></div>
		</div>


		<!--<div class="top_left_li11">
			<ul name="" id="" role='listbox' aria-expanded='true'>
				<li role='option'><a href="#">全球</a></li>
				<li role='option'><a href="#">中国大陆</a></li>
				<li role='option'><a href="#">香港</a></li>
				<li role='option'><a href="#">台湾</a></li>
				<li role='option'><a href="#">澳门</a></li>
				<li role='option'><a href="#">韩国</a></li>
				<li role='option'><a href="#">马来西亚</a></li>
				<li role='option'><a href="#">澳大利亚</a></li>
				<li role='option'><a href="#">新加坡</a></li>
				<li role='option'><a href="#">新西兰</a></li>
				<li role='option'><a href="#">加拿大</a></li>
				<li role='option'><a href="#">美国</a></li>
				<li role='option'><a href="#">日本</a></li>
			</ul>
		</div>-->

	</body>
</html>