留言板介面
留言板介面程式碼(HTML)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>留言板</title>
<style>
#title {
background-color: #E1E1E1;
width: 960px;
height: 200px;
display: block;
margin: auto;
}
#type {
background-color: #808080;
width: 960px;
height: 40px;
display: block;
margin: auto;
}
#content {
width: 960px;
height: 680px;
margin: auto;
}
#footer {
background-color: #808080;
width: 960px;
height: 200px;
margin: auto;
}
#LContent {
background-image: url(灰色.jpg);
background-color: #c6c6c6;
width: 50%;
height: 680px;
float: left;
}
#myMessage {
background-image: url(灰色.jpg);
background-color: #c6c6c6;
width: 50%;
height: 680px;
float: left;
}
#LContent h4 {
margin-left: 10px;
}
#LContent a {
text-decoration: none;
}
#LContent.active {
}
.clearFloat {
clear: both;
}
#MyBlog {
position: fixed; /*固定在網頁上不隨卷軸移動，若要隨卷軸移動用absolute*/
top: 50%; /*設置垂直位置*/
right: -50px; /*設置水平位置，依所放的內容多寡需要自行手動調整*/
background: #c6c6c6; /*背景顏色*/
padding: 10px 10px;
border-radius: 100px; /*圓角*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 90px;
height:40px;
}
#MyBlog:hover { /*當滑鼠移至此區塊時，伸縮區塊*/
right:-20px;
width: 270px;
height: 40px;
}
#MyBlog #title {
padding-right: 5px; /*讓標題與連結中間有空隙*/
height: 40px;
width: 450px;
}
</style>
<style type="text/css">
<!--
.myTable {
border: 1px solid white;
width: 430px;
font-size: 12px;
background-color:#c6c6c6;
}
.myTitleTr{
background-color:black;
font-weight:bold;
color:white ;
}
-->
</style>
</head >
<body background="灰磚.jpg">
<div id="title">
<img src="留言板2.jpg" alt="留言板" height="200" width="960" style="display:block; margin:auto;" />
</div>
<div id="type">
<table border="0" style="height:40px;width:960px">
<tr>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="主頁.html" style="text-decoration:none;color:white">個人簡介</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="課表改.html" style="text-decoration:none;color:white">個人課表</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="最愛音樂.html" style="text-decoration:none;color:white">最愛音樂</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="最愛遊戲.html" style="text-decoration:none;color:white">最愛遊戲</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px" bgcolor="black"><a href="留言板改.html" style="text-decoration:none;color:white">留言板</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="計算機改.html" style="text-decoration:none;color:white">計算機</a></th>
</tr>
</table>
</div>
<div id="content">
<div id="LContent">
<br><br><br><br><br><br><br>
<center>
<form>
<table>
<tr>
<td width="316">
<p style="color:black;font-family:微軟正黑體;text-align:center;"> 姓名：<input type="text" id="myTitle" size="20" /></p>
</td>
</tr>
<tr>
<td colspan="2">
<p style="color:black;font-family:微軟正黑體;text-align:center;">留言內容：</p><textarea id="myContent" cols="50" rows="15"></textarea>
</td>
</tr>
</table>
<tr>
<td width="55">
<input name="button" type="button" onClick="mySubmit();" value="留言"style=" font-family:微軟正黑體" />
<input type="reset" value="清除" style="font-family:微軟正黑體" id='reset' onClick="reset()" />
</td>
</tr>
</form>
</center>
</div>
<div>
<center>
<div id="myMessage" style="overflow:scroll;">
</div>
</center>
</div>
<div id="MyBlog">
<span id="title">
<a href="主頁.html"><img src="個人.jpg" alt="個人介紹" height="40" width="40" /></a>
<a href="課表改.html"><img src="學校.jpg" alt="課表" height="40" width="40" /></a>
<a href="最愛音樂.html"><img src="音樂.jpg" alt="音樂" height="40" width="40" /></a>
<a href="最愛遊戲.html"><img src="遊戲.jpg" alt="遊戲" height="40" width="40" /></a>
<a href="留言板改.html"><img src="留言.jpg" alt="留言板" height="40" width="40" /></a>
<a href="計算機改.html"><img src="小計算機.jpg" alt="計算機" height="40" width="40" /></a>
</span>
</div>
<center>
<div id="footer">
<img src="留言板.jpg" alt="留言板" height="200" width="960" style="display:block;background-repeat:repeat-x;" />
</div>
</center>
</div>
</body>
</html>
留言板程式碼(JavaScript)
<script>
function mySubmit() {
var myMessage = document.getElementById("myMessage");
var mybr = document.createElement("br");
var myTable = document.createElement("table");
myTable.className = "myTable";
var myTitleTr = myTable.insertRow(-1);
myTitleTr.className = "myTitleTr";
var myTitleTd = myTitleTr.insertCell(-1);
myTitleTd.innerHTML = document.getElementById("myTitle").value;
var myContentTr = myTable.insertRow(-1);
var myContentTd = myContentTr.insertCell(-1);
myContentTd.innerHTML = document.getElementById("myContent").value; document.getElementById("myTitle").value = "";
document.getElementById("myContent").value = "";
myMessage.appendChild(mybr);
myMessage.appendChild(myTable);
}
</script>
留言板執行結果
留言板程式碼參考
http://blog.163.com/erzulian90@126/blog/static/833910742010575150908
返回目錄