<style type="text/css"> body { margin:0; padding:0; font-size:12px; line-height:25px; font-family:宋体; } h1,h2,h4,dl,dt,dd { margin:0; padding:0; } img { border:none; } .wrap { 960px; margin:0 auto; } h1 { line-height:60px; font-size:28px; text-align:center; } #header { border-bottom:1px solid #e1e1e1; padding:10px 0; } #main { float:left; 650px; background:#fbfcff; border:1px solid #c3ccd5; } #side { float:right; 295px; background:#f3f8fe; border:1px solid #dee3e9; } #main .top { line-height:28px; padding:5px; background:#fff; border-bottom:1px solid #c3ccd5; } #main .top img { vertical-align:middle; } #main .top span { margin-left:10px; color:#313330; } #main .top span strong { color:#cc0100; padding:0 2px; } #main h2 { margin:0 10px; padding:0 10px; font-size:16px; line-height:35px; border-bottom:1px solid #c3ccd5; } #commentList { margin:0 10px; } #commentList dl { padding:10px; border-bottom:1px dashed #c1c4bd; } #commentList dl dt { color:#8d8d8b; } #commentList dl dt .author { color:#0c3b89; margin:0 5px; } #commentList dl dt .time { float:right; } #commentList dl dd { font-size:14px; } #reply { margin:10px 20px; } #reply h4 { font-size:14px; color:#1e2c5b; line-height:40px; } #reply dl { line-height:34px; } #reply dl dt { float:left; clear:left; 60px; } #reply dl dd span { color:#666; margin:0 10px; } #reply dl dd { margin-left:60px; } #reply dl input, #reply dl textarea { border:1px solid #a3b6d4; margin:6px 0; vertical-align:middle; } #reply dl .input-text { 150px; } #reply dl textarea { 545px; height:80px; overflow:hidden; } #reply dl dd.button { text-align:right; } #reply dl dd.button input { background:url(images/button_save.gif); 82px; height:23px; border:none; color:#fff; cursor:pointer; } #reply dl dd.button .btnover { background:url(images/button_save_over.gif); } </style> <script type="text/javascript"> function CommentSave() { var commentList = document.getElementById("commentList"); var nick = document.getElementById("nick"); var content = document.getElementById("content"); if(nick.value == "" || content.value == "") return false; // 创建基本标签 var _dl = document.createElement("dl"); var _dt = document.createElement("dt"); var _dd = document.createElement("dd"); var _span = document.createElement("span"); // 创建当前时间标签 var _span_time = _span.cloneNode(); _span_time.className = "time"; _span_time.appendChild(document.createTextNode(getTimeString())); // 创建评论作者标签 _span_author = _span.cloneNode(); _span_author.className = "author"; _span_author.appendChild(document.createTextNode(nick.value)); // 将标签及文字附加到dt、dd内 _dt.appendChild(_span_time); _dt.appendChild(document.createTextNode("腾讯网友")); _dt.appendChild(_span_author); _dd.appendChild(document.createTextNode(content.value)); // 将dt、dd添加到dl _dl.appendChild(_dt); _dl.appendChild(_dd); // 将dl添加到list commentList.appendChild(_dl); // 清空原内容 nick.value = ""; content.value = ""; // 更改评论条数 var num = parseInt(document.getElementById("commentNum").innerHTML); num++; document.getElementById("commentNum").innerHTML = num; } function getTimeString() { // 取得当前时间 var now = new Date(); return now.getYear() + "年" + (now.getMonth() + 1) + "月" + (now.getDate() + 1) + "日 " + (now.getHours() + 1) + ":" + (now.getMinutes() + 1) + ":" + (now.getSeconds() + 1); } </script> </head> <body> <div id="header"> <div class="wrap"> <img src="images/logo.gif" /> </div> </div> <h1>王琳：“公务员热”背后的正常与不正常</h1> <div class="wrap"> <div id="main"> <div class="top"> <a href="#comment"><img src="images/button_comment.gif" /></a><span>（评论<strong id="commentNum">1</strong>条）</span> </div> <h2>最新评论</h2> <div id="commentList"> <dl> <dt> <span class="time">2010年11月5日 19:26:11</span> 腾讯网友<span class="author">杨二郎</span> </dt> <dd>公务员好啊，可以为人民服务。</dd> </dl> </div> <a name="comment"></a> <div id="reply"> <h4>发表评论</h4> <dl> <dt>昵 称：</dt> <dd><input id="nick" class="input-text" type="text" /><span>文明上网，理性发言</span></dd> <dt>评论内容：</dt> <dd><textarea id="content"></textarea></dd> <dt></dt> <dd class="button"><input type="button" value="发表评论" onclick="CommentSave()" onmouseover="this.className='btnover'" onmouseout="this.className=''" /></dd> </dl> </div> </div> <div id="side"> </div> </div> </body>