当前位置： 首页 > news >正文

【简单的留言墙】HTML+CSS+JavaScript

news 2026/1/9 16:21:44

                                                           目标：做一个简单的留言墙

                                        

1.首先我们用HTML的一些标签，初步构造区域 样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>留言墙</title><style>/* ...... */ <style>
</head>
<body><h1>留言墙</h1><p>输入内容后，点击提交即可</p><div><span>谁：</span><input type="text"></div><div><span>对谁：</span><input type="text"></div><div><span>说：</span><input type="text"></div><div><button>提交</button></div><div><button>撤销</button></div></body>
</html>

                                                                              

2.上面操作已经初步完成布局，接下来在style标签中书写CSS代码,利用各种选择器设置。使文字居中，并且改变文字颜色。

<style>/* 各种选择器 类选择器 ID选择器 伪类选择器 后代选择器 子选择器 并集选择器 */h1 {/* 使h1标签中的文字样式居中 */text-align: center;}p {/* 使p标签中的文字样式居中 */text-align: center;/* 改变文字颜色 */color: darkgray;}</style>

3.文字已经居中，但是下面的输入框，按钮等还没居中，由于他们都被设置在div标签中，接下来可以对所有在div标签中的属性使用弹性布局。设置这些元素的水平排列方式。

<style>h1 {/* 使h1标签中的文字样式居中 */text-align: center;}p {/* 使p标签中的文字样式居中 */text-align: center;color: darkgray;}div {/* 开启弹性布局 */display: flex;/* 设置元素水平方向排列问题 居中排列 */justify-content: center;/* 设置每个div标签中元素外边框距离 即元素与元素之间的距离 *//* 15px auto 意思为 该元素的上下外边框为15像素 左右自适应排布 */margin: 15px auto;}</style>

 

4.位置居中问题已经解决，但是会发现输入框及文字排列还并不整齐。这是因为我们并未对span标签里的文字及input标签设置各自宽度及高度，一旦设置就会各自居左排布。

<style>h1 {/* 使h1标签中的文字样式居中 */text-align: center;}p {/* 使p标签中的文字样式居中 */text-align: center;color: darkgray;}div {/* 开启弹性布局 */display: flex;/* 设置元素水平方向排列问题 居中排列 */justify-content: center;/* 设置每个div标签中元素外边框距离 即元素与元素之间的距离 *//* 15px auto 意思为 该元素的上下外边框为15像素 左右自适应排布 */margin: 15px auto;}span {/* 设置宽度 */width: 100px;/* 设置高度 */height: 25px;}input {/* 宽度 */width: 200px;height: 25px;}</style>

      

5. 设置button按钮的宽度，文字颜色，按钮颜色

<style>h1 {/* 使h1标签中的文字样式居中 */text-align: center;}p {/* 使p标签中的文字样式居中 */text-align: center;color: darkgray;}div {/* 开启弹性布局 */display: flex;/* 设置元素水平方向排列问题 居中排列 */justify-content: center;/* 设置每个div标签中元素外边框距离 即元素与元素之间的距离 *//* 15px auto 意思为 该元素的上下外边框为15像素 左右自适应排布 */margin: 15px auto;}span {/* 设置宽度 */width: 100px;/* 设置高度 */height: 25px;}input {/* 宽度 */width: 200px;height: 25px;}button {/* 文字颜色 */color: white;/* 背景颜色 */background-color: orange;/* 按钮宽度 */width: 300px;/* 边框颜色 去掉黑边框 */border: none;/* 设置按钮高度 */height: 30px;}</style>

       

 6.基本布局已经完成，但还存在几个问题

6.1 点击按钮无反应，使用伪类选择器进行设置

<style>h1 {/* 使h1标签中的文字样式居中 */text-align: center;}p {/* 使p标签中的文字样式居中 */text-align: center;color: darkgray;}div {/* 开启弹性布局 */display: flex;/* 设置元素水平方向排列问题 居中排列 */justify-content: center;/* 设置每个div标签中元素外边框距离 即元素与元素之间的距离 *//* 15px auto 意思为 该元素的上下外边框为15像素 左右自适应排布 */margin: 15px auto;}span {/* 设置宽度 */width: 100px;/* 设置高度 */height: 25px;}input {/* 宽度 */width: 200px;height: 25px;}button {/* 文字颜色 */color: white;/* 背景颜色 */background-color: orange;/* 按钮宽度 */width: 300px;/* 边框颜色 去掉黑边框 */border: none;/* 设置按钮高度 */height: 30px;}/* 伪类选择器 设置按钮按下时的变化 */button:active {background-color: darkorange;}</style>

6.2.输入框有黑边框问题 还有光标显示位置太靠左。

以下代码有所省略，突出了重点，还是利用CSS选择器设置属性。

input {/* 宽度 */width: 200px;/* 设置高度 */height: 25px;/* 消除输入框黑框 */outline: none;/* 光标位置 */padding-left: 5px ;}

6.3.通过网页中的检查查看发现我们所设置的输入框元素的宽度应该是30px,而这里却显示29.91px,显然有问题。原因是与浏览器的自动设置有关，为防止这些细节出错，最好再加上一段代码。

/* *通配符 */* {margin: 0;padding: 0;box-sizing: border-box;}

 最终宽度成功设置为25。

6.4.设置高度，使整体高居中度。

        h1 {/* 使h1标签中的文字样式居中 */text-align: center;/* 设置外边框 上为100高度 下为20高度 左右自适应 */margin: 100px 20px auto;}p {/* 使p标签中的文字样式居中 */text-align: center;color: darkgray;/* 设置外边框 *//* 设置外边框 上为20高度 下为20高度 左右自适应 */margin: 20px 20px auto;}

6.5.设置背景图片，及整体高度 宽度 100% 即跟随浏览器大小的变化而变化。

html body {width: 100%;background-image: url("背景.png");/* 图片全覆盖且不重复 */background-repeat: no-repeat;background-size: cover;height: 100%;}

7. 接下来用到 JavaScript 进行行为交互。

 <script>//querySelector('选择器字符串')  api//获取选择器元素let body = document.querySelector('body');//获取input选择器元素let inputs = document.querySelectorAll('input');//获取提交选择器元素let submit = document.querySelector('#submit');//点击提交操作submit.onclick = function () {//获取输入框里的信息let a = inputs[0].value;let b = inputs[1].value;let c = inputs[2].value;//三个输入框右空时，if(a=='' || b=='' || c=='') {//提示内容不能为空alert("内容不能为空");return;}/* 构造新的div 即目的是将留言设置在新的构造的div标签中，并加入到目前页面中呈现*/let newDiv = document.createElement('div');//为新构造的div标签起个类名newDiv.className = 'rows';//获取时间let myDate = new Date();let myTime=myDate.toLocaleString( );//设置新构造的div标签的内容newDiv.innerHTML = a + '对' + b + '说' + c +'  '+ myTime;//将新的div标签加入到当前页面HTML中body.appendChild(newDiv);//提交成功后输入框清空效果for(let input of inputs) {input.value = '';}//撤销按钮 为了区分两个按钮元素 可以设置类名或ID名 再写类选择器 或 ID选择器 再调用//获取撤销选择器元素  #revoke ID选择器let revoke = document.querySelector('#revoke');//点击撤销后的动作revoke.onclick = function () {//获取所有新添加的DIV,因为上面设置了类名，所以这里获取类名let rev = document.querySelectorAll('.rows');if(rev==null || rev.length==0) {return;}//删除最新添加的divbody.removeChild(rev[rev.length-1]);}}</script>

8.完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>留言墙</title><style>/* 各种选择器 类选择器 ID选择器 伪类选择器 后代选择器 子选择器 并集选择器 */html body {width: 100%;background-image: url("背景.png");background-repeat: no-repeat;background-size: cover;height: 100%;}/* *通配符 */* {margin: 0;padding: 0;box-sizing: border-box;}h1 {/* 使h1标签中的文字样式居中 */text-align: center;/* 设置外边框 上为100高度 下为20高度 左右自适应 */margin: 100px 20px auto;}p {/* 使p标签中的文字样式居中 */text-align: center;color: darkgray;/* 设置外边框 *//* 设置外边框 上为20高度 下为20高度 左右自适应 */margin: 20px 20px auto;}div {/* 开启弹性布局 */display: flex;/* 设置元素水平方向排列问题 居中排列 */justify-content: center;/* 设置每个div标签中元素外边框距离 即元素与元素之间的距离 *//* 15px auto 意思为 该元素的上下外边框为15像素 左右自适应排布 */margin: 15px auto;}span {/* 设置宽度 */width: 100px;/* 设置高度 */height: 25px;}input {/* 宽度 */width: 200px;/* 设置高度 */height: 25px;/* 消除输入框黑框 */outline: none;/* 光标位置 */padding-left: 5px ;}button {/* 文字颜色 */color: white;/* 背景颜色 */background-color: orange;/* 按钮宽度 */width: 300px;/* 边框颜色 去掉黑边框 */border: none;/* 设置按钮高度 */height: 30px;}/* 伪类选择器 设置按钮按下时的变化 */button:active {background-color: darkorange;}</style>
</head>
<body><h1>留言墙</h1><p>输入内容后，点击提交即可</p><div><span>谁：</span><input type="text"></div><div><span>对谁：</span><input type="text"></div><div><span>说：</span><input type="text"></div><div><button id="submit">提交</button></div><div><button id="revoke">撤销</button></div><script>//querySelector('选择器字符串')  api//获取选择器元素let body = document.querySelector('body');//获取input选择器元素let inputs = document.querySelectorAll('input');//获取提交选择器元素let submit = document.querySelector('#submit');//点击提交操作submit.onclick = function () {//获取输入框里的信息let a = inputs[0].value;let b = inputs[1].value;let c = inputs[2].value;//三个输入框右空时，if(a=='' || b=='' || c=='') {//提示内容不能为空alert("内容不能为空");return;}/* 构造新的div 即目的是将留言设置在新的构造的div标签中，并加入到目前页面中呈现*/let newDiv = document.createElement('div');//为新构造的div标签起个类名newDiv.className = 'rows';//获取时间let myDate = new Date();let myTime=myDate.toLocaleString( );//设置新构造的div标签的内容newDiv.innerHTML = a + '对' + b + '说' + c +'  '+ myTime;//将新的div标签加入到当前页面HTML中body.appendChild(newDiv);//提交成功后输入框清空效果for(let input of inputs) {input.value = '';}//撤销按钮 为了区分两个按钮元素 可以设置类名或ID名 再写类选择器 或 ID选择器 再调用//获取撤销选择器元素  #revoke ID选择器let revoke = document.querySelector('#revoke');//点击撤销后的动作revoke.onclick = function () {//获取所有新添加的DIV,因为上面设置了类名，所以这里获取类名let rev = document.querySelectorAll('.rows');if(rev==null || rev.length==0) {return;}//删除最新添加的divbody.removeChild(rev[rev.length-1]);}}</script></body>
</html>

                                              

相关文章：

【简单的留言墙】HTML+CSS+JavaScript

目标&#xff1a;做一个简单的留言墙 1.首先我们用HTML的一些标签&#xff0c;初步构造区域 样式。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>留言墙</title><style>/* ...... */ …...

编程日记 2023/10/5 13:56:59

linux 火狐浏览器报错Firefox is already running, but is not responding

Ubuntu环境下打开Firefox报错: Firefox is already running, but is not responding.-CSDN博客 killall firefox...

编程日记 2023/10/5 13:54:57

Python:操作SQLite数据库简单示例

本文用最简单的示例演示python标准库提供的SQLite数据库进行新增、查询数据的过程。 代码文件app.py # -*- coding: UTF-8 -*- from flask import Flask import sqlite3app Flask(__name__)app.route(/) def hello_world():return Hello World!#创建数据库 app.route(/creat…...

编程日记 2023/10/5 13:53:56

第8期ThreadX视频教程：应用实战，将裸机工程移植到RTOS的任务划分，驱动和应用层交互，中断DMA，C库和中间件处理等注意事项

视频教程汇总帖&#xff1a;【学以致用&#xff0c;授人以渔】2023视频教程汇总&#xff0c;DSP第12期&#xff0c;ThreadX第8期&#xff0c;BSP驱动第26期&#xff0c;USB实战第5期&#xff0c;GUI实战第3期&#xff08;2023-10-01&#xff09; - STM32F429 - 硬汉嵌入式论坛 …...

编程日记 2023/10/5 13:49:54

【NeurIPS 2023】Backdoor对抗攻防论文汇总

NeurIPS 对抗攻防论文 NeurIPS2022|对抗攻防论文整理 - 知乎 NeurIPS 2023 Papers BIRD: Generalizable Backdoor Detection and Removal for Deep Reinforcement Learning https://neurips.cc/virtual/2023/poster/70618 摘要&#xff1a; 后门攻击对深度强化学习&…...

编程日记 2023/10/5 13:47:51

（Note）在Excel中选中某一行至最后一行的快捷键操作

在 Excel 中&#xff0c;选中一行至最后一行的快捷键是 “Shift 空格 Ctrl 方向键下”。按住 Shift 键&#xff0c;然后按下空格键以选中整行&#xff0c;接着按下 Ctrl 键保持选中状态&#xff0c;并按下方向键下键盘按钮以扩展选中范围至最后一行。 简要步骤如下&#xf…...

编程日记 2023/10/5 13:44:49

古记事法：Windows 下 16 位汇编环境搭建指南（DOSBox-X 篇）

文章目录 参考环境DOSBox-XWOWWindows On Windows 产生的原因Windows On Windows 的工作原理WOW16 的结束与 WOW64 的未来 在现代操作系统中运行 16 位应用程序DOSBox-X 16 位汇编环境的搭建应用准备挂载自动挂载dosbox-x.conf配置工具 参考 项目描述搜索引擎Bing、GoogleAI 大…...

编程日记 2023/10/5 13:42:47

云计算基础：理解AWS、Azure和Google Cloud

云计算基础&#xff1a;理解AWS、Azure和Google Cloud 介绍 云计算已经成为现代科技领域的重要驱动力之一。它为企业提供了灵活性、可伸缩性和成本效益&#xff0c;以满足日益增长的计算和存储需求。本文将深入探讨三个主要的云计算提供商&#xff1a;Amazon Web Services (A…...

编程日记 2023/10/5 13:40:45

【数据结构初阶】七、非线性表里的二叉树（堆的实现 -- C语言顺序结构）

相关代码gitee自取&#xff1a; C语言学习日记: 加油努力 (gitee.com) 接上期&#xff1a; 【数据结构初阶】六、线性表中的队列&#xff08;链式结构实现队列&#xff09;-CSDN博客 1 . 非线性表里的 树(Tree) 树的概念及结构&#xff1a; 树的概念 树是一种非线性的数据…...

编程日记 2023/10/5 13:39:45

基于SpringBoot的网上超市系统

基于SpringBoot的网上超市系统的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 【主要功能】 角色&#xff1a;用户、管理员 管理员&#xff1a;个人中心、用户管理、商品分类…...

编程日记 2023/10/5 13:38:44

在springboot项目中整合Druid

或 1.导入maven坐标 <dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-starter</artifactId><version>1.2.19</version> </dependency>2.在application.properties中配置连接池 spring:datasource:d…...

编程日记 2023/10/5 13:37:43

微信支付费率降低到0.2%，商家收款开户手续费0.6%降低的操作方法

在如今的数字时代&#xff0c;移动支付已成为人们日常生活中必不可少的一部分。微信支付作为国内最受欢迎的移动支付平台&#xff0c;一直致力于为商家和个人提供最便捷、安全的支付方式。如果可以将微信支付将费率降低到仅为0.2%&#xff0c;这无疑给广大商家带来了巨大的利好…...

编程日记 2023/10/5 13:35:41

计算机毕业设计 基于SSM的民宿推荐系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…...

编程日记 2023/10/5 13:33:39

【机器学习】训练集/验证集/测试集释疑

文章目录 序言1. 训练集、验证集、测试集是什么2. 为什么需要验证集3. 验证集是必须的吗4. 验证集和测试集上的表现会不同吗5. 如何从Train/Test Set划分Validation Set6. 训练集、验证集和测试集的比例怎么设置7. 模型表现不好时测试集可以反复使用来调整模型吗8. 训练集、验证…...

编程日记 2023/10/5 13:32:38

LCR 120.寻找文件副本

​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;LCR 120. 寻找文件副本 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 使用哈希集合判断是否有元素重复出现即可。 解题代码&#xff1a; class Solution {public int findRepeatDocument(…...

编程日记 2023/10/5 13:30:36

代码随想录算法训练营第44天|动态规划：完全背包理论基础、518.零钱兑换II、377. 组合总和 Ⅳ

动态规划&#xff1a;完全背包理论基础 518.零钱兑换II https://leetcode.cn/problems/coin-change-ii/ 用一个二维dp数组 class Solution { public:int change(int amount, vector<int>& coins) {vector<vector<int>> dp(coins.size(), vector<i…...

编程日记 2023/10/5 13:29:36

309.买卖股票的最佳时机含冷冻期【Java】

309. 买卖股票的最佳时机含冷冻期 - 力扣&#xff08;LeetCode&#xff09; 给定一个整数数组prices&#xff0c;其中第 prices[i] 表示第 i 天的股票价格 。​ 设计一个算法计算出最大利润。在满足以下约束条件下&#xff0c;你可以尽可能地完成更多的交易&#xff08;多次…...

编程日记 2023/10/5 13:28:35

React Promise 中断

需求&#xff1a; 上传文件&#xff0c;但是后端接口不支持多文件上传&#xff0c;但是一次性发出很多请求的话如果有100个文件那对后端的压力又太大了在上传的时候还需要有停止上传的按钮 进程&#xff1a; async await 只能做到第一步&#xff0c;但是无法在上传中的时候关…...

编程日记 2023/10/5 13:27:33

1.填空题 进制转换Oct.2023

原题 部分可能会有用处的知识&#xff1a; p p p进制转十进制&#xff1a; 假设有一个 p p p进制数&#xff0c;个位是 a 0 a_0 a0​&#xff0c;向高位依次是 a 1 , a 2 , . . . , a n a_1,a_2,...,a_n a1​,a2​,...,an​&#xff0c;向低位依次是 b 1 , b 2 , b 3 , . . . …...

编程日记 2023/10/5 13:26:32

node 解决多版本配置 error:03000086:digital 引起的问题 已解决

在日常后端工作中&#xff0c;难免会安装前端的项目&#xff0c;今天有旧项目需要维护&#xff0c;但是 提示 node版本过高&#xff0c;或者不是长维护版本&#xff0c;部分分享说&#xff0c;加 opensll 过滤能解决&#xff0c;但是 还是不行&#xff0c;索性来这个 底朝天的找…...

编程日记 2023/10/5 13:23:30

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/6 13:35:39

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/12/27 1:14:44

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/1/9 6:21:20

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2026/1/1 4:20:46

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2026/1/5 15:22:21

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/10/31 23:08:41