如题所述
自学自强，不懂就问，但不能太依赖对方哦，有时自己解决问题才是真正学到东西的，^.^
不废话，css代码：
<style>.Gavin_Design ,.gd div{margin:0 auto; overflow:hidden; height:auto; background-color:transparent; color:#333;}
.gd{width:1000px;}
.gd input ,.gd textarea{margin:0; padding:0; background:none; border:none; font-size:14px; resize:none; outline:0;}
.gd .part{padding:15px 0;}
.gd .textarea{height:90px; border:1px solid #ddd; -webkit-box-shadow:inset 0 3px 2px rgba(0,0,0,.05); -moz-box-shadow:inset 0 3px 2px rgba(0,0,0,.05); box-shadow:inset 0 3px 2px rgba(0,0,0,.05); background:#fff; padding:10px;}
.gd .textarea textarea{width:100%; height:90px; overflow:hidden; overflow-y:auto;}
.gd .bottom_contorl{margin-top:15px;}
.gd .bottom_contorl .express{float:left; height:32px; line-height:32px; padding-left:10px;}
.gd .bottom_contorl .button{float:right; width:320px; height:32px; text-align:center; font-size:0;}
.bottom_contorl .button input{height:32px; width:150px; margin-left:10px; color:#fff; cursor:pointer;}
.bottom_contorl .button input.submit{background:#4779be;}
.bottom_contorl .button input.submit:active{background:#3c6eb4;}
.bottom_contorl .button input.cancel{background:#b5b5b5;}
.bottom_contorl .button input.cancel:active{background:#a9a9a9;}
.gd .part .init{width:100%; border-collapse:collapse; color:#333;}
.gd .part td{border-bottom:1px solid #e5e5e5; height:60px; padding:2%; vertical-align:middle;}
.gd .part .user{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; width:60px;}
.gd .part .me{color:#666;}
.gd .part .reply{color:#22627d;}
.gd .part .comments{font-size:14px;}
</style>
html结构代码（div+css）：
<div class="part">
<div class="textarea">
<textarea placeholder="你有什么好的建议请留言"></textarea>
</div>
<div class="bottom_contorl">
<div class="express">表情</div>
<div class="button">
<input type="button" class="submit" value="提交">
<input type="button" class="cancel" value="取消">
</div>
</div>
</div>
<div class="part">
<table cellpadding="0" cellspacing="0" class="init">
<tr>
<td width="10%"><div class="user me">我</div></td>
<td width="90%" class="comments">老师你好，周末快乐！</td>
</tr>
<tr>
<td><div class="user reply">秋叶，很长的名字</div></td>
<td class="comments">下午好，秋荷！</td>
</tr>
<tr>
<td width="10%"><div class="user me">我</div></td>
<td width="90%" class="comments">好长不想打字，好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字。</td>
</tr>
<tr>
<td><div class="user reply">秋叶，很长的名字</div></td>
<td class="comments"><b>亲爱的。。。好长不想打字，好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字</b></td>
</tr>
</table>
</div>
</div>
希望能帮助到你^.^
温馨提示：答案为网友推荐，仅供参考
第1个回答 2014-07-29
一般来说，只有最上面的text是表单，下面是用<div>或者<table>组成的。
html很简单我就不写了……
css的话
.thisForm{display: block;
height:自己设置;
width:自己设置;
pading:6px 12px;
line-height: 1.42857143;
border-top-color: rgb(204, 204, 204);
border-top-style: solid;
border-top-width: 1px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
margin:0px;
}
不知道点击效果不好加transition
border-color ease-in-out .15s,box-shadow ease-in-out .15s
这个蛮漂亮的可以试试。
下面的div分成3栏就好了，在父层加border-botton。
float:left;来左浮动，让三个变成一行，记得父层加入 clear-fix来清除浮动。
基本就这样，字体设置一下全局。
按钮用图片做成background-image:url();就行了
希望有帮到你…喵……
第2个回答 2014-07-29
你可以右键查看那个网页的源代码，我直接写给你也没什么用追问
没有网页源代码，这是做好的jpg图片
第3个回答 2014-07-29
如果你只是做页面，so easy，如果你要实现功能，估计有点麻烦，html解决不了
