写一个简单的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 ...
随机推荐
- php 缩略图封装的方法
/** * PHP生成缩略图 * @param $basepath /原文件地址 * @param $des_w /缩略图的宽 * @param $des_h /缩略图的高 * @param $sty ...
- Invalid operation updata 错误解决方法
错误: huny@DESKTOP-N1EBKQP:/mnt/c/Users/Administrator$ sudo apt-get updata E: Invalid operation updata ...
- HHKB Programming Contest 2020 D - Squares 题解(思维)
题目链接 题目大意 给你一个边长为n的正方形和边长为a和b的正方形,要求把边长为a和b的正方形放在长度为n的正方形内,且没有覆盖(可以相邻)求有多少种放法(mod 1e9+7) 题目思路 这个思路不是 ...
- Java基础教程——模拟浏览器发送请求
JAVA访问网页 分别测试使用get和post方法访问网页,可以收到服务器的请求,并写入到html文件中. import java.io.*; import java.net.*; import ja ...
- Appium之测试微信小程序
坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:Oschina.云+社区.知乎等各大平台都有. 目录 一.往期回顾 二.测试微信小程序 1.准备工作 2.操作步骤 3.注意 4.强制设置安卓的进程 ...
- 使用KVM的API编写一个简易的AArch64虚拟机
参考资料: Linux虚拟化KVM-Qemu分析(一) Linux虚拟化KVM-Qemu分析(二)之ARMv8虚拟化 Linux虚拟化KVM-Qemu分析(三)之KVM源码(1) Linux虚拟化KV ...
- Spring Boot 自带缓存及结合 Redis 使用
本文测试环境: Spring Boot 2.1.4.RELEASE + Redis 5.0.4 + CentOS 7 自带缓存 如果没有使用缓存中间件,Spring Boot 会使用默认的缓存,我们只 ...
- 什么是Python生成器？与迭代器的关系是什么？
生成器是一个特殊的迭代器,它保存的是算法,每次调用next()或send()就计算出下一个元素的值,直到计算出最后一个元素,没有更多的元素时,抛出StopIteration.生成器有两种类型,一种是生 ...
- 第四十章、PyQt显示部件：QGraphicsView图形视图和QGraphicsScene图形场景简介及应用案例
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.概述 Designer中的Graphics V ...
- PyCharm中怎么将非当前工程文件的目录的文件加到当前工程中
在PyCharm已经建立工程文件的情况下,如果要将一个其他目录的文件导入到已有的工程中,唯一的方法如下: 通过File->Settings->Project->Project Str ...