写一个简单的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 ...
随机推荐
- 如何修改Docker的默认网段？
背景 公司的服务器全部都是购买的阿里云ECS主机,默认内网网段为172.16.0.0/12,测试服上的服务基本都是使用Docker部署的. 之前的同事在该机器上安装的Docker全部都是默认配置,网段 ...
- 利用反射获取对象中的值等于x的字段
Field[] field = behavior.getClass().getDeclaredFields(); for (int i = 0; i < field.length; i++) { ...
- CentOS 7下安装Docker
安装一些必要的系统工具: sudo yum install -y yum-utils device-mapper-persistent-data lvm2 添加软件源信息: sudo yum-conf ...
- 在 Spring Boot 配置 Kafka 安全认证
spring: kafka: bootstrap-servers: IP:端口 listener: missing-topics-fatal: false properties: sasl: mech ...
- Spring Cloud 学习 (四) Hystrix & Hystrix Dashboard & Turbine
在复杂的分布式系统中,可能有几十个服务相互依赖,这些服务由于某些原因,例如机房的不可靠性.网络服务商的不可靠性等,导致某个服务不可用 . 如果系统不隔离该不可用的服务,可能会导致整个系统不可用.Hys ...
- 从七牛云迁移图片到github
迁移理由 问题是网站的大部分图床都是用的七牛云,官网有改动,所以原测试域名都失效,所以决定进行迁移,将七牛云中的图片迁移到github仓库中. 迁移步骤 Step1:从废弃测试域名空间至可用测试域名空 ...
- PyQt(Python+Qt)学习随笔：模式窗口的windowModality属性与modal属性
windowModality属性 windowModality属性只对窗口对象有效,保存的是哪些类型的窗口被模式窗口阻塞. 模式窗口防止其他窗口中的部件获取输入.此属性的值控制对应窗口可见时阻塞哪些类 ...
- 阿里云服务器搭建Docker版AWVS
本文严重参考该文章:https://www.sqlsec.com/2020/04/awvs.html 阿里云服务器搭建Docker版AWVS,因为之前有使用Docker的经验,所以本文只是简述一下安装 ...
- LeetCode初级算法之字符串：387 字符串中的第一个唯一字符
字符串中的第一个唯一字符 题目地址:https://leetcode-cn.com/problems/first-unique-character-in-a-string/ 给定一个字符串,找到它的第 ...
- P7077 函数调用
我好蠢啊... 考试的时候不会写,现在看了这么多篇题解还是似懂非懂,所以决定写一下草稿... 草稿 和 题解 就是首先,题目保证了函数不会间接的调用其本身,所以可以直接知道这是一个 \(\text{D ...