进入的页面样式图
留言板的效果图 
嘿嘿，开头还有js的prompt警示框
/// 开始上代码！ ///
1-HTML5相关代码：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="留言板.css"> </head> <body> <i> <h1>留言板</h1> </i> <hr> <ul class="a"></ul> <div class="container"> <p class="bth">     提交文件<input type="file"></p> <input type="text" placeholder="请输入昵称:" name="name" id="nameInput"> <textarea placeholder="请留言" name="pwd" id="textarea" cols="36" rows="16">请你留言:</textarea> <br> <button class="sub">发布</button> </div> <script> prompt('你好,欢迎进入留言板'); prompt('亲，留言完记得点击按钮上传'); </script> <script src="1111111.js"></script> </body> </html>
2-css3样式代码：
* { margin: 0; padding: 0; box-sizing: border-box; } /* 整体布局 */ body { background-image: url("Hai2.jpg"); background-size: cover; background-position: center; font-family: Arial, sans-serif; } .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } h1 { text-align: center; margin-bottom: 20px; color: #000000; } ul { list-style-type: none; margin-bottom: 20px; align-items: center; justify-content: center; } li { padding: 10px; border-bottom: 1px solid #ccc; text-align: center; } textarea { width: 100%; padding: 10px; margin-bottom: 10px; resize: vertical; border: 1px solid #ccc; border-radius: 5px; font-family: Arial, sans-serif; } /* 输入框背景色修改 */ textarea, input[type="text"] { background-color: rgb(117, 223, 188); } input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; font-family: Arial, sans-serif; } .name { color: yellow; font-weight: bold; } button.sub { background-color: #4caf50; color: #fff; border: none; padding: 15px 30px; border-radius: 5px; cursor: pointer; font-size: 18px; } button.sub:hover { background-color: #45a049; } button.remove { background-color: #f44336; color: #fff; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; } button.remove:hover { background-color: #e53935; } /* 添加button渐变效果 */ .sub{ padding: 1rem 2.5rem; border:none; outline:none; border-radius: 0.4rem; background-color: rgb(14,14, 26); color:rgb(234, 234, 234); box-shadow: 0px 0px 60px #1471a2; /* 设置盒子反射 */ -webkit-box-reflect: /* 反射设置在底部 */ below 10px linear-gradient( /* 设置渐变色 */ to bottom, rgba(0,0,0,0.0) rgba(0,0,0,0.4) ); } /* 设置悬浮样式 */ .sub:hover{ background: linear-gradient( 270deg, rgba(178, 210, 133, 0.681)0%, rgba(31,215,232,0.873)60%); color: rgb(4,4,38);textarea, input[type="text"] { /* 其他样式规则 */ width: 50%; } } .sub{ transition:1s } /* 输入框背景色修改 */ textarea, input[type="text"] { background-color: rgb(164, 237, 213); width: 50%; }
3-javascript完整代码：
var btn = document.querySelector('button.sub'); var text = document.querySelector('#textarea'); var nameInput = document.querySelector('#nameInput'); var ul = document.querySelector('ul'); btn.onclick = function() { if (text.value === '' || nameInput.value === '') { alert('你没有输入内容或昵称，不能进行此操作'); return false; } else { var li = document.createElement('li'); var date = new Date(); var dateString = date.toLocaleString(); li.innerHTML = '<span class="name">' + nameInput.value + '</span><span class="date">' + dateString + '</span><br><span class="message">' + text.value + '</span>'; var button = document.createElement('button'); button.className = 'remove'; button.innerHTML = '消除记录'; button.onclick = function() { ul.removeChild(this.parentNode); }; li.appendChild(button); ul.appendChild(li); text.value = ''; nameInput.value = ''; } };
对了，背景图放这里啦，记得添加
代码详细解释：
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="留言板.css"> </head>
这是HTML文档的开头，定义了文档类型为HTML。 在标签中，通过标签引入了一个名为"留言板.css"的外部样式表文件。<head><link>
<body> <i> <h1>留言板</h1> </i> <hr> <ul class="a"></ul>
<body>标签表示网页的主体内容，从这里开始展示给用户。 在这里，使用标签将后续内容显示为斜体，并使用标签显示标题为"留言板"。 接着，使用标签插入一条水平线，然后使用标签创建一个无序列表，其中属性设置为"a"，用于后续的样式设置。
<div class="container"> <p class="bth">     提交文件<input type="file"></p> <input type="text" placeholder="请输入昵称:" name="name" id="nameInput"> <textarea placeholder="请留言" name="pwd" id="textarea" cols="36" rows="16">请你留言:</textarea> <br> <button class="sub">发布</button> </div>
在一个定义类名为"container"的容器内，包含了一些表单元素。 首先是一个p标签，设置了属性为"bth"，其中包含了一段文字和一个标签，type类型为"file"，用于上传文件。 接着是一个标签，类型为"text"，用于输入昵称。 然后是一个标签，设置了属性为"请留言"，属性为"pwd"，属性为"textarea"，并设置了列数和行数。 之后是一个标签，用于插入一个换行。 最后是一个标签，设置了属性为"sub"，按钮显示文本为"发布"。"""按钮用css添加了炫彩渐变的效果"""可以弄出来试试哈、
CSS:
* { margin: 0; padding: 0; box-sizing: border-box; }
这段代码使用了通用选择器*，将页面中所有元素的外边距和内边距设置为0，并将box-sizing属性设置为border-box，以确保元素的宽度和高度包括边框和内边距。
body { background-image: url("Hai2.jpg"); background-size: cover; background-position: center; font-family: Arial, sans-serif; }
这段代码为<body>元素设置了背景图片为"Hai2.jpg"，使用background-size: cover让背景图片自适应页面大小并覆盖整个页面，使用background-position: center将背景图片居中显示。 还设置了页面的默认字体为Arial和sans-serif。
.container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }
这段代码为具有class属性为"container"的<div>容器设置了一些样式。 使用display: flex创建了一个弹性布局容器，flex-direction: column将其内部元素垂直排列，align-items: center和justify-content: center将元素在容器中水平和垂直居中，height: 100vh设置容器的高度为视窗高度。
h1 { text-align: center; margin-bottom: 20px; color: #000000; }
这段代码为<h1>标题元素设置样式。text-align: center将标题居中对齐，margin-bottom: 20px设置标题下方的外边距为20像素，color: #000000将标题颜色设置为黑色。
ul { list-style-type: none; margin-bottom: 20px; align-items: center; justify-content: center; } li { padding: 10px; border-bottom: 1px solid #ccc; text-align: center; }
这段代码为无序列表<ul>和列表项<li>设置样式。list-style-type: none去除了列表的默认样式，margin-bottom: 20px设置列表的下方外边距为20像素。 列表项<li>设置了10像素的内边距和底边框，以及居中对齐文本。
textarea, input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; resize: vertical; border: 1px solid #ccc; border-radius: 5px; font-family: Arial, sans-serif; }
这段代码为和元素设置了一些共同的样式。 `width: 100<textarea><input>width: 100%将宽度设置为父元素的100%，padding: 10px设置内边距为10像素，margin-bottom: 10px设置下方外边距为10像素。resize: vertical允许垂直调整<textarea>元素的大小。border: 1px solid #ccc设置了1像素的边框，border-radius: 5px设置了边框的圆角为5像素，font-family: Arial, sans-serif设置字体为Arial和sans-serif。
textarea, input[type="text"] { background-color: rgb(117, 223, 188); }
这段代码设置了留言框和昵称框的背景颜色为RGB值(117, 223, 188)，即一种绿色
button.sub { background-color: #4caf50; color: #fff; border: none; padding: 15px 30px; border-radius: 5px; cursor: pointer; font-size: 18px; } button.sub:hover { background-color: #45a049; } button.remove { background-color: #f44336; color: #fff; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; } button.remove:hover { background-color: #e53935; }
这段代码为两个按钮设置了样式。 `button.subbutton.sub:hover表示鼠标悬停在按钮上时的样式，设置了背景颜色为深绿色(#45a049)。
类似地，button.remove为"删除"按钮设置了样式，包括背景颜色为红色和鼠标悬停时的背景颜色为深红色。
.sub{ padding: 1rem 2.5rem; border:none; outline:none; border-radius: 0.4rem; background-color: rgb(14,14, 26); color:rgb(234, 234, 234); box-shadow: 0px 0px 60px #1471a2; -webkit-box-reflect: below 10px linear-gradient( to bottom, rgba(0,0,0,0.0) rgba(0,0,0,0.4) ); } .sub:hover{ background: linear-gradient( 270deg, rgba(178, 210, 133, 0.681)0%, rgba(31,215,232,0.873)60%); color: rgb(4,4,38);textarea, input[type="text"] { width: 50%; }
这段代码为类名为"sub"的按钮设置了更多的样式，包括内边距、边框、背景颜色、文字颜色、阴影效果和反射效果。 `button.sub:hover
这是给留言板添加样式和布局的CSS代码。
js代码：
var btn = document.querySelector('button.sub'); var text = document.querySelector('#textarea'); var nameInput = document.querySelector('#nameInput'); var ul = document.querySelector('ul');
这段代码使用document.querySelector选择器获取了提交按钮、文本区域、昵称输入框和无序列表的引用。 通过这些引用，可以对它们进行操作。
btn.onclick = function() { if (text.value === '' || nameInput.value === '') { alert('你没有输入内容或昵称，不能进行此操作'); return false; } else { var li = document.createElement('li'); var date = new Date(); var dateString = date.toLocaleString(); li.innerHTML = '<span class="name">' + nameInput.value + '</span><span class="date">' + dateString + '</span><br><span class="message">' + text.value + '</span>'; var button = document.createElement('button'); button.className = 'remove'; button.innerHTML = '消除记录'; button.onclick = function() { ul.removeChild(this.parentNode); }; li.appendChild(button); ul.appendChild(li); text.value = ''; nameInput.value = ''; } };
这段代码为提交按钮绑定了一个点击事件处理程序。 当用户点击按钮时，将执行以下操作：
- 检查文本区域和昵称输入框是否为空。 如果为空，弹出警告框提示用户没有输入内容或昵称，并返回`false
- 如果文本区域和昵称输入框都有值，将创建一个新的列表项
<li>元素，并为其设置内容。 内容包括昵称、日期、留言文本和一个"消除记录"的按钮。 - 为"消除记录"按钮绑定一个点击事件处理程序。 当用户点击该按钮时，将从无序列表中移除对应的列表项。
- 将按钮添加到列表项中，然后将列表项添加到无序列表中。
- 清空文本区域和昵称输入框的值，以便用户可以继续输入新的留言。
这段代码使得点击发布按钮时，会根据用户输入的昵称和留言内容，创建一个新的留言记录，并显示在留言板上。 同时，还提供了删除留言记录的功能。
好啦，亲爱的小伙伴们都到这里了，就麻烦转发给你的朋友吧，一键三连给博主走起！！！
