写一个简单的HTML留言板
最近有点懒，没码什么字，防止遗忘，从头开始码，写一个简单的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 }
写一个简单的HTML留言板的更多相关文章
- 手把手教你从零写一个简单的 VUE--模板篇
教程目录1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 Hello,我又回来了,上一次的文章教会了大家如何书写一个简单 VUE,里面实现了VUE 的数据驱动视图 ...
- Java写一个简单学生管理系统
其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swing来 ...
- 利用SpringBoot+Logback手写一个简单的链路追踪
目录 一.实现原理 二.代码实战 三.测试 最近线上排查问题时候,发现请求太多导致日志错综复杂,没办法把用户在一次或多次请求的日志关联在一起,所以就利用SpringBoot+Logback手写了一个简 ...
- 手把手教你从零写一个简单的 VUE
本系列是一个教程,下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 今天给大家带来的是实现一个简单的类似 VUE 一样的前端框架,VUE 框架现在应 ...
- 用Python写一个简单的Web框架
一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...
- 如何写一个简单的http服务器
最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...
- 如何写一个简单的shell
如何写一个简单的shell 看完<UNIX环境高级编程>后我就一直想写一个简单的shell来作为练习,因为有事断断续续的写了好几个月,如今写了差不多来总结一下. 源代码放在了Github: ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 一步一步写一个简单通用的makefile(三)
上一篇一步一步写一个简单通用的makefile(二) 里面的makefile 实现对通用的代码进行编译,这一章我将会对上一次的makefile 进行进一步的优化. 优化后的makefile: #Hel ...
随机推荐
- 工作中使用RabbitMQ
写一个基类 1 <?php 2 3 namespace BI\Service\RabbitMQJob; 4 5 use AMQPConnection; 6 use AMQPChannel; 7 ...
- Spring Boot第一天
1.首先在idea中创建一个maven项目,创建成功后在pom.xml中添加SpringBoot相关的依赖 <!--引入SpringBoot相关的依赖--> <parent> ...
- Codeforces Round #670 (Div. 2) D. Three Sequences 题解(差分+思维+构造)
题目链接 题目大意 给你一个长为n的数组a,要你构造一个非严格单调上升的数组b和一个非严格单调下降的数组c,使得\(b_i+c_i=a_i\) 要你使这两个数组b,c中最大的元素最小,还有q次修改(q ...
- Java蓝桥杯练习——杨辉三角形
问题描述: 杨辉三角形又称Pascal三角形,它的第i+1行是(a+b)i的展开式的系数. 它的一个重要性质是:三角形中的每个数字等于它两肩上的数字相加. 下面给出了杨辉三角形的前4行: 1 1 1 ...
- D. Numbers on Tree（构造）【CF 1287】
传送门 思路: 我们需要抓住唯一的重要信息点"ci",我的做法也是在猜想和尝试中得出的,之后再验证算法的正确性. 我们在构造中发现,如果树上出现了相同的数字,则会让树的构造变得不清 ...
- linux系统下oracle表空间占用情况
1.我们先查询表空间的占用情况,使用sql如下: select upper(f.tablespace_name) "表空间名", d.tot_grootte_mb "表空 ...
- Why系统：0.1 + 0.2 != 0.3
为了知道更多一点,打算自己来一个why系列. 面试官:同学, 请问 0.1 + 0.2 等于多少 同学:不等于0.3, 因为精度问题 面试官:能更深入的说一下嘛 同学:...... 上面的同学,就是曾 ...
- go语言之---数组(array)和切片(slice)
一.数组 1.什么是数组? 1.数组是一系列同一类型数据的集合 2.数组中包含的每个数据被称为数组元素 3.一个数组中包含的元素个数成为数组长度 4.数组的长度是固定的 5.一个数组可以由零个或者多个 ...
- python核心高级学习总结7---------正则表达式
正则表达式在爬虫项目中应用很广泛,主要方面就是在字符串处理方面,经常会涉及到字符串格式的校验,用起来经常要查看文档才能完成,所以抽了个时间将正则的内容复习了一下. Start re---导入re模块使 ...
- 通过Apache Hudi和Alluxio建设高性能数据湖
T3出行的杨华和张永旭描述了他们数据湖架构的发展.该架构使用了众多开源技术,包括Apache Hudi和Alluxio.在本文中,您将看到我们如何使用Hudi和Alluxio将数据摄取时间缩短一半.此 ...