微博输入布局

摘要：效果图html代码<div class="box"> <img src="image/font.png"> <div class="box1"> 还可输入<span id="number">3</span>

效果图

html代码

<div class="box">
		<img src="image/font.png">
		<div class="box1">
			还可输入<span id="number">3</span>字
		</div>
		<div class="clear"></div>
		<textarea id="news"></textarea>
		<dvi class="clear"></dvi>
		<div class="box2">
			<span id="span1">表情</span>
			<span id="span2">图片</span>
			<span id="span3">视频</span>
			<span id="span4">话题</span>
			<span id="span5">头条文章</span>
			<button>发布</button>			
		</div>
		<div class="clear"></div>
	</div>

css代码

		body{font-size:12px;}
		.clear{clear:both;}
		.box{width: 600px;padding: 10px;border: 8px solid pink;margin: 0px auto;}
		.box img{float: left;}
		.box .box1{float: right;color: #888;}
		#number{font-size: 20px;font-weight: bold;font-family: Constantia, Georgia;font-style: italic;}
		#news{width:598px;height: 140px; outline:none;margin:5px 0px;border:1px solid #ccc;}
		#news:focus{border:1px solid orange;}
		.box2{width: 600px;}
		.box2 #span1,#span2,#span3,#span4,#span5,button{float: left;height: 36px;line-height: 36px;width: 80px;text-align: center;}
		#span1{background: url(image/span1.png) no-repeat left center;}
		#span2{background: url(image/span2.png) no-repeat left center;}
		#span3{background: url(image/span3.png) no-repeat left center;}
		#span4{background: url(image/span4.png) no-repeat left center;}
		#span5{background: url(image/span5.png) no-repeat left center;}
		.box2 button{margin-left: 120px;border: none;border-radius: 4px;background: #FF8140;color: #FFF;}
		.box2 button:hover{background: #F7671F;}