我的微博输入布局_PHP中文网手记

摘要：基本思路：首先创立一个class名为“box”的div盒子模型，让微博布局的模块在此div中呈现。<div class="box"></div> 在css中对此div的样式进行设计。.box{width: 600px;height:

基本思路：

首先创立一个class名为“box”的div盒子模型，让微博布局的模块在此div中呈现。

<div class="box"></div>

在css中对此div的样式进行设计。

.box{width: 600px;height: 160px;margin: 50px auto;border:7px solid #C3C6FF;padding: 10px;border-radius: 7px;}

在此div中，引入img标签设置为微博左上角图片，并在css中使其向左浮动。

<img src="images/12.png">

img{float: left;}

在img标签下，再创立一div盒子模型,给以class名为“box1”内容是微博输入的右上角的字数提示，并在css中给之相应样式。

<div class="box1">还可以输入<span></span>字</div>

.box1{float: left;margin-left: 255px;text-align: right;color: #888;font-size: 14px;}

在下方定义一textarea，给一id名为“text”的标签为文本输入框内容，在css中给之相应样式。

<textarea id="text"></textarea>

#text{width: 600px;height: 100px;border:1px solid #888;margin-top: 5px;}

定义六个a标签代表微博下方，其id名分别为a1~a6，在css中对每一个a标签中引入相关图片，并对其样式进行设计。

		<a href="#" id="a1">表情</a>
		<a href="#" id="a2">图片</a>
		<a href="#" id="a3">视频</a>
		<a href="#" id="a4">话题</a>
		<a href="#" id="a5">长微博</a>
		<a href="#" id="a6">公开</a>

.box #a1,#a2,#a3,#a4,#a5,#a6{float: left;width: 30px;height: 32px;line-height: 32px;padding-left: 26px;}
     #a1{background: url(images/an5.png) no-repeat left center;}
     #a2{background: url(images/an4.png) no-repeat left center;}
     #a3{background: url(images/an3.png) no-repeat left center;}
     #a4{background: url(images/an2.png) no-repeat left center;}
     #a5{background: url(images/an1.png) no-repeat left center;width: 40px;}
     #a6{ margin-left: 158px;margin-right:15px;color: #888; }
body a{text-decoration: none; color: #000;}
	a:hover{color: #888;text-decoration: underline;}

在左下角有微博输入的发布框，使用input标签，其类型为“button”，并给一id为“button”的属性值，在css中进行样式设计。

<input type="button" value="发布" id="button">

#button{float: left;width: 80px;height: 30px;border-radius: 5px;border:none;background:#FFC09F;color: #fff;}

简单的微博输入布局好了之后，就能在HTML页面中显示出来。

注意事项

（1）可以给a标签后面加一伪属性值，使鼠标移到a标签上的时候能有相应效果的实现。

（2）在a5标签之中，其内容是长微博，需要对该标签单独设计，不然可能会挤出该div。

全部代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>微博输入练习</title>
	<style type="text/css">
	body{font-size: 12px;}
	body a{text-decoration: none; color: #000;}
	a:hover{color: #888;text-decoration: underline;}
	.box{width: 600px;height: 160px;margin: 50px auto;border:7px solid #C3C6FF;padding: 10px;border-radius: 7px;}
	img{float: left;}
	.box1{float: left;margin-left: 255px;text-align: right;color: #888;font-size: 14px;}
	#text{width: 600px;height: 100px;border:1px solid #888;margin-top: 5px;}
	.box #a1,#a2,#a3,#a4,#a5,#a6{float: left;width: 30px;height: 32px;line-height: 32px;padding-left: 26px;}
	 #a1{background: url(images/an5.png) no-repeat left center;}
     #a2{background: url(images/an4.png) no-repeat left center;}
     #a3{background: url(images/an3.png) no-repeat left center;}
     #a4{background: url(images/an2.png) no-repeat left center;}
     #a5{background: url(images/an1.png) no-repeat left center;width: 40px;}
     #a6{ margin-left: 158px;margin-right:15px;color: #888; }
	 #button{float: left;width: 80px;height: 30px;border-radius: 5px;border:none;background:#FFC09F;color: #fff;}
	</style>
</head>
<body>
	<div class="box">
		<img src="images/12.png">
		<div class="box1">还可以输入<span></span>字
		</div>
		<textarea id="text">
		</textarea>
		<a href="#" id="a1">表情</a>
		<a href="#" id="a2">图片</a>
		<a href="#" id="a3">视频</a>
		<a href="#" id="a4">话题</a>
		<a href="#" id="a5">长微博</a>
		<a href="#" id="a6">公开</a>
		<input type="button" value="发布" id="button">
	</div>
</body>
</html>

END

我的微博输入布局

热门词条