摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css"> body{font-size: 12px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{font-size: 12px;}
.box{width: 600px;height: 180px;border:10px solid pink;margin: 20px auto;padding: 10px;}
.header{width: 100%;height: 40px;line-height: 40px;}
.header_l{float: left;color: #27A8E0;font-size: 14px;}
.header_r{float: right;font-size: 14px;color: #ccc;}
.header_r span{font-size: 16px;font-weight: bold;}
#text{width: 100%;height: 100px;border: 1px solid #888;margin-top: 5px;}
.box #bottom1,#bottom2,#bottom3,#bottom4,#bottom5,#bottom6{float: left;width:45px;height: 32px;line-height: 32px;padding-left: 26px;position: relative;}
#bottom1 img{width: 20px;height: 20px;position: absolute;top:6px;left: 5px;border-radius: 50%;}
#bottom2 img{width: 20px;height: 20px;position: absolute;top:6px;left: 5px;}
#bottom3 img{width: 20px;height: 20px;position: absolute;top:6px;left: 5px;}
#bottom4 img{width: 20px;height: 20px;position: absolute;top:6px;left: 5px;}
#bottom5 img{width: 20px;height: 20px;position: absolute;top:6px;left: 5px;}
#bottom6{margin-left: 60px;margin-right: 15px;color: #888;}
#btn{float: left;width: 80px;height: 30px;background: #FFF766;color: #fff;border:none;border-radius: 5px;}
</style>
</head>
<body>
<div class="box">
<div class="header">
<div class="header_l">有什么新鲜事告诉大家</div>
<div class="header_r"
>还可以输入<span id="number">120</span>字</div>
</div>
<textarea id="text"></textarea>
<span id="bottom1"><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=047b418c923df8dcb93d8991fd1072bf/aec379310a55b3199f70cd0e4ea98226cffc173b.jpg">表情</span>
<span id="bottom2"><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=047b418c923df8dcb93d8991fd1072bf/aec379310a55b3199f70cd0e4ea98226cffc173b.jpg">图片</span>
<span id="bottom3"><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=047b418c923df8dcb93d8991fd1072bf/aec379310a55b3199f70cd0e4ea98226cffc173b.jpg">视频</span>
<span id="bottom4"><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=047b418c923df8dcb93d8991fd1072bf/aec379310a55b3199f70cd0e4ea98226cffc173b.jpg">话题</span>
<span id="bottom5"><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=047b418c923df8dcb93d8991fd1072bf/aec379310a55b3199f70cd0e4ea98226cffc173b.jpg">长微博</span>
<span id="bottom6">公开</span>
<input type="button" value="发布" id="btn">
</div>
</body>
</html>
<!-- 直接复制粘贴到提交作业的输入框class属性会被过滤 -->
