abstract：总结： 都是之前学过的css+html，基本已经完成布局，so easy！<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport&quo
总结： 都是之前学过的css+html，基本已经完成布局，so easy！
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Document</title>
<style type="text/css">
body{font-size: 14px;}
.box{width: 600px;height: 200px;border:8px solid hotpink;margin: 0px auto;padding: 10px;}
img{width:200px;height:24px;float:left;}
.box1{float:left;margin-left: 260px}
.text{width: 590px;height: 120px;border:1px solid green;margin:10px 3px;}
#sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float:left;margin-left: 10px;}
button{margin-left: 2px;border: none;border: 1px solid #000;border-radius: 5px;}
#sp6{margin-left: 140px;}
</style>
</head>
<body>
<div>
<img src="/images/1.jpg " alt="">
<div>还可以输入<span id="sp">字</span></div>
<textarea></textarea>
<span id="sp1" ><i class="fa fa-frown-o"></i> 表情</span>
<span id="sp2" ><i class="fa fa-image"></i> 图片</span>
<span id="sp3"><i class="fa fa-video-camera"></i> 视频</span>
<span id="sp4"><i class="fa fa-hashtag"></i> 话题</span>
<span id="sp5"><i class="fa fa-list-alt"></i> 长微博</span>
<span id="sp6">公开<i class="fa fa-angle-down"></i><button>发布</button></span>
</div>
</body>
</html>