abstrait：最外圍邊框固定，內(nèi)容布局分為三大行，第一行放字，第二行放文本域。第三行放用戶的選擇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; h
最外圍邊框固定，內(nèi)容布局分為三大行，第一行放字，第二行放文本域。第三行放用戶的選擇
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">發(fā)布</button>
</div>
</div>