css练习微博输入作业

原创 2018-11-06 23:24:44 230
摘要:<!DOCTYPE html> <html> <head> <title>微博输入</title> </head> <style type="text/css"> .box{width: 600px; height: 165px; b
<!DOCTYPE html>
<html>
<head>
	<title>微博输入</title>
</head>
<style type="text/css">
.box{width: 600px; height: 165px; background: #fff; border: 1px solid #ccc; border-radius: 3px; margin: 200px auto; }
.new{display: inline-block;height: 30px; line-height: 30px;font-size: 15px; color: #2e9cc7;font-family: "WBswficon"; float: left;margin-left: 10px;}
#text{width: 574px; height: 76px; margin: 0px; box-shadow: 0px 0px 3px rgba(0,0,0,0.15)inset; border-radius: 3px;border: none;}
.textarea{width: 578px; height: 80px;border-radius: 3px;float: left; margin: 10px;border: 1px solid #ccc;}
.pic_1,.pic_2,.pic_3,.pic_4,.pic_5{ width: 47px; height: 30px; line-height: 30px; font-size: 15px; float: left; margin: 0px 0px 0px 10px;     letter-spacing: 1px; }
.pic_1{color: #ffa405;}
.pic_2{color: #84c002;}
.pic_3{color: #32a2d5; }
.pic_4{color: #5a8ce6}
.pic_5{color: #ff8200; width: 75px;}
.text_1{font-size: 10px; color: #636363;}
.nec{ height: 30px; line-height: 30px; float: left; font-size: 11px; color: #636363; margin-left: 135px; }
.next{ width: 65px; height: 25px; background: #ff8d00; border-radius: 3px; float: right; color: #fff;font-size: 10px; line-height: 20px; margin-right: 10px; border: none;}
.pic_6{ line-height: 30px; font-size: 20px; float: left;color: #636363; margin-left: 15px; }
</style>
<body>
<div class="box">
<span class="new">有什么新鲜事想告诉大家?</span>
<div class="textarea">
<textarea id="text">          </textarea>
</div>
<div class="pic_1">☺<span class="text_1">&nbsp;表情</span></div>
<div class="pic_2">✉<span class="text_1">&nbsp;图片</span></div>
<div class="pic_3">♬<span class="text_1">&nbsp;音乐</span></div>
<div class="pic_4">♯<span class="text_1">&nbsp;话题</span></div>
<div class="pic_5">✹<span class="text_1">&nbsp;头条文章</span></div>
<span class="pic_6">···</span>
<span class="nec">公开 &nbsp;<span class="bottom">∨</span></span>
<button type="button" class="next">发布</button>
</div>
</body>
</html>


发布手记

热门词条