微博输入的页面布局
<!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>微博发布</title>
<link rel="stylesheet" href="layui/css/layui.css" type="text/css">
<style>
.text1{width:492px;height:100px;border:2px solic gray;display:block;margin:0px auto;}
.b1 span{float:left;width:52px;}
.layui-icon{font-size:14px;padding-right:2px;font-weight: bold;}
</style>
</head>
<body>
<div class="box" style="width:500px;height:160px;border:4px solid pink;padding:10px;">
<img src="images/12.png" alt="有什么新鲜事想告诉大家？">
<span style="color:#ccc;float:right;">还可以输入<i id="nn"></i>字</span>
<textarea class="text1" ></textarea>
<div class="b1" style="width:492px;height:40px;text-align: center;line-height: 40px;">
<span><i class="layui-icon layui-icon-face-smile" style="color:#ff6500;"></i>表情</span>
<span><i class="layui-icon layui-icon-picture" style="color:lightgreen;"></i>图片</span>
<span><i class="layui-icon layui-icon-video" style="color:lightskyblue;"></i>视频</span>
<span><i class="layui-icon layui-icon-theme" style="color:plum;"></i>话题</span>
<span style="width:75px;"><i class="layui-icon layui-icon-top" style="color:#ff6500;"></i>头条文章</span>
<span><i class="layui-icon layui-icon-more"></i></span>
<span style="padding:0px 10px;">公开<i class="layui-icon layui-icon-down" style="float:none;"></i></span>
<button style="width:80px;height:30px;color:white;background-color: #ff6500;border:none;border-radius:3px;">发布</button>
</div>
</div>
</body>
</html>
图标可以使用自定义图片，这里使用layui中的图标。