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

其他 2020-06-18 23:58:59 阅读次数: 0

最近再学用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;
}

猜你喜欢

转载自blog.csdn.net/qq_41286356/article/details/106432912
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022