最近有点懒，没码什么字，防止遗忘，从头开始码，写一个简单的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 }