微博输入框html样式
最外围边框固定，内容布局分为三大行，第一行放字，第二行放文本域。第三行放用户的选择
css
.text{
width: 30%;
margin: 50px auto;
height: 200px;
border: 1px solid #ccc;
}
.text_top{
width: 95%;
padding-right: 5%;
text-align: right;
font-size: 13px;
height: 40px;
line-height: 40px;
}
.text_textarea{
width: 90%;
height:100px;
margin-left: 5%;
}
.text_bottom{
width: 90%;
margin: 0 auto;
font-size: 12px;
}
.text_bottom div{
float: left;
width: 30px;
height: 40px;
}
.text_bottom div{
padding-left: 22px;
height: 40px;
line-height: 40px;
margin-left: 1%;
}
.text_bottom .text_b1{
background: url(../img/表情.png) no-repeat left center;
background-size: 20px;
}
.text_bottom .text_b2{
background: url(../img/图片2.png) no-repeat left center;
background-size: 20px;
}
.text_bottom .text_b3{
background: url(../img/视频.png) no-repeat left center;
background-size: 20px;
}
.text_bottom .text_b4{
background: url(../img/话题.png) no-repeat left center;
background-size: 20px;
}
.text_bottom .text_b5{
background: url(../img/微博.png) no-repeat left center;
background-size: 20px;
}
.text_bottom .text_b6{
background: url(../img/公开.png) no-repeat left center;
background-size: 20px;
}
.text_button{
width: 80px;
height: 30px;
line-height: 30px;
margin: 1% 0% 1% 8.9%;
background: cornflowerblue;
color: white;
font-size: 12px;
border: none;
}
html:
<div class="text">
<div class="text_top">还可以输入32个字</div>
<textarea class="text_textarea"></textarea>
<div class="text_bottom">
<div class="text_b1">表情</div>
<div class="text_b2">图片</div>
<div class="text_b3">视频</div>
<div class="text_b4">话题</div>
<div class="text_b5">微博</div>
<div class="text_b6">公开</div>
<button class="text_button">发布</button>
</div>
</div>