淘宝首屏

最新推荐文章于 2021-02-24 21:37:24 发布

xiaoxiede_wo

最新推荐文章于 2021-02-24 21:37:24 发布

阅读量1.7k

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/xiaoxiede_wo/article/details/87922804

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head>
	<title>淘宝网</title>
	<link rel="stylesheet" type="text/css" href="tb.css">
</head>
<body>
	<div class="menu">
		<div class="top-menu">
			<ul class="menu-left"> 
				<li id="menu-left1">中国大陆</li>
				<li id="menu-img1"><img src="F:\graphics\photos\下拉.png" class="imgv1"></li>
			 	<li id="menu-left2"><a href="#">亲，请登陆</a></li>
				<li id="menu-left3"><a href="#">免费注册</a></li>
				<li id="menu-left4"><a href="#">手机逛淘宝</a></li>
			</ul>
			<ul class="menu-right">
				<li id="menu-img2"><img src="F:\graphics\photos\下拉.png" class="imgv2"></li>
				</ul>
				<li id="menu-right6"><a href="#">网站导航</a></li>
				<li id="menu-img5"> <img src="F:\graphics\photos\导航.png" class="imgv5"></li>
				<li id="menu-img2"><img src="F:\graphics\photos\下拉.png" class="imgv2"></li>
				</ul>
				<li id="menu-right5"><a href="#">联系客服</a></li>
				<li id="menu-img2"><img src="F:\graphics\photos\下拉.png" class="imgv2"></li>
				</ul>
				<li id="menu-right4"><a href="#">卖家中心</a></li>
				<div class="fenjie"></div>
				<li id="menu-right3"><a href="#">商品分类</a></li>
				<li id="menu-img2"><img src="F:\graphics\photos\下拉.png" class="imgv2"></li>
				</ul>
				<li id="menu-right3"><a href="#">收藏夹</a></li>
				<li id="menu-img4"><img src="F:\graphics\photos\收藏夹.png" class="bag"></li>
				</ul>
				<li id="menu-img2"><img src="F:\graphics\photos\下拉.png" class="imgv2"></li>
				</ul>
				<li id="menu-right2"><a href="#">购物车</a></li>
				<li id="menu-img3"><img src="F:\graphics\photos\购物车.png" class="car"></li>
				<li id="menu-img2"><img src="F:\graphics\photos\下拉.png" class="imgv2"></li>
				</ul>
				<li id="menu-right1"><a href="#">我的淘宝</a></li>

		</div>
	</div>
	<div class="wrapper">
		<div class="left-pic"></div>
		<div class="right-pic"></div>
		<div class="wrapper-second">		
			<div class="pics">
				<div class="pics-left"><a href="https://pages.tmall.com/wow/a/act/21120/upr?spm=a21bo.2017.1112.1.5af911d99s4GMx&wh_pid=main-155985&wh_weex=true&wh_biz=tm" target="blank"></a>
				</div>
				<div class="pics-second">
					<div class="pics-right1">
						<a href="https://pages.tmall.com/wow/a/act/21120/wupr?spm=a21bo.2017.1112-taobao.1.5af911d9W3JiCd&wh_pid=industry-155762&itemId=20013242803&item_id=20013242803&expo_id=1012850002&srcinfo=mainexpo_1&scm=1007.20000.123603.13393_0_0&utparam=%7B%22hc_object_id%22%3A%221012850002%22%2C%22x_object_type%22%3A%22item%22%2C%22hc_object_type%22%3A%22zhc_b%22%2C%22x_mt%22%3A%22HOT%22%2C%22x_src%22%3A%2213393%22%2C%22x_pos%22%3A%220%22%2C%22x_pvid%22%3A%22453c11ef-1252-4e7d-9bd9-ba7dc887e5f1%22%2C%22x_object_id%22%3A%2220013242803%22%7D" target="blank"> 
							<h4 class="content1-top">新年新饰</h4>
							<p class="content1-bottom">最高12期免息</p>
							<div class="ring"></div>
					</a>
					</div> 
					<div class="pics-right2">
						<a href="https://pages.tmall.com/wow/a/act/21120/wupr?spm=a21bo.2017.1112-taobao.2.5af911d99s4GMx&wh_pid=industry-155785&&itemId=576518088863&item_id=576518088863&expo_id=1012779002&srcinfo=mainexpo_2&scm=1007.20000.123603.13393_0_0&utparam=%7B%22hc_object_id%22%3A%221012779002%22%2C%22x_object_type%22%3A%22item%22%2C%22hc_object_type%22%3A%22zhc_b%22%2C%22x_mt%22%3A%22HOT%22%2C%22x_src%22%3A%2213393%22%2C%22x_pos%22%3A%221%22%2C%22x_pvid%22%3A%2217a7c3b0-eaba-40a6-b37a-52e3f0c98d0d%22%2C%22x_object_id%22%3A%22576518088863%22%7D" target="blank">
							<h4 class="content2-top">母婴大全</h4>
							<p class="content2-bottom">抢100元券</p>
							<div class="shoes"></div>
						</a>
					</div>
					<div class="pics-right3">
						<a href="https://pages.tmall.com/wow/a/act/21120/wupr?spm=a21bo.2017.1112-taobao.3.5af911d99s4GMx&wh_pid=industry-155828&&itemId=561153016664&item_id=561153016664&expo_id=1012834002&srcinfo=mainexpo_3&scm=1007.20000.123603.13393_0_0&utparam=%7B%22hc_object_id%22%3A%221012834002%22%2C%22x_object_type%22%3A%22item%22%2C%22hc_object_type%22%3A%22zhc_b%22%2C%22x_mt%22%3A%22HOT%22%2C%22x_src%22%3A%2213393%22%2C%22x_pos%22%3A%222%22%2C%22x_pvid%22%3A%2217a7c3b0-eaba-40a6-b37a-52e3f0c98d0d%22%2C%22x_object_id%22%3A%22561153016664%22%7D" target="blank">
							<h4 class="content3-top">品质生鲜</h4>
							<p class="content3-bottom">年夜饭精选</p>
							<div class="fruit"></div>
						</a>
					</div>
					<div class="pics-right4">
						<a href="https://pages.tmall.com/wow/a/act/21120/wupr?spm=a21bo.2017.1112-taobao.4.5af911d99s4GMx&wh_pid=industry-155801&&itemId=574615669384&item_id=574615669384&expo_id=1012793002&srcinfo=mainexpo_4&scm=1007.20000.123603.13393_0_0&utparam=%7B%22hc_object_id%22%3A%221012793002%22%2C%22x_object_type%22%3A%22item%22%2C%22hc_object_type%22%3A%22zhc_b%22%2C%22x_mt%22%3A%22HOT%22%2C%22x_src%22%3A%2213393%22%2C%22x_pos%22%3A%223%22%2C%22x_pvid%22%3A%2217a7c3b0-eaba-40a6-b37a-52e3f0c98d0d%22%2C%22x_object_id%22%3A%22574615669384%22%7D" target="blank">
							<h4 class="content4-top">电脑会场</h4>
							<p class="content4-bottom">满7895减5000</p>
							<div class="pc"></div>
						</a>
					</div>
					<div class="pics-right5">
						<a href="https://pages.tmall.com/wow/a/act/21120/wupr?spm=a21bo.2017.1112-taobao.5.5af911d99s4GMx&wh_pid=industry-155770&&itemId=537806119152&item_id=537806119152&expo_id=1012806002&srcinfo=mainexpo_5&scm=1007.20000.123603.13393_0_0&utparam=%7B%22hc_object_id%22%3A%221012806002%22%2C%22x_object_type%22%3A%22item%22%2C%22hc_object_type%22%3A%22zhc_b%22%2C%22x_mt%22%3A%22HOT%22%2C%22x_src%22%3A%2213393%22%2C%22x_pos%22%3A%224%22%2C%22x_pvid%22%3A%2217a7c3b0-eaba-40a6-b37a-52e3f0c98d0d%22%2C%22x_object_id%22%3A%22537806119152%22%7D" target="blank">
							<h4 class="content5-top">保暖内衣</h4>
							<p class="content5-bottom">满300减200</p>
							<div class="cloth"></div>
						</a>
					</div>
				</div>	
			</div>
			<div class="search">
				<div class="tianmao-log">
					<a href="https://nianhuo.tmall.com/?spm=a21bo.2017.201857.2.5af911d99HEnoi&wh_biz=tm&wh_weex=true&wx_main_hc=true" target="blank"></a>
				</div>
				<div class="search-box">
					<div class="condition">
						<ul class="entry">
							<li class="name-baobei">宝贝</li>
							<li class="name-tianmao">天猫</li>
							<li class="name-dianpu">店铺</li>
						</ul>
					</div>
					<div class="search-content">
						<input type="text" name="search-bg" placeholder="网红面包">
						<div class="search-log2"></div>
						<button class="search-button">搜索</button>
					</div>					
					<div class="recommend">
						<ul class="tips-commodity">
							<li>新款连衣裙</li>
							<li>四件套</li>
							<li>潮流T恤</li>
							<li>时尚女鞋</li>
							<li>短裤</li>
							<li>半身裙</li>
							<li>男士外套</li>
							<li>墙纸</li>
							<li>行车记录仪</li>
							<li>新款男鞋</li>
							<li>耳机</li>
							<li>时尚女包</li>
							<li>沙发</li>
						</ul>
					</div>
					<div class="server-smile">
						<div class="smile1"></div>
						<div class="smile2"></div>
						<div class="smile3"></div>
						<div class="smile4"></div>
						<div class="smile5"></div>
						<div class="smile6"></div>
						<div class="smile7"></div>
						<div class="smile8"></div>
						<div class="smile9"></div>
						<div class="smile10"></div>
						<div class="smile11"></div>
					</div>
				</div>
			</div>
			<div class="thematic-market">
				<ul class="list-market">
					<li class="texta">主题市场</li>
					<li class="textaa">天猫</li>
					<li class="texta">聚划算</li>
					<li class="texta">天猫超市</li>
					<li class="text-img1"><img src="Candy.png" class="candy"></li>
					<li class="textb">淘抢购</li>
					<li class="textb">电器城</li>
					<li class="textb">司法拍卖</li>
					<li class="textb">淘宝心选</li>
					<li class="textb">兴农扶贫</li>
					<li class="text-img1"><img src="Candy.png" class="candy"></li>
					<li class="textb">飞猪旅行</li>
					<li class="textb">智能生活</li>
					<li class="textb">苏宁易购</li>
				</ul>
			</div>
			<div class="text-market">
				<ul class="texts">
					<li class="text1">女装 / 男装 / 内衣 </li>
					<li class="detail-img"><img src="detail.png" class="detail1"></li>
					<li class="text2">鞋靴 / 箱包 / 配件</li>
					<li class="detail-img"><img src="detail.png" class="detail2"></li>
					<li class="text3">童装玩具 / 孕产 / 用品</li>
					<li class="detail-img"><img src="detail.png" class="detail3"></li>
					<li class="text4">家电 / 数码 / 手机</li>
					<li class="detail-img"><img src="detail.png" class="detail4"></li>
					<li class="text5">美妆 / 洗护 / 保健品</li>
					<li class="detail-img"><img src="detail.png" class="detail5"></li>
					<li class="text6">珠宝 / 眼镜 / 手表</li>
					<li class="detail-img"><img src="detail.png" class="detail6"></li>
					<li class="text7">运动 / 户外 / 乐器</li>
					<li class="detail-img"><img src="detail.png" class="detail7"></li>
					<li class="text8">游戏 / 动漫 / 影视</li>
					<li class="detail-img"><img src="detail.png" class="detail8"></li>
					<li class="text9">美食 / 生鲜 / 零食</li>
					<li class="detail-img"><img src="detail.png" class="detail9"></li>
					<li class="text10">鲜花 / 宠物 / 农资</li>
					<li class="detail-img"><img src="detail.png" class="detail10"></li>
					<li class="text11">工具 / 装修 / 建材</li>
					<li class="detail-img"><img src="detail.png" class="detail11"></li>
					<li class="text12">汽车 / 二手车 / 用品</li>
					<li class="detail-img"><img src="detail.png" class="detail12"></li>
					<li class="text13">办公 / DIY / 五金电子</li>
					<li class="detail-img"><img src="detail.png" class="detail13"></li>
					<li class="text14">百货 / 餐厨 / 家庭保健</li>
					<li class="detail-img"><img src="detail.png" class="detail14"></li>
					<li class="text15">学习 / 卡券 / 本地服务</li>
					<li class="detail-img"><img src="detail.png" class="detail15"></li>
				</ul>
			</div>
			<div class="pics-market">
				<!-- <div class="left-right"> -->
					<div class="left-pic-market"><a href="" target="blank"></a></div>
					<div class="right-pic-market"><a href="" target="blank"></a></div>
				<!-- </div> -->
				<div class="cha-img">
					<div class="hd-img"></div>
					<em>理想生活上天猫</em>		
				</div>
				<div class="today"><font  size="2px">今日热卖</font> 
			
				</div>
				<div class="adv-img">
					<!-- <div class="adv-left"> -->
						<div class="adv1"></div>
						<div class="adv2"></div>
					<!-- </div> -->
					<div class="adv3"></div>
				</div>
			</div>
			<div class="personal-business">
				<div class="hello">
					<div class="hello-pic"></div>
					<em>hi，你好</em>
					<div class="hello-text">
						<ul class="aabb">
							<li class="aa-img"><img src="扇子.png"></li>
							<li class="aa"><a href="#">领淘金币抵钱</a></li>
							<li class="bb-img"><img src="福袋.png"></li>
							<li class="bb"><a href="#">会员俱乐部</a></li>
						</ul>						
					</div>
					<div class="denglu">
						<div class="d1">登录</div>
						<div class="d2">注册</div>
						<div class="d3">开店</div>
					</div>
					<div class="warn">
						<a href="" target="blank">网上有害信息举报专区
						</a>
						<li class="detail-img"><img src="detail.png" class="detail1"></li>
					</div>
					<div class="gonggao">
						<ul class="text-gg">
							<li>公告</li>
							<li>规则</li>
							<li>论坛</li>
							<li>安全</li>
							<li>公益</li>
						</ul>
					</div>
					<div class="zeng1">
						<em>马云：真正的乡村寄宿制学校，是教和育的结合</em>
					</div>
					<div class="zeng2">
						<ul class="tiao">
							<li class="tiao1">天猫卖车新模式</li>
							<li class="tian2">淘宝老字号圈新粉</li>
						</ul>
					</div>
				</div>
				<div class="business1">
					<div class="bs1">
						<div class="gn1"></div>
					</div>
					<div class="bs2">
						<div class="gn2"></div>
					</div>
					<div class="bs3">
						<div class="gn3"></div>
					</div>
					<div class="bs4">
						<div class="gn4"></div>
					</div>
					<div class="gn-text1">
						<ul class="gn-text-aa">
							<li>充话费</li>
							<li>冲流量</li>
							<li>he旅行</li>
							<li>不游戏</li>
						</ul>
					</div>
					<div class="last"> </div>
				</div>

			</div>
		</div>

	</div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}
.menu{
	height: 35px;
	background-color: #f5f5f5;
	list-style: none;
}
ul,li{
	list-style: none;
}
.top-menu{
	margin: 0 auto;
	width: 1200px;
	height: 35px;
	background-color: #f5f5f5;
}
.menu .top-menu{
	list-style: none;
}
.imgv1{
	height: 10px;
	width:10px;
	display: inline-block;
	float: left;
	margin-top: 13px;
	margin-left: -3px;
	margin-right: 10px;
}
a{
	color: #6C6C6C;
}
#menu-left1,
.menu-imgv1,
#menu-left2,
#menu-left3,
#menu-left4 a{
	float: left;
	 font-family:
	     tahoma,
	     arial, 
	     "Hiragino Sans GB",
	      宋体, sans-serif;
	      font-size: 12px;
	      line-height: 35px;
	      margin-right: 10px;
	     
}
#menu-left3 a:hover,
#menu-left4 a:hover,
#menu-right6 a:hover,
#menu-right5 a:hover,
#menu-right4 a:hover,
#menu-right3 a:hover,
#menu-right2 a:hover,
#menu-right1 a:hover
{
	color: #f40;
}
.menu .top-menu .menu-left #menu-left1 {
	color: #3C3C3C;
}
#menu-left4 a{
	margin-left: 10px;
}

.menu .top-menu .menu-left #menu-left2 a{
	color:#f22e00;
}

#menu-right{
	float: right;
}

.imgv2{
	margin-top: 13px; 
	margin-left: -5px;
	margin-right: 5px;
	float: right;
	height: 10px;
	width:10px;
}
 .bag{
	margin-top: 12px;
	margin-left: 10px;
	margin-right: -5px;
	float: right;
	height: 11px;
	width: 11px;
}
.car{
	margin-top: 10px; 
	margin-left: 10px;
	margin-right: -5px;
	float: right;
	height: 14px;
	width:14px;
}
.fenjie{
	margin-top: 12px;
	height: 10px;
	width: 17px;
	float: right;
	border: 1px solid #bfbfbf;
	border-left-color: transparent;
	border-top-color: transparent;
	border-bottom-color: transparent;
}
.imgv5{
	margin-top: 13px;
	margin-right: -5px;
	margin-left: 10px;
	float: right;
	height: 8px;
	width: 10px;
}
#menu-right1,
#menu-right2,
#menu-right3,
#menu-right4,
#menu-right5,
#menu-img4,
#menu-img3,
#menu-img2,

#menu-right6 a{
	color:#6C6C6C;
	float: right;
	font-size: 12px;
	line-height: 35px;
	margin-left: 10px;
}

/***wrapper************更改容器大小处****/
.wrapper{
	height:730px;
	width: 1350px;
	position: relative;
}
.wrapper-second{
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0 80px;
	height: 730px; 
	width: 1188px;
	background-image: url(https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%B7%98%E5%AE%9D%E7%BD%91%E7%9A%84%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=62&spn=0&di=10120&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3179724555%2C3090211632&os=2865508406%2C3111321782&simid=4178925092%2C508263778&adpicid=0&lpn=0&ln=1587&fr=&fmq=1547528768968_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg3.redocn.com%2Ftupian%2F20140815%2Fhongsedenglonghechunliantaobaozhutubeijing_2737963.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Ff7vwt_z%26e3B6j15vg_z%26e3Bv54AzdH3FojkAzdH3Fd0n0lmn_z%26e3Bip4s&gsm=1e&rpstart=0&rpnum=0&islist=&querylist=&force=undefined);
}
.left-pic{
	position: absolute;
	top: 0px;
	left: 0px;
	width:80px;
	height: 730px;
	float: left;
	background-image: url(left-pic.png);
}
.right-pic{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 80px;
	height: 730px;
  	background-image: url(https://img.alicdn.com/tfs/TB1uWHnA7voK1RjSZFNXXcxMVXa-360-800.png);
  	float: right;
}
.pics{
	/************************************************/
	left: 0px;
	position: absolute;
	top: 0px;
	height: 100px;
	width: 1200px;
	background-color: #C8050D;
	float: left;
}
.pics-left a{
	margin-top: 10px;
	padding-top: 0px;
	float: left;
	width: 80px;
	height: 80px;
	display: inline-block;
	text-decoration: none;
	background-image: url(https://img.alicdn.com/tfs/TB17mXtAHvpK1RjSZFqXXcXUVXa-90-80.png);
	background-size: 100% 100%;
	overflow: hidden;
}
.pics-second{
	padding-top: 10px;
	height: 80px;
	width: 1100px;
	float: left;
	margin-left: 5px;
	float: left;
}

.pics-second .pics-right1 a,
.pics-second .pics-right2 a,
.pics-second .pics-right3 a,
.pics-second .pics-right4 a,
.pics-second .pics-right5 a
{
	padding-top: 13px;
	padding-left: 20px;
	width: 190px;
	height: 62px;
	display: inline-block;
	text-decoration: none;
	overflow: hidden;
	float: left;
}

.pics-second .pics-right1 a{
	background-image: url(https://img.alicdn.com/tfs/TB1NNz_zVzqK1RjSZFvXXcB7VXa-209-75.png);
}
.pics-second .pics-right2 a{
	margin-left:6px;
	background-image: url(https://img.alicdn.com/tfs/TB14wgyz4jaK1RjSZKzXXXVwXXa-209-75.png);
}
.pics-second .pics-right3 a{
	background-image: url(https://img.alicdn.com/tfs/TB1ymcczVzqK1RjSZFCXXbbxVXa-209-75.png);
	margin-left: 6px;
}
.pics-second .pics-right4 a{
	margin-left: 6px;
	background-image: url(https://img.alicdn.com/tfs/TB10o.XzVzqK1RjSZSgXXcpAVXa-209-75.png);	
}
.pics-second .pics-right5 a{
	background-image: url(https://img.alicdn.com/tfs/TB1gPf6z3DqK1RjSZSyXXaxEVXa-209-75.png);
	margin-left: 6px;
}
.pics-second .pics-right1 .ring,
.pics-second .pics-right2 .shoes,
.pics-second .pics-right3 .fruit,
.pics-second .pics-right4 .pc,
.pics-second .pics-right5 .cloth
{
	margin-left: 125px;
    margin-top: -28px;
	width: 46px;
	height: 46px;
	display: inline-block;
	text-decoration: none;
	background-size: 100% 100%;
	overflow: hidden;
}
 .pics-second .pics-right1 .ring {
	background-image: url(ring.jpg);
 }
.pics-second .pics-right2 .shoes{
	background-image: url(shoes.jpg);
}
.pics-second .pics-right3 .fruit{
	background-image: url(fruit.jpg);
}
.pics-second .pics-right4 .pc{
	background-image: url(pc.jpg);
}
.pics-second .pics-right5 .cloth{
	background-image: url(cloth.jpg);
}
.content1-top,
.content2-top,
.content3-top,
.content4-top,
.content5-top
{
	font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
	font-weight: 600;
	line-height: 28px;
    height: 28px;
    font-size: 20px;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}
.content1-bottom,
.content2-bottom,
.content3-bottom,
.content4-bottom,
.content5-bottom
{
	font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
	font-weight: 500;
	position: absolute;
	line-height: 20px;
    height: 20px;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    white-space:nowrap;
}
/****************搜索框一栏************************/
.search{
	position: absolute;
	top: 100px;
	height: 140px;
	width: 1185px;
	/*border:2px solid red;*/
	float: left;
}
.tianmao-log{

	height: 140px;
	width: 170px;
	float: left;
}
.search-box{
	height: 140px;
	width: 710px;
	float: left;
}
.tianmao-log a{

	background-image: url(https://gw.alicdn.com/tfs/TB1h5YlAyrpK1RjSZFhXXXSdXXa-190-121.gif);
	height: 140px;
	width: 170px;
	background-size: 100% 100%; 
	display: inline-block;
	overflow: hidden;
}
.condition{
	margin-left: 30px;
	margin-top: 35px;
	width: 680px;
	height: 20px;
}
.search-content{
	margin-left: 30px;
	width: 680px;
	height: 45px;
}
.search-log2{
	height: 34px;
	width: 37px;
	margin-left: -2px;
	display: inline-block;
	border:2px solid #f40;
	background-image: url(camera.png);
	background-size: 50% 50%;
	background-position: center center;
	background-repeat: no-repeat;
	border-left-color: transparent;
}
.recommend{
	margin-top: -9px;
	margin-left: 50px;
	width: 600px;
	height: 28px;
	float: left;
}
.server-smile{
	margin-bottom:-20px;
	width: 900px;
	height: 20px;
	float: left;
	cursor: pointer;
}

.smile1:hover,
.smile2:hover,
.smile3:hover,
.smile4:hover,
.smile5:hover,
.smile6:hover,
.smile7:hover,
.smile8:hover,
.smile9:hover,
.smile10:hover,
.smile11:hover{
	background-image: url(fu.png);
	background-size: 100% 100%;
}
.smile1,
.smile2,
.smile3,
.smile4,
.smile5,
.smile6,
.smile7,
.smile8,
.smile9,
.smile10,
.smile11{
	width: 20px;
	height: 20px;
	float: left;
}
.smile1,
.smile2
{
	margin-left: 30px;
}
.smile5{
	margin-left: 37px;

}.smile8{
	margin-left: 60px;
}
.smile11,
.smile6,
.smile10,
.smile7{
	margin-left: 50px;
}
.smile9{
	margin-left: 70px;
}
.smile3
{
	margin-left: 60px;
}
.smile4
{
	margin-left: 70px;
}
.name-baobei{
	margin-left: 40px;
	float: left;
	color: #FFF;
    font-weight: 700;
    background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}
.search-box .condition .entry li{
	font-size: 12px;
	text-align: center;
    float: left;
    width: 36px;
    height: 20px;
    line-height: 20px;
    margin-right: 4px;
    cursor: pointer;
}
.name-tianmao,
.name-dianpu
{
	color: #F40;
    text-align: center;
    float: left;
    width: 36px;
    height: 22px;
    line-height: 22px;
    margin-right: 4px;
    cursor: pointer;
}
.name-tianmao:hover,
.name-dianpu:hover
{
	background-color: pink;
}
.search-button{
	display: inline-block;
	position: relative;
	border:0;
	font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
	text-align: center;
	height: 38px;
	width: 74px;
	font-size: 18px;
	font-weight: 600;
	float: right;
	color: #fff;
    background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
	cursor: pointer;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
}
input{
	padding-left: 20px;
	display: inline-block;
	float: left;
	margin-left: 22px;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	height: 34px;
	width: 521px;
	background-image: url(search.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position:5px center;
	border: 2px solid #f40;
	border-right-color: transparent;

}
#search-bg{
	margin-left: 10px;
}
.recommend .tips-commodity li{
	margin-left:5px;
	margin-top: 10px;
	font-size: 8px;
	float: left;
	cursor: pointer;
}
.recommend .tips-commodity li:hover{
	color: #f40;
}
/**************主题市场一栏********可以更改大小***********/
.thematic-market{
	position: absolute;
	top: 240px;
	padding-left: 50px;
	width: 1140px;
	height: 28px;
	display: inline-block;
	float: left;
	background-color: #f40;
	overflow: hidden;
}
.text-market{
	position: absolute;
	left: 0px;
	top: 268px;
	margin-top: -5px;
	width: 185px;
	height:520px;
	border:1px solid #f40;
	/*float: left;*/
}

.list-market .texta{
	font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background-color: #f40;
	float: left;
	margin-left: 20px;
	line-height: 28px;
    height: 28px;
    cursor: pointer;
}
.list-market .textb{
	font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background-color: #f40;
	float: left;
	margin-left: 20px;
	line-height: 28px;
    height: 28px;
    cursor: pointer;
}
.list-market .textaa{
	font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background-color: #f40;
	float: left;
	margin-left: 60px;
	line-height: 28px;
    height: 28px;
    cursor: pointer;
}
.candy{
	margin-top: 5px;
	margin-left: 10px;
	margin-right: -10PX;
	width: 15px;
	height: 15px;
	float: left;
	display: inline-block;
}

.text1,
.text2,
.text3,
.text4,
.text5,
.text6,
.text7,
.text8,
.text9,
.text10,
.text11,
.text12,
.text13,
.text14,
.text15
{
	margin-left: 15px;
	float: left;
}
.detail1{
	margin-top: 16px;
	margin-left: 37px;
	height: 8px;
	width: 8px;
}
.detail2{
	margin-top: -10px;
	margin-left: 37px;
	height: 8px;
	width: 8px;
}
.detail3{
	margin-top: 7px;
	margin-left: 10px;
	height: 8px;
	width: 8px;
}
.detail4{
	margin-top: 4px;
	margin-left: 38px;
	height: 8px;
	width: 8px;
}
.detail5{
	margin-top: 5px;
	margin-left: 23px;
	height: 8px;
	width: 8px;
}
.detail6,
.detail7,
.detail8,
.detail9,
.detail10,
.detail11
{
	margin-top: 5px;
	margin-left: 36px;
	height: 8px;
	width: 8px;
}

.detail12{
	margin-top: 5px;
	margin-left: 20px;
	height: 8px;
	width: 8px;
}
.detail13{
	margin-top: 5px;
	margin-left: 12px;
	height: 8px;
	width: 8px;
}
.detail14,
.detail15
{
	margin-top: 5px;
	margin-left: 8px;
	height: 8px;
	width: 8px;
}
.text-market .texts li{
	margin-top: 10px;
	font-size:14px;
	color: #3C3C3C;
	/*float: left；*/
}
.pics-market{	/******************************/
	position: absolute;
	top: 268px;
	left: 180px;
	margin-left: 10px;
	width: 680px;
	height: 520px;
	float: left;
	position: absolute;
	background-color:  #dadada;
	/*******************?***/
	display: inline-block;
	/*border:2px solid green;*/
	overflow: hidden;
}

.left-pic-market{
	position: absolute;
	left: 0px;
	top: 0px;
	float: left;
	width: 530px;
	height: 250px;
}
.right-pic-market{
	position: absolute;
	right: 0px;
	top: 0px;
	float: right;
	width: 120px;
	height:260px;
	/*border:1px solid pink;*/
}
.left-pic-market a{
	float: left;
	width: 520px;
	height: 260px;
	display: inline-block;
	background-image: url(https://img.alicdn.com/simba/img/TB1roK2z3DqK1RjSZSySuuxEVXa.jpg);
	/*border:1px solid green;*/
}
.right-pic-market a{
	float: right;
	width: 150px;
	height: 260px;
	background-image: url(https://img.alicdn.com/imgextra/i3/169/O1CN01zBXmRf1D7RQabpdqx_!!169-0-lubanu.jpg_290x290q90.jpg_.webp);
	background-size: 100% 100%;
	display: inline-block;
	text-decoration: none;
	/*border: 1px solid green;*/
}
.cha-img{
	position: absolute;
	left: 0px;
	top: 240px;
	margin-top: 20px;
	height: 20px;
	width: 530px;
	float: left;
	/*border:2px solid pink;*/
	display: inline-block;
	border-left-color: transparent;
	border-top-color: transparent;
	border-right-color: transparent;
}
.hd-img{
	width: 136px;
	height:25px;
	float: left;
	display: inline-block;
	background-image: url(data:image/png;base64,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);
	background-size: 100% 100%;
}
em{
	font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
	font-size: 10px;
	color: #3f3f3f;
	margin-left: 0px;
	margin-top: 20px;
	float: left;

}
.today{
	position: absolute;
	top: 260px;
	right: 0px;
	margin-top: 5px;
	height: 20px;
	width: 120px;
	display: inline-block;
	float: left;
	/*border:1px solid black;*/
}
.adv-img{
	position: absolute;
	top: 260px;
	left: 0px;
	margin-top: 30px;
	height:190px;
	width: 700px;
	display: inline-block;
	/*border:1px solid yellow;*/
	overflow: hidden;
	float: left;
}
.adv1{
	position:absolute;
	top: 0px;
	left: 0px;
	height: 180px;
	width: 250px;
	display: inline-block;
	background-image: url(https://img.alicdn.com/tps/i4/TB1wbNSCgHqK1RjSZFkSut.WFXa.jpg_240x240q90.jpg);
	/*border:1px solid purple;*/
	float: left;
}
.adv2{
	position: absolute;
	top: 0px;
	left: 250px;
	height: 180px;
	width: 270px;
	display: inline-block;
	background-image: url(https://img.alicdn.com/tps/i4/TB1DWERAQPoK1RjSZKbSut1IXXa.jpg_240x240q90.jpg);
	background-size: 100% 100%;
	float: left;
}
.adv3{
	position: absolute;
	top: 0px;
	left: 530px;
	height: 180px;
	width: 150px;
	display: inline-block;
	float: left;
	/*border:2px solid red;*/
	overflow: hidden;
	background-image: url(https://img.alicdn.com/simba/img/TB176I0pBLoK1RjSZFuSutn0XXa.jpg);
}
.personal-business{
	background-color:white;
	position: absolute;
	top: 270px;
	right: 0px;
	height:520px;
	width: 305px;
	float: left;
	display: inline-block;
	/*border:1px solid blue;*/
}
.hello{
	margin-left: 10px;
	height: 260px;                            /**右上框**/
	width: 295px;
	float: left;
	display: inline-block;
	/*border:1px solid red;*/
}
.hello-pic{
	margin-top: 10px;
	margin-left: 120px;
	height: 50px;
	width: 50px;
	background-image: url(http://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_50x50.jpg);
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50% 50% 50% 50%;
	display: inline-block;
	/*border:1px solid green;*/
}
em{
	margin-top: -5px;
	margin-left: 120px;
}
.hello-text{
	margin-top: 5px;
	margin-left: 50px;
	margin-right: 50px;
	height: 20px;
	width: 190px;
	display: inline-block;
	float: left;
	/*border:1px solid red;*/
	background-color: pink;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;

}

.personal-business .hello .hello-text .aabb li{
	text-decoration: none;
	display: inline-block;
	list-style: none;
	color: red;
	white-space:nowrap;
	cursor: pointer;

}
.personal-business .hello .hello-text .aabb a
{
	color: red;
	font-size: 10px;
}
.aa-img{
	margin-left: 10px;
	margin-right: -6px;
	margin-top: 0px;	
}
.bb-img
{
	margin-left: 10px;
	margin-right: -6px;
	margin-top: 0px;
}
.denglu{
	margin-top: 10px;
	margin-left:10px;
	width: 280px;
	height: 30px;
	float: left;
	display: inline-block;
	/*border:1px solid purple;*/
}
.d1,
.d2,
.d3
{
	margin-left: 5px;
	width: 57px;
	height:25px;
	float: left;
	border: 1px solid yellow;
	background-color: #F40;
	color: #fff;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	
	font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
	font-size: 16px;
	font-weight: 700;
	padding-left: 25px;
}
.warn{
	margin-top:13px;
	height: 20px;
	width: 293px;
	/*border:1px solid green;*/
	display: inline-block;
	float: left;
	background-color: pink;

}
.warn a{
	margin-bottom: 5px;
	margin-left: 50px;
	color: #f40;
	font-size: 13px;
	float: left;
}
.warn li{
	margin-top: -10px;
}
.gonggao{
	height: 35px;
	width: 293px;
	/*background-color: pink;*/
	display: inline-block;
	float: left;
}
.gonggao .text-gg li{
	margin-top: 15px;
	margin-left: 20px;
	margin-right: 10px;
	float: left;
	font-size: 10px;
	cursor: pointer;
}
.gonggao .text-gg li:hover{
	
	font-weight: 600;
	font-size: 13px;
	color: #f40;
	float: left;
}
.zeng1 em{
	margin-top: 0px;
	margin-left: 5px;
	color: #f40;
	font-size: 10px;
	cursor: pointer;
}
.zeng2{
	width: 280px;
	height: 20px;
	display: inline-block;
	float: left;
}
.zeng2 li{
	float: left;
	margin-top: 5px;
	margin-left: 8px;
	margin-right: 0px;
	font-size: 12px;
	cursor: pointer;
}
.zeng2 li:hover{
	color: #f40;
}
.business1{
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 10px;
	width: 255px;
	height: 200px;
	background-color:pink;
	display: inline-block;
	float: left;
}
.bs1,
.bs2,
.bs3,
.bs4{
	width: 60px;
	height: 30px;
	display: inline-block;
	float: left;
	/*border: 1px solid black;*/
}
.gn1{
	margin-top:3px;
	margin-left: 15px;
	margin-right: 5px;
	background-image: url(gn1.png);
	height: 25px;
	width: 25px;
	background-position: center;
	background-size: 100% 100%;
	cursor: pointer;
	display: inline-block;
	float: left;
}
.gn2{
	margin-left:10px;
	margin-top: 3px;
	background-image: url(gn2.png);
	height: 25px;
	width: 25px;
	background-size: 100% 100%;
	cursor: pointer;
	display: inline-block;
}
.gn3{
	margin-left: 10px;
	margin-top: 3px;
	background-image: url(gn3.png);
	height: 25px;
	width: 25px;
	background-size: 100% 100%;
	cursor: pointer;
	display: inline-block;
}
.gn4{
	margin-left: 13px;
	margin-top: 3px;
	background-image: url(gn4.png);
	height: 25px;
	width: 25px;
	background-size: 100% 100%;
	cursor: pointer;
	display: inline-block;
}
.gn-text1{
	width: 247px;
	height: 20px;
	display: inline-block;
	float: left;
	/*border: 1px solid black;*/
}
.gn-text1 .gn-text-aa li{
	cursor: pointer;
 	margin-left: 13px;
 	margin-right: 10px;
 	font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
 	font-size: 10px;
 	float: left;
}
.last{
margin-top: 10px;
	width: 250px;
	height: 160px;
	display: inline-block;
	float: left;
	background-color: white;
	background-image: url(last.png);
	background-size: 90% 100%;
	background-repeat: no-repeat;
}

图片均来自于阿里矢量图。

效果如下

淘宝首屏

xiaoxiede_wo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
淘宝首屏

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;淘宝网&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="tb.css"&gt;&lt;/head&gt;&lt;body&
复制链接

扫一扫