HTML+CSS 模仿淘宝部分网页（未实现事件）

最近再学用HTML+CSS模仿淘宝页面，发现还挺好玩的，来贴贴成果，还在学vue实现响应事件等，所以这里只是单纯的画了画页面，其他功能均未实现。淘宝原网页：我的成果：工程结构：只有taobaoHome.html和test.css是有用的。html代码：<!DOCTYPE html><html><head><meta charset="utf-8">

ccsu_deer

8276人浏览 · 2020-05-29 21:17:19

ccsu_deer · 2020-05-29 21:17:19 发布

最近再学用HTML+CSS模仿淘宝页面，发现还挺好玩的，来贴贴成果，还在学vue实现响应事件等，所以这里只是单纯的画了画页面，其他功能均未实现。

淘宝原网页：

我的成果：

工程结构：

只有taobaoHome.html和test.css是有用的。

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的淘宝</title>
		<link rel="stylesheet" type="text/css" href="css/test.css"/>
		<script src="Hello.js"></script>
	</head>
	<body>
		
		

	<div class="div_tot">
		
		<div class="xxx">
			
			<div class="div_1">
				<div class="div_2">
					<span>中国大陆</span>
					<span>亲,请登录</span>
					<span>免费注册</span>
					<span>手机逛淘宝</span>
				</div>
				
				<div class="div_2">
					<span>我的淘宝</span>
					<span>购物车</span>
					<span>收藏夹</span>
					<span>商品分类</span>
					<span>千牛卖家中心</span>
					<span>联系客服</span>
					<span>网站导航</span>
					
				</div>
			</div>
			
			<div class="div_3">
				<div class="div_4">
					<a>
						<img src="https://img.alicdn.com/tfs/TB1urCYGbr1gK0jSZR0XXbP8XXa-1190-70.jpg"/>
					</a>
				</div>
			</div>
			
		</div>
		
		
		
		
		<div class="div_5">
			<div class="div_5_1">
				<a>
					<img src="https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png"/>
					
				</a>
			</div>
			
			
			<div class="div_7">
				<div class="div_7_1">这是一个搜索框</div>
				<div class="div_7_2">
					<span>热点1</span>
					<span>热点2</span>
					<span>热点3</span>
				</div>
			</div>
			
			<div class="div_8">
				<div>
					<!--二维码 -->
					<img style="width: :;0px; height: 80px;" src="img/QR_code.png"/>
				</div>
			</div>
		</div>
		
	
		
		<div class="div_center">
			<div class="div_center_top_left">
				<a>主题市场</a>
			</div>
			<div class="div_center_top_ceter" >
				<div class="div_center_top_ceter_1">
					<a>天猫</a>
					<a>聚划算</a>
					<a>天猫超市</a>
				</div>
				
				<div class="div_center_top_ceter_1">
					<a>淘抢购</a>
					<a>电器城</a>
					<a>司法拍卖</a>
				</div>
				
				<div class="div_center_top_ceter_1">
					<a>淘宝心选</a>
					<a>兴农脱贫</a>
					
				</div>
			</div>
		</div>
		
		
		
		
		<div class="div_center_center">
			
			
		
			<div class="_div_include_ceter_left">
				
				
				<div class="div_center_left">
					<a>女装/男装/内衣          ></a>
				</div>
				
				<div class="div_center_left">
					<a>鞋靴/箱包/配件  ></a>
				</div>
				
				<div class="div_center_left">
					<a>童装玩具/孕产/用品  ></a>
				</div>
				
				<div class="div_center_left">
					<a>家电/数码/手机  ></a>
				</div>
				
				<div class="div_center_left">
					<a>美妆/洗护/防护品  ></a>
				</div>
				
				<div class="div_center_left">
					<a>珠宝/眼镜/手表></a>
				</div>
				
				<div class="div_center_left">
					<a>运动/户外/乐器  ></a>
				</div>
				
				<div class="div_center_left">
					<a>游戏/动漫/影视  ></a>
				</div>
				
				<div class="div_center_left">
					<a>美食/生鲜/零食  ></a>
				</div>
				
				<div class="div_center_left">
					<a>鲜花/宠物/农资  ></a>
				</div>
				
				<div class="div_center_left">
					<a>面料集采/装修/建材  ></a>
				</div>
				
				<div class="div_center_left">
					<a>家具/家饰/家纺  ></a>
				</div>
				
				<div class="div_center_left">
					<a>汽车/二手车/用品  ></a>
				</div>
				
				<div class="div_center_left">
					<a>办公/DIY/五金电子  ></a>
				</div>
				
				<div class="div_center_left">
					<a>百货/餐厨/家庭保健  ></a>
				</div>
				<div class="div_center_left">
					<a>学习/卡券/本地服务  ></a>
				</div>
			</div>
			
			
			
			
			<div class="div_center_center_1">
				<div>
					<!--下面是向左滚动代码-->
					
					<div id="butong_net_left" style="overflow:hidden;width:590px;margin-left: 10px;">
						<table cellpadding="0" cellspacing="0" border="0">
							<tr><td id="butong_net_left1" valign="top" align="center">
								<table cellpadding="0" cellspacing="0" border="0">
									<tr >
										<td><img class="div_center_center_img1" src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"></td>
										<td><img class="div_center_center_img1" src="https://img.alicdn.com/tfs/TB11ddWHXY7gK0jSZKzXXaikpXa-520-280.jpg_q90_.webp"></td>
										<td><img class="div_center_center_img1" src="https://img.alicdn.com/tfs/TB1IOihH.Y1gK0jSZFMXXaWcVXa-520-280.png_q90_.webp"></td>
										<td><img class="div_center_center_img1" src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"></td>
										<td><img class="div_center_center_img1" src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"></td>
									</tr>
								</table>
							</td>
								<td id="butong_net_left2" valign="top"></td>
							</tr>
						</table>
					</div>
					
					<script>
						var speed=10//速度数值越大速度越慢
						butong_net_left2.innerHTML=butong_net_left1.innerHTML
						function Marquee3(){
						if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)
							butong_net_left.scrollLeft-=butong_net_left1.offsetWidth
						else{
							butong_net_left.scrollLeft++
						}
						}
						var MyMar3=setInterval(Marquee3,speed)
						butong_net_left.οnmοuseοver=function() {clearInterval(MyMar3)}
						butong_net_left.οnmοuseοut=function() {MyMar3=setInterval(Marquee3,speed)}
					</script>
					 
					
					
					
					
					
					<!--向左滚动代码结束-->
					
				</div>
				
				<div class="div_center_cnter_img1_fa">
					<div>
						<a>
							<img class="div_center_center_img2" src="https://img.alicdn.com/tps/i4/TB1BRa5HxD1gK0jSZFKSuwJrVXa.jpg_240x240q90.jpg"/>
						</a>
					</div>
					
					<div>
						<a>
							<img class="div_center_center_img3" src="https://img.alicdn.com/tps/i4/TB1GZNXXupyVu4jSZFhSuvBpVXa.jpg_240x240q90.jpg"/>
						</a>
					</div>
				</div>
			</div>
			
			
			
			
			
			<div class="div_center_right">
				<div class="div_center_right_top">
					
					<div class="div_center_right_top1">
						<a>
							<img class="div_center_right_top1_img" src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_50x50.jpg"/>
						</a>
					</div>
						
					<div class="div_say_hello">
						<a>Hi 你好</a>
					</div>
					
					<div class="div_just_for_felx">
						<div class="div_center_right_top2">
							<a >领淘币抵钱</a>
						</div>
						<div class="div_center_right_top2_1">
							会员俱乐部
						</div>
					</div>
					
					
					<div class="div_just_for_felx_and_top10px">
						<div class="div_center_right_top3">
							<a class="div_just_for_top10px">登录</a>
						</div>
						<div class="div_center_right_top3">
							<a>注册</a>
						</div>
						<div class="div_center_right_top3">
							<a>开店</a>
						</div>
					</div>
					
				</div>
				
			
			
			
			
				<div class="div_for_report">
					<a >网上有害信息举报专区   ▶</a>
				</div>
				<div class="div_center_right_down1">
					<div class="div_for_font_size_1">公告</div>
					<div class="div_for_font_size_1">规则</div>
					<div class="div_for_font_size_1">论坛</div>
					<div class="div_for_font_size_1">安全</div>
					<div class="div_for_font_size_1">公益</div>
				</div>
				
				<div class="div_center_right_down1">
					<div class="div_for_font_size_2">魔豆妈妈公益项目	</div>
					<div class="div_for_font_size_2">让母爱永不打烊！</div>
					
				</div><div class="div_center_right_down1">
					<div class="div_for_font_size_2">卖家注意：风险通报！</div>
					<div class="div_for_font_size_2">售假获刑又起诉</div>
				</div>
				
				
				
				<div >
					<img  style="width: 100%;height: 235px;" src="img/photo_right.png"/>
				</div>
				
			</div>
		</div>
		
		
		
		<div class="Good_live">
			<div class="Good_live_left">
				<div class="subtitle">
					<img class="Good_live_left_img1" src="//img.alicdn.com/tfs/TB1tqpnegMPMeJjy1XcXXXpppXa-148-48.png"/>
					<a class="subtitle_font">与品质生活不期而遇</a>
				</div>
				
				
				<div class="Good_live_left_2">
					<div class="Good_live_left_2_1">
						<img  class="Good_live_left_2_img1" src="https://img.alicdn.com/tfscom/i1/1581756766/TB2TF0ch0zJ8KJjSspkXXbF7VXa_!!1581756766.jpg_180x180xzq90.jpg_.webp"/>
						<p></p>
						<a>大豆家 方头奶奶鞋</a>
						<p></p>
						<a>一脚蹬设计，方便每</a>
						<p>
							<a style="color: #55aaff;">☺ 3758 人说好</a> 
						</p>
						
					</div>
					
					<div class="Good_live_left_2_1">
						<img class="Good_live_left_2_img2" src="https://img.alicdn.com/imgextra/i1/32234056/TB2Ta9MfBmWBuNkSndVXXcsApXa_!!32234056-2-beehive-scenes.png_180x180xzq90.jpg_.webp"/>
						<p></p>
						<a>孩子早教中，这款</a>
						<p></p>
						<a>不同文理的小球，适</a>
						<p>
							<a style="color: #55aaff;">☺ 47 人说好</a> 
						</p>
						
					</div>
					
					
					<div class="Good_live_left_2_1">
						<img class="Good_live_left_2_img3" src="https://img.alicdn.com/tfscom/i3/2459354798/TB2IyE5eUhnpuFjSZFpXXcpuXXa_!!2459354798.jpg_180x180xzq90.jpg_.webp"/>
						<p></p>
						<a>佳宝路转角水槽</a>
						<p></p>
						<a>304不锈钢，表面光滑</a>
						<p>
							<a style="color: #55aaff;">☺ 122 人说好</a> 
						</p>
						
					</div>
				</div>
				
				
				
				<div class="Good_live_left_3">
					<div class="Good_live_left_2_1">
						<img  class="Good_live_left_2_img1" src="https://img.alicdn.com/imgextra/i1/2645215035/TB2y.PZcGQoBKNjSZJnXXaw9VXa_!!2645215035-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp"/>
						<p></p>
						<a>Coca-Cola 可乐瓶T恤</a>
						<p></p>
						<a>简约的纯色基调，宣扬自由</a>
						<p>
							<a style="color: #55aaff;">☺ 35 人说好</a> 
						</p>
						
					</div>
					
					<div class="Good_live_left_2_1">
						<img class="Good_live_left_2_img2" src="https://img.alicdn.com/imgextra/i1/2959008325/TB2zh2RoRjTBKNjSZFNXXasFXXa_!!2959008325-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp"/>
						<p></p>
						<a>Bite 唇釉</a>
						<p></p>
						<a>简洁的深灰色包装，低调</a>
						<p>
							<a style="color: #55aaff;">☺ 13 人说好</a> 
						</p>
						
					</div>
					
					
					<div class="Good_live_left_2_1">
						<img class="Good_live_left_2_img3" src="https://img.alicdn.com/tfscom/i4/654230132/O1CN011CqUjXBxyNTXTMy_!!654230132.jpg_180x180xzq90.jpg_.webp"/>
						<p></p>
						<a>肖优秀真皮细高跟</a>
						<p></p>
						<a>细跟尖头设计更显优</a>
						<p>
							<a style="color: #55aaff;">☺ 68 人说好</a> 
						</p>
						
					</div>
				</div>
				
			</div>
			
			
			
			
			<div class="Good_live_right">
				<div class="subtitle">
					<img class="Good_live_right_img1" src="//img.alicdn.com/tfs/TB1UNX2bSFRMKJjy0FhXXX.xpXa-112-46.png"/>
					<a class="subtitle_font" style="display: flex;">献给聪明可爱的你</a>
				</div>
				
				<div class="Good_live_left_2">
					<div class="Good_live_left_2_1">
						<img  class="Good_live_right_2_img1" src="https://img.alicdn.com/bao/uploaded/TB28TQ1nrBmpuFjSZFAXXaQ0pXa_!!2996832334.png_180x180xzq90.jpg_.webp"/>
						<p></p>
						<a>2020新款潮女士双肩包韩版时尚休闲百</a>
						<p>
							<a style="color: #55aaff;">☺ 时髦挖掘机</a> 
						</p>
						
					</div>
					
					<div class="Good_live_left_2_1">
						<img class="Good_live_right_2_img2" src="https://img.alicdn.com/bao/uploaded/TB2jH_uoFXXXXXfXpXXXXXXXXXX_!!0-dgshop.jpg_180x180xzq90.jpg_.webp"/>
						<p></p>
						<a>美国艾蒂宝趴趴枕午睡枕趴睡枕学生</a>
						
						<p>
							<a style="color: #55aaff;">☺ 爱逛****102</a> 
						</p>
						
					</div>
					
					
					<div class="Good_live_left_2_1">
						<img class="Good_live_right_2_img3" src="https://img.alicdn.com/bao/uploaded/TB2i9iuoFXXXXbPXpXXXXXXXXXX_!!0-juitemmedia.jpg_180x180xzq90.jpg_.webp"/>
						<p></p>
						<a>香港进口特产美心原味鸡蛋卷32大条礼盒</a>
						
						<p>
							<a style="color: #55aaff;">☺ 放飞自我的兔小姐</a> 
						</p>
						
					</div>
				</div>
				
				
				
				<div class="Good_live_left_3">
					<div class="Good_live_left_2_1">
						<img  class="Good_live_right_2_img1" src="https://img.alicdn.com/bao/uploaded/i0/TB1s.15NFXXXXbMaXXXXXXXXXXX_!!0-item_pic.jpg_180x180xzq90.jpg_.webp"/>
						<p></p>
						<a>秋冬季棉拖鞋包跟厚底情侣家居防滑保</a>
						<p>
							<a style="color: #55aaff;">☺ 不喜*****扰哈</a> 
						</p>
						
					</div>
					
					<div class="Good_live_left_2_1">
						<img class="Good_live_right_2_img2" src="https://img.alicdn.com/bao/uploaded/TB2BnymXX95V1Bjy0FdXXc5BVXa_!!664782798-0-goldwindow.jpg_180x180xzq90.jpg_.webp"/>
						<p></p>
						<a>原创品牌日系学生单肩女包百搭休闲文艺</a>
						
						<p>
							<a style="color: #55aaff;">☺ 时髦挖掘机</a> 
						</p>
						
					</div>
					
					
					<div class="Good_live_left_2_1">
						<img class="Good_live_right_2_img3" src="https://img.alicdn.com/bao/uploaded/TB2jQl2ml0kpuFjy1zdXXXuUVXa_!!0-juitemmedia.jpg_180x180xzq90.jpg_.webp"/>
						<p></p>
						<a>格莱达大容量保温杯男士保温壶户外不</a>
						
						<p>
							<a style="color: #55aaff;">☺ 潮流女孩girl</a> 
						</p>
						
					</div>
				</div>
			</div>
		</div>
		
		<div style="margin-top: 10px;">
			<img src="https://img.alicdn.com/simba/img/TB1MDBzuUY1gK0jSZFMSuuWcVXa.jpg"/>
		</div>
		<div>asdggasd</div>
		
		
		
		
		
	</div>
		
		
		
	</body>
</html>

test.css 代码：

body{
	color:#3c3c3c;
	-webkit-font-smoothing: antialiased;
	background-color: #f4f4f4;
	margin:0;
	padding: 0;
}
.div_tot{
	margin: 0 auto; width: 1200px;height: 3000px;
}

.div_1{
	width: 1200px;
	margin: 0 auto; 
	padding: 5px 0; 
	display: flex;
	justify-content: space-between;
}

.div_2{
	background-color: #FFFFFF;
}

.div_3{
	background-color: #f40d4d;
}

.div_4{
	width: 1200px; 
	margin: 0 auto;
}

.div_5{
	width: 1200px;
	margin: 0 auto; 
	padding: 5px 0;
	margin-top:30px;
	display: flex;
}
.div_5_1{
	width: 15%;
}

.div_6{
	width: 15%;
}

.div_7{
	width: 60%; 
	color: #000000; 
	margin-left:50px ; 
	height: 60px;
	line-height: 35px;
}

.div_7_1{
	text-align: center;
	background-color: #ff5500;
	border-radius:20px;
}

.div_7_2{
	
	font-size: 10; 
	color: #000000;
}

.div_8{
	font-size: 100;
	margin-left: 20px;
}

.div_center{
	width: 1200px; 	 
	margin: 0 auto; 
	display: flex; 
	background-color: #ff5500;
	height: 40px;
}
.div_center_top_left{
	width: 120px;
	text-align: center;
	height: 10px;
	margin-top:10px;
	color: #FFFFFF;
}
.div_center_top_ceter{
	width:90%; 
	display: flex; 
	margin-top:10px;
	margin-left:100px ; 
	padding: 0 20px;
	color: #FFFFFF;
}
.div_center_top_ceter_1{
	padding: 0 20px;
}





.div_center_center{
	width: 1200px; 	 
	margin: 0 auto; 
	display: flex; 
	height: 520px;
}


._div_include_ceter_left{
	width: 200px;
	height: 500px;
	line-height: 40px;
	border:1px solid #ff5500;
}

.div_center_left{
	width: 230px;
	height: 30px;
	margin-left:15px;
	font-size:13px;
	font-style: inherit;
	color: #000000;
	font-family:"宋体"; 
	letter-spacing : 2px;
}


.div_center_center_1{
	margin-top:10px ;
	width: 600px;
	height: 600px;
}
.div_center_cnter_img1_fa{
	width: 600px;
	height: 600px; 
	display: flex;
	
}
.div_center_center_img1{
	width: 600px;
	height: 300px;
	margin-left:10px ;
}
.div_center_center_img2{
	margin-left:10px ;
	width: 290px;
	height: 188px;
}
.div_center_center_img3{
	margin-left:10px ;
	width: 290px;
	height: 188px;
}


.div_center_right{
	width: 390px;
	height: 500px;
	background-color: #ffffff;
	margin-left: 10px;
	
}

.div_center_right_top{
	margin-top:10px ;
	width: 100%;
	height: 150px;
	
	background-image: url('data:image/png;base64,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');
}

.div_center_right_top1{
	margin-top:10px ;
	
	text-align: center;
	
}
.div_center_right_top1_img{
	
	width: 50px;
	height: 50px;
	border-radius:50px;
	margin-top:10px ;
	text-align: center;
}

.div_center_right_top2{
	width: 100px;
	text-align: center;
	height: 20px;
	border-radius:20px;
	background-color: #ffaa7f;
	color: #ff5500;
	font-size: 13px;
	margin-left:90px ;
}
.div_center_right_top2_1{
	width: 100px;
	text-align: center;
	height: 20px;
	border-radius:20px;
	background-color: #ffaa7f;
	color: #ff5500;
	font-size: 13px;
	margin-left:10px ;
}
.div_center_right_top3{
	width: 90px;
	text-align: center;
	height: 25px;
	border-radius:10%;
	background-color: #ff5500;
	color: #ffffff;
	font-size: 15px;
	margin-left:20px ;
}
.div_say_hello{
	text-align: center;
	font-size:13px;
}
.div_just_for_felx{
	display: flex;
}
.div_just_for_felx_and_top10px{
	display: flex;
	margin-top: 10px;
}
.div_just_for_top10px{
	margin-top: 10px;
}

.div_for_report{
	width: 100%;
	background-color: #ffe9dc;
	text-align: center;
	color: #ff5500;
}
.div_center_right_down1{
	display: flex;
	width: 100%;
	height: 30px;
}
.div_for_font_size_1{
	width: 90px;
	text-align: center;
	height: 5px;
	margin-top: 10px;
	color: #000000;
	font-size: 10px;
	margin-left:10px 
}
.div_center_right_down2{
	display: flex;
	width: 100%;
	height: 30px;
}
.div_for_font_size_2{
	width: 190px;
	margin-left: 15px;
	height: 5px;
	margin-top: 10px;
	color: #000000;
	font-size: 12px;
	margin-left:10px 
}
.div_for_font_size_3{
	width: 90px;
	text-align: center;
	height: 5px;
	margin-top: 10px;
	color: #000000;
	font-size: 15px;
	margin-left:10px 
}

.Good_live{
	width: 1200px;
	height: 780;
	display: flex;
}
	
.Good_live_left{
	width: 595px;
	height: 750px;
	background-color: #ffffff;
}
.subtitle{
	width: 595px;
	height: 20px;
	margin-top: 20px;
	margin-left: 20px;
	display: flex;
}
.Good_live_left_img1{
	width: 74px;
	height: 24px;
}


.Good_live_right{
	width: 595px;
	height: 750px;
	margin-left: 10px;
	background-color: #ffffff;
}
.Good_live_right_img1{
	width: 74px;
	height: 24px;
}

.subtitle_font{
	font-size: 12px;
	margin-top: 10px;
	margin-left: 30px;
	font-family: "Hiragino Sans GB";
}
	
.Good_live_left_2{
	width: 100%;
	margin-top: 20px;
	margin-left: 10px;
	display: flex;
}

.Good_live_left_2_1{
	width: 178px;
	height: 178px;
	margin-top: 20px;
	margin-left: 10px;
	font-size: 13px;
}

.Good_live_left_2_img1{
	width: 168px;
	height: 168px;
}

.Good_live_left_2_img2{
	width: 168px;
	height: 168px;
}

.Good_live_left_2_img3{
	width: 168px;
	height: 168px;
}

.Good_live_left_3{
	width: 100%;
	margin-top: 150px;
	margin-left: 10px;
	display: flex;
}







.Good_live_right_2_img1{
	width: 168px;
	height: 168px;
	
	background-color: #b8b8b8;
}

.Good_live_right_2_img2{
	width: 168px;
	height: 168px;
	
	background-color: #b8b8b8;
}
.Good_live_right_2_img3{
	width: 168px;
	height: 168px;
	
	background-color: #b8b8b8;
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^