制作电商页面（Html）

任务

制作一个电商页面，要求所卖物品清晰，页面色调清晰，要有主页和详情页。

网站所买物品：书籍

色调：#FF2400 橙红色

代码

主页HTML代码：

	
		
		
		
	
	
		

			
		

		

			

			
			
		

		
 
			全部商品分类
		
		

			

				
名家作品
				
青春文学
				
外国名著
				
考公考编
				
教辅资料
			
		

		
		
		
		
		

			

				      
				搜素
			
			

				图书
				电子书
				教辅
				漫画
				周边
				
			
		
		
		

			

					
购物车
					
登录/注册
			
			

				
排行榜
					

					
《生死疲劳》
					
《晚熟的人》
					
《我与地坛》
					
《蛤蟆先生去看心理医生》
				   
			
		
	
		
		
		

			

				图书/电子书
			
			

				

					

					
 《我的职业是小说家》
					
¥25
				
				

					
 
					余华《活着》
					

					鲁迅《故事新编》
					

					莫言《晚熟的人》
					

					当年明月《明朝那些事儿》
					

					张嘉佳《从你的全世界路过》
					

					《读者》杂志
				
				

					

					
更多>>>
				
			
		
		
		

			

				教辅/考证
			
			

				

					

					
 《二级office高级应用》
					
¥30
				
				

					
 
					事业编综合应用能力教材
					

					考研《数学基础过关660题》
					

					《英语六级翻译30天速成》
					

					《教师职业能力测验》
					

					《英语四级阅读理解》
					

					《驾考宝典》
				
				

					

					
更多>>>
				
			
		
		
		

			

				漫画/周边
			
			

				

					

					
 《撒野》小说
					
¥35
				
				

					
 
					《撒野》相框
					

					《偷偷藏不住》贴纸
					

					《狐妖小红娘》联名装饰品
					

					《难哄》明信册
					

					《知音漫客》杂志
					

					《魔道祖师》钥匙扣
				
				

					

					
更多>>>
				
			
		
		
	

主页CSS代码

*{
	padding:0;
	margin:0;
}
.a{width:1000px; 
   height:1800px; 
   border:0px solid black;
   margin:0px auto;}
.c1{width:900px; 
    border:3px solid #E47833; 
    margin-left:20px; 
    margin-top:8px;}
.c2{height:450px;
    width:950px;
    margin-top:30px;}
.c3{height:380px;
    width:950px;
    margin-top:30px;}
.c4{height:400px;
    width:950px;
    margin-top:30px;}
.c5{height:400px;
    width:950px;
    margin-top:30px;}
.c6{
	border:0px solid black;
	width:160px; 
	height:80px;
	margin:5px;
}
.b1{
	width:200px;
	height:360px;
	margin-top:10px;
	margin-left:10px;
	border:0px solid black;
	float:left;
}
.b2{
	width:100px;
	margin-left: 5px;
	margin-top: 15px;
	padding:5px;
	border:0px solid gray;
}
.b3{
	width:150px;
	height: 200px;
	margin-left: 5px;
	margin-top: 5px;
	padding-left:10px;
	border:0px solid gray;
}
.b4{
	width:550px;
	height:430px;
	border:0px solid cadetblue;
	float:left;
	margin:5px;
}
.b5{
	width:500px;
	height:80px;
	border:0px solid gray;
	margin:10px;
}
.b6{
	width:350px; 
	height:30px;
	margin-top:20px;
	margin-left:15px;
	border:2px solid #FF2400;
	font-size: 15px;
}
.b7{
	width:40px;
	height:30px;
	margin-left:5px;
	background-color: #FF2400;
	position:absolute;
	margin-top:20px;
	margin-bottom:auto;
	text-align:center;
	border:0px;
	font-size:15px;
}
.b8{
	width:500px;
	height:300px;
	border:0px solid black;
	margin-left:5px;
	padding:5px;
}
.b9{
	width:30px;
	height:30px;
	border:0px solid gray;
	margin-top:5px;
}
.b9:hover{
	background-color: grey;
}
.b10{
	background-color: gray;
}
.d1{
	width:850px;
	height:35px;
	border:0px solid black;
	margin:10px;
	font-size:25px;
	text-align:left;
}
.d2{
	width:870px;
	height:300px;
	margin:10px;
	border:0px solid #856363;
}
.d3{
	width:200px;
	height:280px;
	margin:10px;
	border:2px solid #6B4266;
	float:left;
}
.d4{
	margin:5px;
	text-align: center;
}
.d5{
	color:#FF0000;
	text-align: center;
}
.d6{
	text-align:center;
	font-size:20px;
}
.d6:hover{
	background-color: #FF7F00;
}
.d7{
	float:left;
	margin-top:10px;
	margin-left:20px;
	width:150px; 
	height:120px;
	border:0px solid #3299CC;
	text-align:left;
	padding:5px;
}
.d8{
	width:550px;
	height:280px;
	margin:10px;
	border:2px solid #6B4266;
	float:left;
	padding:5px;
	text-align:center;
}
.d9{
	font-size:10px;
	padding:1px;
	float:left;
}
.d9:hover{
	background-color: #FF7F00;
}
.d10{
	width:60px;
	height:280px;
	border:0px solid black;
	font-size:10px;
	margin-bottom:5px;
	margin-top:10px;
	text-align:center;
	float:left;
	padding-bottom: 5px;
}
.d11{
	width:40px;
	height:250px;
	border:0px solid black;
	margin:2px;
}
.d12{
	color:cornflowerblue;
}
.d12:hover{
	background-color: #FF7F00;
}
.e1{
	width:150px;
	height:400px;
	border:0px solid black;
	float:left;
	margin:10px;
}
.e2{
	width:130px;
	height:50px;
	border:0px solid black;
	margin:5px;
}
.e3{
	width:130px;
	height:250px;
	border:0px solid black;
	margin-top:40px;
	margin-left:5px;
}
.e4{
	width:50px;
	height:30px;
	border:0px solid black;
	margin-top:5px;
	float:left;
	font-size: 10px;
	padding-top:2px;
}
.e5{
	width:70px;
	height:30px;
	border:0px solid black;
	margin-left:2px;
	margin-top:5px;
	float:left;
	font-size:10px;
	padding-top:2px;
}
.e6{
	width:70px;
	height:30px;
	border:0px solid black;
	font-size:15px;
	padding-top:10px;
	margin-bottom:5px;
	margin-left:0px;
}
.e7{
	width:100px;
	height:150px;
	border:0px solid black;
	font-size:10px;
	padding-top:10px;
	margin:5px;
}

商品详情页HTML代码

	
		
		
		
	
	
		

			

				
			
			

				

				
书名：《我的职业是小说家》
				
作者：村上春树
				
价格
				

					¥25
				
				
				

					立即购买
					加入购物车
				
			
		
	

商品详情页CSS代码

*{
	padding:0;
	margin:0;
}
.w{
	width:700px;
	height:500px;
	border:2px solid #FF2400;
	margin-left:0px;
}
.t1{
	width:300px;
	height:400px;
	border:0px solid black;
	margin-left:5px;
	margin-top:5px;
	float:left;
	padding-left:10px;
	padding-top:10px;
}
.t2{
	width:250px;
	height:400px;
	margin-top:10px;
	margin-left:10px;
	border:0px solid black;
	float:left;
}
.t3{
	width:220px;
	height:250px;
	margin-top:30px;
	margin-left:10px;
	border:0px solid black;
}
.t4{
	width:200px;
	height:50px;
	margin-top:10px;
	margin-left:5px;
	border:0px solid black;
}
.t5{
	width:200px;
	height:50px;
	margin-top:10px;
	margin-left:5px;
	border:0px solid black;
}
.t6{
	width:60px;
	height:50px;
	margin-top:10px;
	margin-left:5px;
	border:0px solid black;
	float:left;
}
.t7{
	width:60px;
	height:50px;
	margin-top:10px;
	margin-left:5px;
	border:0px solid black;
	float:left;
	color:red;
}
.t8{
	width:220px;
	height:50px;
	margin-top:10px;
	margin-left:10px;
	border:0px solid black;
}
.t9{
	width:80px;
	height:40px;
	margin:10px;
	border:2px solid deepskyblue;
	float:right;
	background-color: white;
}
.t10{
	width:60px;
	height:40px;
	margin:10px 5px;
	border:2px solid deepskyblue;
	float:right;
	background-color: white;
}

实现效果图