微博输入框作业
2019-01-13 20:52:18252
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 先划分顶部中部底部三部分，再适当使用左右浮动可以一定程度上降低外边距和内边距的使用，在最后微调时再使用内外边距，整体布局会更模块化 */
body{font-size: 12px;}
.box{margin:0px auto;width:600px;height:210px;border: 9px solid pink;padding: 8px 8px;}
.box_head{padding: 5px 10px;}
.box_head_left{float: left;}
.box_head_right{float:right;padding-top:5px;color:#888;font-size: 15px;}
.box_body textarea{width:590px;height:130px;margin-top: 5px;border: 2px solid #ccc;}
.box_bottom{padding: 5px;}
.box_bottom_left{float: left;}
.box_bottom_right{float:right;}
.bt{width:80px;height:30px;border: none;background-color:peachpuff;color:white;border-radius: 5px;}
#sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float: left;height:32px;line-height: 32px;padding-left:26px;padding-right: 10px}
#sp1{background: url(static/images/an5.png) no-repeat left center;}
#sp2{background: url(static/images/an4.png) no-repeat left center;}
#sp3{background: url(static/images/an3.png) no-repeat left center;}
#sp4{background: url(static/images/an2.png) no-repeat left center;}
#sp5{background: url(static/images/an1.png) no-repeat left center;}
#sp6{color:#888;}
</style>
</head>
<body>
<div class="box">
<div class="box_head">
<div class="box_head_left">
<img src="static/images/12.png" alt="">
</div>
<div class="box_head_right">
<div >还可输入<span>140</span>字</div>
</div>
</div>
<div class="box_body">
<textarea name="" id=""></textarea>
</div>
<div class="box_bottom">
<div class="box_bottom_left">
<span id="sp1">表情</span>
<span id="sp2">图片</span>
<span id="sp3">视频</span>
<span id="sp4">话题</span>
<span id="sp5">长微博</span>
</div>
<div class="box_bottom_right">
<span id="sp6">公开</span>
<input type="button" value="发布" class="bt">
</div>
</div>
</div>
</body>
</html>