写一个简单的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 ...
随机推荐
- CoProcessFunction实战三部曲之一：基本功能
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- 获取Win和Linux系统启动时间，类似uptime功能，用于判断是否修改过系统时间
目录 前言 测试代码 Win测试 Linux测试 总结 前言 有时候需要判断系统是否有修改过时间,最简单的方法就是获取当前时间A,然后sleep X秒,然后获取 时间B,如果 时间B - 时间A ≠ ...
- uni-app p-table下时间转换的问题
问题描述: 从后台获取时间戳,转成日期格式,出现NaN的问题 uni的p-table插件 解决思路
- 「考试」noip模拟9,11,13
9.1 辣鸡 可以把答案分成 每个矩形内部连线 和 矩形之间的连线 两部分 前半部分即为\(2(w-1)(h-1)\),后半部分可以模拟求(就是讨论四种相邻的情况) 如果\(n^2\)选择暴力模拟是有 ...
- JQuery 和 Bootstrap
https://jquery.com/ 1. JQuery 的基础语法 $(select).action() 2. 查找标签 基本选择器 class选择器: $(".className&q ...
- fist-第七天冲刺随笔
这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/2018SE1 这个作业要求在哪里 https://edu.cnblogs.com/campus/fz ...
- sitespeedio前端性能测试工具介绍
很久没有写博客了,今天给大家介绍一款比较好用的前端性能测试工具. sitespeedio简介: sitespeed.io是Jonathan Lee发布的一款可监视和衡量网站前端性能的开源工具. 1.开 ...
- PyQt（Python+Qt）学习随笔：使用实例方法赋值方式捕获事件
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 在<第15.17节 PyQt(Python+ ...
- 第10.3节 Python导入模块能否取消导入？
模块导入后,是否可以取消导入?实际上当模块导入后,是无法逆向还原到导入前的状态的,但是可以利用"del 模块名"进行导入模块的删除,此时的删除只是删除了导入模块对应的模块变量名,删 ...
- PyQt(Python+Qt)实现的GUI图形界面应用程序的事件捕获方法大全及对比分析
一. 概述 PyQt的图形界面应用中,事件处理类似于Windows系统的消息处理.一个带图形界面的应用程序启动后,事件处理就是应用的主循环,事件处理负责接收事件.分发事件.接收应用处理事件的返回结果, ...