前端制作电商页面

任务

利用已有图片，制作电商页面，实现图片的对齐与页面的美观。

代码

CSS

@charset "utf-8";

*{
	padding:0;
	margin:0;
}
.cont{
	width:1115px;
	height:800px;
	margin:20px auto;
	padding:154px 0 0 250px;
	background: url(../img/bg.jpg) no-repeat;
}

.cont d1{
	border: 1px solid #e6e6e6;
	margin: 20px 10px;
	float: left;
}

.cont dt img{
	padding: 20px;
	width: 180px;
}
dd{
	background: #f0f2f7;
	padding: 20px 10px;
}
.name{
	padding-bottom: 10px;
}
.credits{
	color:#f00;
}
.exchange{
	float: right;
	color: #447BD3;
	padding: 4px 6px;
	border: 1px solid #447BD3;
}

HTML

	
		
		
			
	
	

			
				

				
 明日学院v1会员（3个月）
				
9500学分去兑换
			
			
				

				
 明日学院v2会员（3个月）
				
49500学分去兑换
			
			
				

				
 Java项目开发实战入门
				
30000学分去兑换
			
			
				

				
 Android项目开发实战入门
				
35000学分去兑换
			
			
				

				
 JavaWeb项目开发实战入门
				
35000学分去兑换
			
			
				

				
 JSP项目开发实战入门
				
35000学分去兑换
			
			
				

				
 PHP项目开发实战入门
				
35000学分去兑换
			
			
				

				
 C语言项目开发实战入门
				
35000学分去兑换
			

	

实现页面

总结

1.能够实现HTML代码与CSS代码的链接。向HTML中引入CSS有三种方式，分别是内部样式表，内联样式和外部样式表。内部样式表：不使用外部CSS文件，将CSS存放在HTML文件的中。直接在head部分直接输入style标签，在style里写入CSS内容。内联样式：不使用外部CSS文件，该样式仅影响一个元素，在HTML的body中的标签后面直接设置style属性。外部样式表：外部样式使用外部CSS文件，保存在.css文件中。需要在HTML中使用标签引入CSS外部文件。

2.可在HTML文件中插入图片。可在HTML文件中添加按钮。用来组合文档中的行内元素。

可定义文档中的分区或节。

3.border函数：边框。可设置粗细、虚实、颜色。padding:文档与边框的内边距。margin:边框与边框的外边距。padding和margin都可实现上下左右的距离。background:背景。可设置图片、颜色等。width:宽度。height:高度。color:颜色。float:浮动属性。可设置几个不同的物体并排显示。