????：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!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>微博發(fā)布</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;">發(fā)布</button>
</div>
</div>
</body>
</html>
圖標(biāo)可以使用自定義圖片，這里使用layui中的圖標(biāo)。