微博输入布局小案例

原创 2019-01-07 13:42:46 230
摘要:<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>微博输入字数</title> <style>     body{font-size:14px;} .box{he
<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title>微博输入字数</title>
		<style>
		    body{font-size:14px;}
			.box{height:160px; width:600px; border:10px solid pink;margin:0px auto; padding:10px;}
			img{float:left;}
			.box1{float:left; margin-left:255px; height:24px; width:150px; text-align:right; font-size: 14px; color:#888;}
			#number{font-size:20px; font-weight:bold;}
			#text{height:100px; width:600px; margin-top:5px;}
			.box #cha1,#cha2,#cha3,#cha4,#cha5,#cha6{float:left; width:30px; height:38px; line-height:38px; padding-left:25px;}
			#cha1{background:url(images/an5.png) no-repeat left center}
			#cha2{background:url(images/an4.png) no-repeat left center}
			#cha3{background:url(images/an3.png) no-repeat left center}
			#cha4{background:url(images/an2.png) no-repeat left center}
			#cha5{background:url(images/an1.png) no-repeat left center; width:55px;}
			#cha6{margin-left:155px;}
			div input{float:right; margin-right:20px; margin-top:3px; width:55px; height:30px; border:none; background:#ffc09f; color:#fff; border-radius: 5px;}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="images/12.png">
			<div class="box1">还可以输入<span id="number"></span>字</div>
			<textarea id="text"></textarea>
			<span id="cha1">表情</span>
			<span id="cha2">图片</span>
			<span id="cha3">视频</span>
			<span id="cha4">话题</span>
			<span id="cha5">长微博</span>
			<span id="cha6">公开</span>
			<input type="button" value="发布">
		</div>
	</body>
</html>

QQ截图20190107134215.png

发布手记

热门词条