**問題：**
今天想寫點前端布局方面的小東東，來來，咱們來整個小的留言板吧，如果是你你會怎么寫呢？先去抄個效果圖
**解決方案：**
**1）html代碼部分如下**
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入css樣式-->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="container">
<form>
<h2>來 , 說說你在做什么 , 想什么</h2>
<div>
<input id="userName" class="f-text" value="" />
<p id="face"><img src="img/face1.gif" class="current" /><img src="img/face2.gif" /><img src="img/face3.gif" /><img src="img/face4.gif" /><img src="img/face5.gif" /><img src="img/face6.gif" /><img src="img/face7.gif" /><img src="img/face8.gif" /></p>
</div>
<div><textarea id="conBox" class="f-text"></textarea></div>
<div class="tr">
<p>
<span class="countTxt">還能輸入</span><strong class="maxNum">140</strong><span>個字</span>
<input id="sendBtn" type="button" value="" title="快捷鍵 Ctrl+Enter" />
</p>
</div>
</form>
<div class="list">
<h3><span>大家在說</span></h3>
<ul>
<li>
<div class="userPic"><img src="img/face.gif" /></div>
<div class="content">
<div class="userName"><a href="javascript:;">freecode</a>:</div>
<div class="msgInfo">每天堅持寫一點點代碼，解決一個個小問題，日積月累你會發現，原來堅持下去就可以成為一個牛逼的程序猿！</div>
<div class="times"><span>07月05日 15:14</span><a class="del" href="javascript:;">刪除</a></div>
</div>
</li>
<li>
<div class="userPic"><img src="img/face2.gif" /></div>
<div class="content">
<div class="userName"><a href="javascript:;">設計師</a>:</div>
<div class="msgInfo">不要以為程序猿很牛逼，沒有我們設計師，你們做出來的東西在用戶眼里全都是垃圾，我是設計師，我驕傲！</div>
<div class="times"><span>07月04日 15:05</span><a class="del" href="javascript:;">刪除</a></div>
</div>
</li>
<li>
<div class="userPic"><img src="img/face4.gif" /></div>
<div class="content">
<div class="userName"><a href="javascript:;">IOS攻城獅</a>:</div>
<div class="msgInfo">以后能不能不要總是拿著安卓手機來問我，為什么我的app無法卸載，無法登錄，記住我是ios攻城獅！</div>
<div class="times"><span>07月04日 15:05</span><a class="del" href="javascript:;">刪除</a></div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
~~~
**2）css代碼部分如下**
~~~
body,div,h2,h3,ul,li,p{margin:0;padding:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
ul{list-style-type:none;}
body{color:#333;background:#a7ab8c;font:12px/1.5 \5b8b\4f53;}
#container{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}
#container form h2{font-weight:400;font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;}
#container form{/**background:url(img/boxBG.jpg) repeat-x 0 bottom;**/padding:0 20px 15px;}
#userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff;padding:3px 5px;font:14px/1.5 arial;}
#userName.active,#conBox.active{border:1px solid #7abb2c;}
#userName{height:20px;}
#conBox{width:448px;resize:none;height:65px;overflow:auto;}
#container form div{position:relative;color:#999;margin-top:10px;}
#container img{border-radius:3px;}
#face{position:absolute;top:0;left:172px;}
#face img{width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}
#face img.hover,#face img.current{width:28px;height:28px;border:1px solid #f60;opacity:1;filter:alpha(opacity=100);}
#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png) no-repeat;}
#sendBtn.hover{background-position:0 -30px;}
#container form .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;}
#container .list{padding:10px;}
#container .list h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px solid #dee4e7;}
#container .list h3 span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0 15px;}
#container .list ul{overflow:hidden;zoom:1;}
#container .list ul li{float:left;clear:both;width:100%;border-bottom:1px dashed #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}
#container .list ul li.hover{background:#f5f5f5;}
#container .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px solid #ccc;border-radius:3px;}
#container .list .content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}
#container .list .userName{display:inline;padding-right:5px;}
#container .list .userName a{color:#2b4a78;}
#container .list .msgInfo{display:inline;word-wrap:break-word;}
#container .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}
#container .list .times span{float:left;}
#container .list .times a{float:right;color:#889db6;display:none;}
.tr{overflow:hidden;zoom:1;}
.tr p{float:right;line-height:30px;}
.tr *{float:left;}
~~~
**后續我會把代碼統一匯總發布到git上，有興趣的小伙伴可以從那里下載。**
這就是我今天整的一個留言板，如果是你你會怎么寫呢？歡迎給我提問題，進行思考和交流。
