web前端开发设计-----------精美留言板

进入的页面样式图

留言板的效果图

嘿嘿，开头还有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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&emsp;&emsp;&emsp;&emsp;提交文件<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&emsp;&emsp;&emsp;&emsp;提交文件<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>元素，并为其设置内容。内容包括昵称、日期、留言文本和一个"消除记录"的按钮。
为"消除记录"按钮绑定一个点击事件处理程序。当用户点击该按钮时，将从无序列表中移除对应的列表项。
将按钮添加到列表项中，然后将列表项添加到无序列表中。
清空文本区域和昵称输入框的值，以便用户可以继续输入新的留言。

这段代码使得点击发布按钮时，会根据用户输入的昵称和留言内容，创建一个新的留言记录，并显示在留言板上。同时，还提供了删除留言记录的功能。

好啦，亲爱的小伙伴们都到这里了，就麻烦转发给你的朋友吧，一键三连给博主走起！！！