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

最新推荐文章于 2025-03-05 15:50:10 发布

SQL'one

最新推荐文章于 2025-03-05 15:50:10 发布

阅读量1.1w

点赞数 45

分类专栏： web前端文章标签： javascript css3 node.js html vscode

本文链接：https://blog.csdn.net/m0_75031232/article/details/131235181

版权

进入的页面样式图

留言板的效果图

嘿嘿，开头还有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"] {
   backgroun

最低0.47元/天解锁文章