摘要：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
&nbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 580px;
height: 200px;
border: 10px solid rgb(238, 170, 170);
margin: 0 auto;
box-shadow: 6px 5px 3px #cccc;
}
.box img{
margin: 8px 0px 0px 6px;
}
.box_right{
float: right;
height: 24px;
margin: 8px 15px 0px 0px;
font-size:15px; color: rgb(131, 122, 122);
}
.box_right b{
font-size: 10px;
}
#text{
height: 110px;
width: 550px;
margin: 0px 12px;
}
.box #foot_1, #foot_2 , #foot_3 ,#foot_4, #foot_5,#foot_6{
float: left;
width: 40px;
height: 20px;
padding-left: 25px;
font-size: 12px;
line-height: 20px;
padding-top:5px;
}
#foot_1{
background: url(/xuexi/static/images/images1/an5.png) no-repeat left center;
}
#foot_2{
background: url(/xuexi/static/images/images1/an4.png) no-repeat left center;
}
#foot_3{
background: url(/xuexi/static/images/images1/an3.png) no-repeat left center;
}
#foot_4{
background: url(/xuexi/static/images/images1/an2.png) no-repeat left center;
}
#foot_5{
background: url(/xuexi/static/images/images1/an1.png) no-repeat left center;
}
#foot_6{
padding-left: 130px;
}
#foot_7{
float: left;
background-color:darkorange;
width: 60px;
height: 25px;
color: aliceblue;
font-weight: bold;
border:none;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="box">
<img src="/xuexi/static/images/images1/12.png" />
<div class="box_right"> 还可以<b>输入</b><span></span><b>字</b></div>
<textarea id="text"></textarea>
<span id="foot_1">表情</span>
<span id="foot_2">图片</span>
<span id="foot_3">视频</span>
<span id="foot_4">话题</span>
<span id="foot_5">长微博</span>
<span id="foot_6">公开</span>
<input type="submit" value="提交" id="foot_7">
</div>
</body>
</html>
//理解和总结：
1、先建立总的div，包含住其他的内容
2、提高代码的通用性，能重复使用的就不单个设置，比如box下的foot_1到foot_6
