淘宝网首页静态页面设计代码(纯html+css)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href='css/style.css' type="text/css" rel="stylesheet">
	</head>
	<body>
		<div class="bg">
			<div class="top">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://login.taobao.com/member/login.jhtml?spm=a231o.13503973.1997563269.1.26f068edCrp8Nl&f=top&redirectURL=https%3A%2F%2Fai.taobao.com%2F%3Fpid%3Dmm_131275439_43128542_313912626&pid=mm_131275439_43128542_313912626&union_lens=recoveryid%3A201_11.15.254.94_1313896_1625642444893%3Bprepvid%3A201_11.15.254.94_1313896_1625642444893"style="color:red;">亲,请登录</a>
				<a href="#">免费注册</a>&nbsp;&nbsp;<a href="#">手机逛淘宝</a>
				<ul>
					<li><a href="https://ai.taobao.com/?pid=mm_131275439_43128542_313912626"style="color:red;">淘宝网首页</a></li>
					<li><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fi.taobao.com%2Fmy_taobao.htm%3Fspm%3Da231o.13503973.1997525045.1.26f068edB3TVtP%26pid%3Dmm_131275439_43128542_313912626%26union_lens%3Drecoveryid%253A201_11.29.177.232_1262055_1625636857039%253Bprepvid%253A201_11.29.177.232_1262055_1625636857039">我的淘宝</a></li>
					<li><img src='img/购物车.jpg'style="width:15px;margin-top:5px;"><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><img src='img/line.jpg'><a href="#">网站导航</a></li>
				</ul>
			</div>
			<div class="top-x">
				<img src='img/tianmao.jpg'style="width:1070px;height:80px;margin-left:190px;float:left;">
			</div>
			<div class="sousuo">
				<img src='img/logo.jpg'style="width:170px;height:75px;float:left;">
				 <input type="text" name="address" size="60" maxlength="60" style="color:darkgray;" value=" 新款女装"onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}">
				 <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><a href="#">搜索</a></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">
				<table>
					<img src='img/bag.jpg'style="width:35px;margin:5px;">
					<tr>
						<td><a href="#">双肩背包</a></td>
						<td><a href="#">托特包</a></td>
						<td>&nbsp;&nbsp;<a href="#">zara</a></td>
						<td><a href="#">背包</a></td>
					</tr>
					<tr>
						<td><a href="#"style="color:#F03726;">行李箱</a></td>
						<td><a href="#">腰包</a></td>
						<td><a href="#">斜挎男包</a></td>
						<td><a href="#">挎包</a></td>
					</tr>
				</table>
				<table>
					<img src='img/数码.jpg'style="width:35px;margin:5px;">
					<tr>
						<td><a href="#">空调</a></td>
						<td><a href="#">冰箱</a></td>
						<td>&nbsp;<a href="#">耳机</a></td>
						<td><a href="#"style="color:#F03726;">格力空调</a></td>
					</tr>
					<tr>
						<td><a href="#">投影仪</a></td>
						<td><a href="#">键盘</a></td>
						<td><a href="#">小冰箱</a></td>
						<td><a href="#">饮水机</a></td>
					</tr>
				</table>
				<table>
					<img src='img/women.jpg'style="width:35px;margin:5px;">
					<tr>
						<td><a href="#">凉鞋</a></td>
						<td><a href="#">半身裙</a></td>
						<td><a href="#">上衣夏</a></td>
						<td><a href="#">套装夏</a></td>
					</tr>
					<tr>
						<td><a href="#">鞋子</a></td>
						<td><a href="#">高跟鞋</a></td>
						<td><a href="#">半身裙夏</a></td>
						<td><a href="#"style="color:#F03726;">旗袍</a></td>
					</tr>
				</table>
				<table>
					<img src='img/man.jpg'style="width:35px;margin:5px;">
					<tr>
						<td><a href="#">短裤</a></td>
						<td><a href="#">电动车</a></td>
						<td><a href="#">帆布鞋</a></td>
						<td><a href="#">打火机</a></td>
					</tr>
					<tr>
						<td><a href="#">眼镜</a></td>
						<td>&nbsp;<a href="#"style="color:#F03726;">头盔</a></td>
						<td><a href="#">男士衬衫</a></td>
						<td><a href="#">男裤</a></td>
					</tr>
				</table>
				<table>
					<img src='img/母婴.jpg'style="width:35px;margin:5px;">
					<tr>
						<td><a href="#">饼干</a></td>
						<td><a href="#">文具盒</a></td>
						<td><a href="#">婴儿床</a></td>
						<td><a href="#"style="color:#F03726;">护膝</a></td>
					</tr>
					<tr>
						<td><a href="#">奶粉</a></td>
						<td><a href="#">妈咪包</a></td>
						<td><a href="#">月子服</a></td>
						<td><a href="#">铅笔盒</a></td>
					</tr>
				</table>
				<table>
					<img src='img/家居.jpg'style="width:35px;margin:5px;">
					<tr>
						<td><a href="#">床垫子</a></td>
						<td><a href="#">拖鞋女</a></td>
						<td>&nbsp;<a href="#">枕头</a></td>
						<td><a href="#"style="color:#F03726;">四件套</a></td>
					</tr>
					<tr>
						<td><a href="#">衣架</a></td>
						<td><a href="#">毛巾</a></td>
						<td><a href="#">洗脸巾</a></td>
						<td><a href="#">夏凉被</a></td>
					</tr>
				</table>
				<table>
					<img src='img/美食.jpg'style="width:35px;margin:5px;">
					<tr>
						<td><a href="#">咖啡</a></td>
						<td><a href="#">饼干</a></td>
						<td><a href="#">茶叶</a></td>
						<td><a href="#">零食礼包</a></td>
					</tr>
					<tr>
						<td><a href="#"style="color:#F03726;">巧克力</a></td>
						<td><a href="#">牛肉干</a></td>
						<td><a href="#">白酒</a></td>
						<td>&nbsp;<a href="#">矿泉水</a></td>
					</tr>
				</table>
				<table>
					<img src='img/美妆.jpg'style="width:35px;margin:5px;">
					<tr>
						<td><a href="#">沐浴乳</a></td>
						<td><a href="#"style="color:#F03726;">防晒霜</a></td>
						<td>&nbsp;<a href="#">香水</a></td>
						<td><a href="#">口红</a></td>
					</tr>
					<tr>
						<td><a href="#">防晒喷雾</a></td>
						<td><a href="#">眼影盘</a></td>
						<td><a href="#">眼影盒</a></td>
						<td><a href="#">美甲</a></td>
					</tr>
				</table>
			</div>
			<div class="banner">
				<img src='img/banner.jpg'style="width:465px;height:239px;">
				<img src='img/产品.jpg'style="width:125px;height:243px;float:left;margin:-247px 0px 0px 477px;">
			</div>
			<div class="my">
				<table>
						<a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fi.taobao.com%2Fmy_taobao.htm%3Fspm%3Da231o.13503973.1997525045.1.26f068edB3TVtP%26pid%3Dmm_131275439_43128542_313912626%26union_lens%3Drecoveryid%253A201_11.29.177.232_1262055_1625636857039%253Bprepvid%253A201_11.29.177.232_1262055_1625636857039"><img src="img/五角星.jpg"style="width:22px;height:17px;float:left;margin:3px 0px 0px 50px;">
						<p style="float:left;margin-top:4px;font-size:14px;color:orangered;">我的淘宝</p></a>
					<tr>
						<td><a href="#"><img src="img/天猫logo.jpg"style="width:100px;height:47px;"></a></td>
						<td><a href="#"><img src='img/淘宝网%20logo.jpg'style="width:100px;height:47px;"></a></td>
					</tr>
					<tr>
						<td><a href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E5%A5%B3%E8%A3%85&clk1=f06321c593a801cd355af06f036c6a2d&upsId=f06321c593a801cd355af06f036c6a2d">
						<img src='img/聚划算logo.jpg'style="width:100px;height:46px;"></a></td>
						<td><a href="#"><img src='img/天猫国际logo.jpg'style="width:100px;height:46px;"></a></td>
					</tr>
					<tr>
						<td><a href="#"><img src='img/9.9logo.jpg'style="width:100px;height:47px;"></a></td>
						<td><a href="#"><img src='img/淘抢购logo.jpg'style="width:100px;height:47px;"></a></td>
					</tr>
					<tr>
						<td><a href="https://pages.tmall.com/wow/z/cs/act/wupr?wh_biz=tm&wh_pid=act%2Ftaokechengjie&ali_trackid=2:mm_1112570142_1558350137_110275250465:1625641429_126_172722590&union_lens=lensId:OPT@1606731463@0b5c3315_e0e0_17618a87c17_634c@01;eventPageId:1586925572118;recoveryid:1625641429_126_172722590&bxsign=tbk38E4lgc6Vh8bkaBWX15mQHIOWYCiK212pN7s0wL6Wbbi9TraC3/PFsiEAXva761mBz9wH/A6dqKqhkoJvlG8UkebxvHrIckp/UNFmctMOvo=">
						<img src='img/天猫超市logo.jpg'style="width:100px;height:47px;"></a></td>
						<td><a href="#"><img src='./img/大药房logo.jpg'style="width:100px;height:47px;"></a></td>
					</tr>
				</table>
			</div>
			<div class="chaozhi">
				<a href="#"><p style="float:left;padding-top:10px;">超值活动专区</p></a>
				<p style="color:#A9A9A9;float:left;padding:10px 0px 0px 293px;">每天10点更新</p>
			</div>
			<div class="fashion">
				<img src='img/时尚.jpg'style="width:230px;height:190px;float:left;">
				<img src='img/女装特惠.jpg'style="width:230px;height:190px;float:left;padding-left:5px;">
			</div>
			<img src='img/一站式.jpg'style="width:130px;height:221px;float:left;margin:-220px 0px 0px 905px;">
			<div class="yizhanshi">
				<a href="#"><p style="font-size:10px;float:left;margin-top:12px;"><img src='img/食品.jpg'style="height:13px;float:left;margin:-1px 5px 10px 7px;">酱心十足 下饭开胃</p></a>
				<a href="#"><p style="font-size:10px;float:left;margin-top:5px;"><img src='img/家电.jpg'style="height:15px;width:25px;float:left;margin:-1px 5px 10px 7px;">海尔净水品牌团</p></a>
				<a href="#"><p style="font-size:10px;float:left;margin-top:5px;"><img src='img/p聚划算.jpg'style="height:15px;width:28px;float:left;margin:-1px 5px 10px 7px;">聚划算天天折上折</p></a>
				<a href="#"><p style="font-size:10px;float:left;margin-top:5px;"><img src='img/活动.jpg'style="height:13px;float:left;margin:-1px 5px 10px 7px;">海尔净水品牌团</p></a>
			</div>
			<div class="like">
				<h3>猜你喜欢</h3>
					<a href="#"><div class="tuijian">
						<img src='img/1.jpg'style="width:180px;height:285px;margin:17px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-15px 0px 0px 164px;">月销3</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/2.jpg'style="width:180px;height:285px;margin:17px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-15px 0px 0px 145px;">月销2981</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/3.jpg'style="width:180px;height:285px;margin:17px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-15px 0px 0px 132px;">月销5.13万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/4.jpg'style="width:180px;height:285px;margin:17px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-15px 0px 0px 133px;">月销5.28万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/5.jpg'style="width:180px;height:285px;margin:17px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-15px 0px 0px 152px;">月销143</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/6.jpg'style="width:180px;height:285px;margin:17px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-15px 0px 0px 133px;">月销2.08万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/7.jpg'style="width:180px;height:285px;margin:17px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-15px 0px 0px 150px;">月销327</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/8.jpg'style="width:180px;height:285px;margin:17px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-15px 0px 0px 145px;">月销5106</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/9.jpg'style="width:180px;height:285px;margin:17px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-15px 0px 0px 150px;">月销384</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/10.jpg'style="width:180px;height:285px;margin:17px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-15px 0px 0px 132px;">月销3.22万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/11.jpg'style="width:175px;height:285px;margin:19px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-18px 0px 0px 127px;">月销3.22万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/15.jpg'style="width:175px;height:285px;margin:19px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-18px 0px 0px 127px;">月销3.22万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/12.jpg'style="width:175px;height:285px;margin:19px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-18px 0px 0px 127px;">月销3.22万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/13.jpg'style="width:175px;height:285px;margin:19px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-18px 0px 0px 127px;">月销3.22万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/14.jpg'style="width:175px;height:285px;margin:19px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-18px 0px 0px 127px;">月销3.22万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/16.jpg'style="width:175px;height:280px;margin:19px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-18px 0px 0px 127px;">月销3.22万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/17.jpg'style="width:175px;height:285px;margin:19px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-18px 0px 0px 127px;">月销3.22万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/18.jpg'style="width:175px;height:285px;margin:19px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-18px 0px 0px 127px;">月销3.22万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/19.jpg'style="width:175px;height:285px;margin:19px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-18px 0px 0px 127px;">月销3.22万</p>
					</div></a>
					<a href="#"><div class="tuijian">
						<img src='img/20.jpg'style="width:175px;height:285px;margin:19px;">
						<p style="font-size:13px;color:#A9A9A9;margin:-18px 0px 0px 127px;">月销3.22万</p>
					</div></a>
				</div>
			</div>
			<div class="number">
				<a href="#"><p style="background-color:red;color:white;border:none;">1</p></a>
				<a href="#"><p>2</p></a>
				<a href="#"><p>3</p></a>
			</div>
			<div class="footer">
				<a href="#"><p>联系客服</p></a><a href="#"><p>开放平台</p></a><a href="#"><p>法律声明</p></a><p style="color:gray;">Taobao.com版权所有2003-现在</p><a href="#"><p>增值电信业务经营许可证</p></a><img src='img/公安.jpg'style="width:25px;height:25px;float:left;">
				<a href="#"><p>浙公网安备 33010002000075号</p></a>
				<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 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 href="#"><p>阿里星球</p><a href="#"><p>钉钉</p></a><a href="#"><p>支付宝</p></a><a href="#"><p>达摩院</p></a>
			</div>
			<img src='img/police.jpg'style="width:35px;height:35px;float:left;margin:-82px 0px 0px 180px;">
			<img src='img/徽.jpg'style="width:35px;height:33px;float:left;margin:-82px 0px 0px 230px;">
			<img src='img/police1.jpg'style="width:35px;height:33px;float:left;margin:-82px 0px 0px 280px;">
		</div>
	</body>
</html>
*{
	margin:0px;
	padding:0px;
	list-style:none;
	text-decoration:none;
	font-family:黑体;
	overflow-x:hidden;
}
.bg{
	width:1520px;
	height:2270px;
}
.top{width:1230px;height:33px;font-size:11px;padding-left:290px;line-height:33px;overflow:hidden;background-color:whitesmoke;}
.top a:link{color:gray;}
.top a:visited{color:gray;}
.top a:hover{color:red;}
.top ul{margin:-33px 0px 5px 330px;}
.top ul li{float:left;margin-right:20px;}
.top-x{
	width:1520px;
	height:80px;
	background-color:#4ad2aa;
}
input{
		width:530px;
		height:30px;
		outline:none;
		float:left;
		border:2.5px solid red;
		border-right:none;
		margin-left:30px;
		margin-top:2px;
}
button{
	width:70px;
	height:35px;
	float:left;
	margin-left:930px;
	margin-top:-73px;
	font-size:14px;
	border:0;
	right:2px;
	background:#f03726;
}
button:focus{outline:none;}
button a:link{color:white;}
button a:visited{color:white;}
.sousuo{width:1020px;height:75px;float:left;margin:20px 0px 0px 230px;}
.sousuo ul{float:left;margin:5px 0px 0px 30px;}
.sousuo ul li{font-size:14px;padding-right:12px;float:left;}
.sousuo a:link{color:darkgray;}
.sousuo a:visited{color:darkgray;}
.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:link{color:white;}
.daily a:visited{color:white;}
.daily ul{margin-left:260px;}
.daily ul li{font-size:14px;float:left;padding-right:50px;line-height:30px;}
.xia-l{
	width:235px;
	height:480px;
	margin-left:180px;
	border-color:#F03726;
	border-style:solid;
	border-width:0px 1px 1px;
	background-color:white;
	overflow:hidden;
}
.xia-l table{
	width:236px;
	height:15px;
	line-height:17px;
	border-bottom:1px solid #F5F5F5;
	padding:9px 0px 12px 50px;
	margin:-60px 0px 8px 0px;
}
.xia-l table:hover{background:lightgray;}
.xia-l a:link{color:gray;}
.xia-l a:visited{color:gray;}
.xia-l a:hover{color:#F03726;}
.xia-l table td{
	font-size:12px;
	padding-right:5px;
}
.banner{
	width:605px;
	height:243px;
	float:left;
	position:relative;
	margin:-480px 0px 0px 430px;
	
}
.my{
	width:208px;
	height:238px;
	float:right;
	border:1px solid #F5F5F5;
	margin:-480px 254px 0px 0px;
}
.my table tr td{
	padding:1px 0px 0px 0px;
}
.chaozhi{
	float:left;
	width:465px;
	height:26px;
	font-size:13px;
	color:#F03726;
	margin:-230px 0px 0px 430px;
	border-bottom:2px solid #F03726;
}
.chaozhi a:link{color:#F03726;}
.chaozhi a:visited{color:#F03726;}
.fashion{
	width:465px;
	height:190px;
	float:left;
	margin:-190px 0px 0px 430px;
}
.yizhanshi{
	width:208px;
	height:221px;
	float:right;
	border:1px solid #F5F5F5;
	position:relative;
	margin:-220px 254px 0px 0px;
}
.yizhanshi a:link{color:gray;}
.yizhanshi a:visited{color:gray;}
.yizhanshi a:hover{color:#F03726;}
.yizhanshi a:active{text-decoration:underline;color:#f03726;}
.like{
	width:1072px;
	height:1354px;
	margin:25px 0px 0px 180px;
	overflow:hidden;

}
h3{
	font-family:幼圆;
	font-size:15px;
	color:#F03726;
	margin-bottom:5px;
}
.tuijian{
	width:212px;
	height:330px;
	float:left;
	position:relative;
	border:1px solid #F5F5F5;
	overflow:hidden;
}
.tuijian:hover{
	border:1px solid #F03726;
}
.tuijian:hover img{
	transform:scale(0.996);
	border-bottom:1px solid #E6E6FA;
}
.number{
	width:100px;
	height:35px;
	float:left;
	margin:-126px 0px 0px 660px;
}
.number p{
	width:17px;
	height:25px;
	float:left;
	font-size:12px;
	border:1px solid #A9A9A9;
	line-height:22px;
	padding-left:11px;
	margin-left:3px;
	color:gray;
}
.number p:hover{
	color:white;
	background:#F03726;
	border:none;
}
.footer{
	width:1070px;
	height:150px;
	font-size:12px;
	margin:-50px 0px 0px 180px;
}
.footer p{float:left;margin-right:23px;line-height:30px;}
.footer a:link{color:gray;}
.footer a:visited{color:gray;}
.footer a:hover{color:black;text-decoration:underline;}

版权声明:本文为weixin_46811890原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。