摘要：效果图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;}
