最近有点懒，没码什么字，防止遗忘，从头开始码，写一个简单的HTML留言板。包含两个文件，book.html还有style.css，放在同一目录下。
book.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>实战留言板</title> 6 <link rel="stylesheet" type="text/css" href='style.css' /> 7 </head> 8 <body> 9 <h1 align="center">码夫破石防遗忘写的一个简单的留言板</h1> 10 <h6 align="center">纯HTML，没有任何脚本</h6> 11 <div class='main'> 12 <!-- BOF 发表留言 --> 13 <div class='add'> 14 <textarea class='content' cols='50' rows='5'></textarea> 15 <br/> 16 <input class='user' type='text' /> 17 <input class='btn' type='submit' value="提交" /> 18 </div> 19 <!-- EOF 发表留言 --> 20 21 <!-- BOF 查看留言 --> 22 <div class='msg'> 23 <div class='info'> 24 <span class='user'>留言人</span> 25 <span class='time'>留言时间：2020-05-22 15:23:23</span> 26 </div> 27 <div class='content'> 28 留言内容，留言内容，留言内容，留言内容，留言内容，留言内容，留言内容。 29 </div> 30 </div> 31 <div class='msg'> 32 <div class='info'> 33 <span class='user'>留言人</span> 34 <span class='time'>留言时间：2020-05-22 15:23:23</span> 35 </div> 36 <div class='content'> 37 留言内容，留言内容，留言内容，留言内容，留言内容，留言内容，留言内容。 38 </div> 39 </div> 40 <div class='msg'> 41 <div class='info'> 42 <span class='user'>留言人</span> 43 <span class='time'>留言时间：2020-05-22 15:23:23</span> 44 </div> 45 <div class='content'> 46 留言内容，留言内容，留言内容，留言内容，留言内容，留言内容，留言内容。 47 </div> 48 </div> 49 <div class='msg'> 50 <div class='info'> 51 <span class='user'>留言人</span> 52 <span class='time'>留言时间：2020-05-22 15:23:23</span> 53 </div> 54 <div class='content'> 55 留言内容，留言内容，留言内容，留言内容，留言内容，留言内容，留言内容。 56 </div> 57 </div> 58 <div class='msg'> 59 <div class='info'> 60 <span class='user'>留言人</span> 61 <span class='time'>留言时间：2020-05-22 15:23:23</span> 62 </div> 63 <div class='content'> 64 留言内容，留言内容，留言内容，留言内容，留言内容，留言内容，留言内容。 65 </div> 66 </div> 67 <div class='msg'> 68 <div class='info'> 69 <span class='user'>留言人</span> 70 <span class='time'>留言时间：2020-05-22 15:23:23</span> 71 </div> 72 <div class='content'> 73 留言内容，留言内容，留言内容，留言内容，留言内容，留言内容，留言内容。 74 </div> 75 </div> 76 <div class='msg'> 77 <div class='info'> 78 <span class='user'>留言人</span> 79 <span class='time'>留言时间：2020-05-22 15:23:23</span> 80 </div> 81 <div class='content'> 82 留言内容，留言内容，留言内容，留言内容，留言内容，留言内容，留言内容。 83 </div> 84 </div> 85 <div class='msg'> 86 <div class='info'> 87 <span class='user'>留言人</span> 88 <span class='time'>留言时间：2020-05-22 15:23:23</span> 89 </div> 90 <div class='content'> 91 留言内容，留言内容，留言内容，留言内容，留言内容，留言内容，留言内容。 92 </div> 93 </div> 94 <!-- EOF 查看留言 --> 95 </div> 96 </body> 97 </html>
style.css，源码如下：
1 /* 定义主div，宽度为800像素，居中显示 */ 2 .main{ 3 width:800px; 4 margin: 0px auto; 5 } 6 7 /* 定义发表留言区域 */ 8 .add{ 9 overflow: hidden; /* 清除浮动带来的影响 */ 10 } 11 .add .content{ 12 width: 100%; 13 } 14 .add .user{ 15 float: left; 16 } 17 .add .btn{ 18 float: right; 19 } 20 21 /* 定义查看留言区域的样式 */ 22 .msg{ 23 background: #ccc; 24 margin: 5px 0px 5px 0px; 25 } 26 .msg .info{ 27 overflow: hidden; 28 } 29 .msg .info .user{ 30 float: left; 31 color: green; 32 margin: 5px 0 0 2px; 33 } 34 .msg .info .time{ 35 float: right; 36 color: blue; 37 margin: 5px 2px 0 0; 38 } 39 .msg .content{ 40 width: 100%; 41 margin: 5px 0 5px 0px; 42 padding: 0 0 5px 0; 43 }