CSS的使用与练习

练习知识点：类选择器，简单布局

先看效果图：

以下是样式编辑部分：

<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.main_box{
			width:210px;
			height:386px;
			border:1px solid #CECECE;
			margin:10px auto;
		}
		.title{
			width:208px;
			height:25px;
			padding-left:2px;
			font:16px 'Microsoft Yahei' blue;
			background-color: #C9E143;
		}
		.photo{
			width:180px;
			height:180px;
			border:1px solid #CECECE;
			margin:10px auto;
		}
		.wb{
			margin:0 auto;
			text-align: center;
			border-bottom: 1px dotted #D1D1D1;
			padding-bottom: 10px;
		}
		.wb input{
			width:68px;
			height:23px;
			margin-top: 10px;
			background-image: url(images/vb.jpg);
			background-repeat: no-repeat;
			background-color: #EEEEF2;
			outline-style: none;
		}
		.friend{
			width:208px;
			height:72px;
			text-align: center;
			padding-top:20px; 
		}
		.friend input{
			width:67px;
			height:21px;
			
			margin-top: 5px;
			outline-style: none;
		}
	</style>

这部分是简单的布局：

<div class="main_box">
		<div class="title">个人资料</div>
		<div class="photo"><img src="images/1.jpg" alt=""></div>
		<div class="wb">
			Vshanshan<img src="images/tb.gif" height="12" width="12"><br>
			<input type="button" name="" value="微博">
		</div>
		<div class="friend">
			<input type="button" name="" value="加好友">
			<input type="button" name="" value="发纸条"><br>
			<input type="button" name="" value="写留言">
			<input type="button" name="" value="写留言">
		</div>
	</div>

PS：初次写博客，不知道该怎么记录这个过程，就想这简单的保存一下这个小练习。如有不当请多多指教。谢谢。