写一个简单的HTML留言板

时间：2024-03-05 16:56:38

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

 

相关文章