css3基础100问之box模块是怎样制作的呢？（33）

box部分效果：

 

html代码：

	

		

			
精品推荐
			查看全部
		
		
		

			

				

					
					
Think PHP 5.0 博客系统实战项目演练
					
高级  •  1125人在学习
				
				

					
					
Think PHP 5.0 博客系统实战项目演练
					
高级  •  1125人在学习
				
				

					
					
Think PHP 5.0 博客系统实战项目演练
					
高级  •  1125人在学习
				
				

					
					
Think PHP 5.0 博客系统实战项目演练
					
高级  •  1125人在学习
				
				

					
					
Think PHP 5.0 博客系统实战项目演练
					
高级  •  1125人在学习
				
				

					
					
Think PHP 5.0 博客系统实战项目演练
					
高级  •  1125人在学习
				
				

					
					
Think PHP 5.0 博客系统实战项目演练
					
高级  •  1125人在学习
				
				

					
					
Think PHP 5.0 博客系统实战项目演练
					
高级  •  1125人在学习
				
				

					
					
Think PHP 5.0 博客系统实战项目演练
					
高级  •  1125人在学习
				
				

					
					
Think PHP 5.0 博客系统实战项目演练
					
高级  •  1125人在学习
				
			
		
	
	

css代码：

 

/*box start*/
.box {
	margin-top: 15px;
}
.box-hd {
	height: 60px;
	line-height: 60px;
	/*background-color: pink;*/
}
.box-hd h3 {
	float: left;
	font-size: 20px;
	color: #494949;
	/*让粗体不加粗 400 == normal*/
	font-weight: 400; 
}
.box-hd a {
	float: right;
	margin-right: 30px;
	font-size: 12px;
	color: #a5a5a5;

}
.box-bd {
	/*这个盒子一定不要给高度 因为我们可能放一行 也可能是2行 或者n行*/
	/*宽度呢？ 呵呵*/
	/*box-bd 宽度 超过了 版心 1200 是可以的，就就解决了问题*/
	width: 1215px;
}
.box-bd li {
	float: left;
	width: 228px;
	height: 270px;
	margin-right: 15px;
	margin-bottom: 15px;
	background-color: #fff;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}
.box-bd li img {
	width: 100%;
}
.box-bd li h4 {
	margin: 20px;
	font-size: 14px;
	color: #050505;
	font-weight: 400;
}
.box-bd li p {
	margin: 0 20px;
	font-size: 12px;
	color: #999;
}
.box-bd p span {
	color: orange;
}
/*box end */