摘要：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,&
<!DOCTYPE html>
<html>
<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>
<style>
body{font-size: 12px;}
/* 以下BOX盒子宽600px,高160px，外边框10px直线粉，padding内边10px让子级和父级的有个内边距的间隙10px */
.box{width: 600px;height: 160px;border:10px solid pink; padding:10px; margin:0 auto;}
/* 以下是BOX盒子内的图片靠左浮动 */
.box img{float: left;}
/* 以下是BOX盒子内的右侧文字区域，可显示计算输入框的字符串输入的数量 */
.box_right{width: 595px;height:24px;text-align:right;font-size:14px;line-height: 25px;color:#888;}
/*以下box下的 text 文本域 */
#text{width: 600px;height: 100px;}
/* 以下设置多个span标签给相应的图片背景，宽30高32行高32全部左浮动设置padding-left为26px目的让span背景图片与文字调整合适的距离 */
#ipc1,#ipc2,#ipc3,#ipc4,#ipc5,#ipc6{width: 30px;height: 32px;line-height: 32px;float: left;padding-left:26px;}
/* 以下设置图标背景 no-repeat不平铺 left左靠齐 center居中显示 */
#ipc1{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an5.png') no-repeat left center;}
#ipc2{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an4.png') no-repeat left center;}
#ipc3{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an3.png') no-repeat left center;}
#ipc4{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an2.png') no-repeat left center;}
#ipc5{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an1.png') no-repeat left center;width:45px;}
/* 以下这是 “公开”文字距离设置让他与左侧的图片设置间距右侧设了右外边距15px */
#ipc6{margin-left:158px;margin-right:15px;}
/* 以下这是发表按钮的样式，设置背景色，文字颜色，去除按钮默认border边框， 设置宽70px高30px，圆角边框5px*/
#publish{background:#ffc09f;color:#fff; width:70px;height: 30px;border:0;border-radius:5px;}
</style>
</head>
<body>
<div>
<img src="https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/12.png">
<div>还可以输入<span id="number"></span>字</div>
<textarea id="text"></textarea>
<span id="ipc1">表情</span>
<span id="ipc2">图片</span>
<span id="ipc3">视频</span>
<span id="ipc4">话题</span>
<span id="ipc5">长微博</span>
<span id="ipc6">公开</span>
<input id="publish" type="button" value="发表">
</div>
</body>
</html>
