html基础作业仿微博输入框
一叶之秋2019-02-14 14:35:09257<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微博作业</title>
<style>
*{margin: 0;padding: 0}
.clear{clear: both;}
a{text-decoration: none;color: black;font-size: 15px;}
.box{width: 700px;height: 168px;margin: 10px auto;border: 1px solid red;}
.top{width: 700px;height: 35px;line-height: 35px;position: relative;}
.top_left{float: left;margin-left: 8px;}
.top_left img{width: 245px;height: 30px;position: absolute;top: 5px;}
.top_right{float: right;margin-right: 8px;}
.content{width: 700px;height: 75px;}
.content textarea{width: 680px;height: 75px;margin: 0 auto;display: block;border: 1px solid black;}
.down{width: 700px;height: 52px; line-height: 52px;}
.down_left{float: left;margin-right: 8px;}
.down_left span{padding-left: 23px;}
.down_right{float: right;margin-left: 18px;}
.down_right input{width: 88px;height: 32px;border: none;background: orange;margin-right: 8px;border-radius: 5px;font-size: 15px;}
#d1{background: url(image/2.png)no-repeat left center;}
#d2{background: url(image/3.png)no-repeat left center;}
#d3{background: url(image/4.png)no-repeat left center;}
#d4{background: url(image/5.png)no-repeat left center;}
#d5{background: url(image/6.png)no-repeat left center;}
#d6{background: url(image/7.png)no-repeat left center;}
</style>
</head>
<body>
<div>
<div>
<div>
<img src="image/1.png" alt="有什么新鲜事想告诉大家？">
</div>
<div>
<div>还可以输入字</div>
</div>
</div><div></div>
<div>
<textarea id="text" ></textarea>
</div>
<div>
<div>
<span id="d1"><a href="#">表情</a></span>
<span id="d2"><a href="#">图片</a></span>
<span id="d3"><a href="#">视频</a></span>
<span id="d4"><a href="#">话题</a></span>
<span id="d5"><a href="#">头条文章</a></span>
<span id="d6"><a href="#">···</a></span>
</div>
<div>
<span id="d7"><a href="#">公开</a></span>
<input type="button" value="发布">
</div>
</div>
</div>
</body>
</html>