公告网站源代码是构建公告网站的基础，它包含了网站的各种功能和逻辑，下面是一个简单的公告网站源代码示例，使用 HTML、CSS 和 JavaScript 实现。
一、HTML 代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>公告网站</title> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <p class="container"> <h1>公告网站</h1> <p class="announcements"> <h2>最新公告</h2> <ul> <li>公告 1</li> <li>公告 2</li> <li>公告 3</li> </ul> </p> <p class="form"> <h2>发布公告</h2> <form action=""> <input type="text" placeholder="公告标题"> <textarea placeholder="公告内容"></textarea> <input type="submit" value="发布"> </form> </p> </p> <script src="script.js"></script></body></html>
二、CSS 代码
body { font-family: Arial, sans-serif; background-color: #f1f1f1;}.container { width: 80%; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h1 { text-align: center; margin-bottom: 20px;}.announcements { margin-bottom: 20px;}h2 { margin-top: 0;}ul { list-style-type: none; padding: 0;}li { padding: 10px; border-bottom: 1px solid #ccc;}.form { padding: 20px; border: 1px solid #ccc;}input[type="text"],textarea { width: 100%; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;}input[type="submit"] { padding: 10px 20px; background-color: #4CAF50; color: #fff; border: none; cursor: pointer;}三、JavaScript 代码
// 获取发布公告表单var form = document.querySelector('.form form');// 添加表单提交事件监听器form.addEventListener('submit', function(event) { event.preventDefault(); // 获取公告标题和内容 var title = document.querySelector('input[type="text"]').value; var content = document.querySelector('textarea').value; // 创建新的公告列表项 var li = document.createElement('li'); li.innerHTML = '<h3>' + title + '</h3><p>' + content + '</p>'; // 将新公告添加到公告列表中 document.querySelector('.announcements ul').appendChild(li); // 清空表单 form.reset();});四、代码解释
1、HTML 代码：
<!DOCTYPE html>：指定 HTML5 文档类型。
<html>：HTML 文档的根标签。
<head>：包含文档的元数据，如字符编码、标题和样式表链接。
<meta charset="UTF-8">：指定文档的字符编码为 UTF-8。
<title>公告网站</title>：设置文档的标题。
<link rel="stylesheet" type="text/css" href="style.css">：链接到外部样式表文件 style.css。
<body>：包含文档的内容。
<p class="container">：容器元素，用于布局网站的各个部分。
<h1>公告网站</h1>。
<p class="announcements">：公告列表容器。
<h2>最新公告</h2>：公告列表标题。
<ul>：公告列表。
<li>公告 1</li>：公告列表项。
<li>公告 2</li>：公告列表项。
<li>公告 3</li>：公告列表项。
<p class="form">：发布公告表单容器。
<h2>发布公告</h2>：发布公告表单标题。
<form action="">：发布公告表单。
<input type="text" placeholder="公告标题">输入框。
<textarea placeholder="公告内容"></textarea>输入框。
<input type="submit" value="发布">：发布按钮。
<script src="script.js"></script>：链接到外部 JavaScript 文件 script.js。
2、CSS 代码：
body：设置文档的字体和背景颜色。
.container：设置容器的宽度、边距、填充和背景颜色。
h1：设置网站标题的样式。
.announcements：设置公告列表的样式。
h2：设置公告列表标题的样式。
ul：设置公告列表的样式。
li：设置公告列表项的样式。
.form：设置发布公告表单的样式。
input[type="text"]：设置公告标题输入框的样式。
textarea：设置公告内容输入框的样式。
input[type="submit"]：设置发布按钮的样式。
3、JavaScript 代码：
var form = document.querySelector('.form form');：获取发布公告表单。
form.addEventListener('submit', function(event) {... });：添加表单提交事件监听器。
event.preventDefault();：阻止表单的默认提交行为。
var title = document.querySelector('input[type="text"]').value;：获取公告标题。
var content = document.querySelector('textarea').value;：获取公告内容。
var li = document.createElement('li');：创建新的公告列表项。
li.innerHTML = '<h3>' + title + '</h3><p>' + content + '</p>';：设置公告列表项的内容。
document.querySelector('.announcements ul').appendChild(li);：将新公告添加到公告列表中。
form.reset();：清空表单。
五、归纳
通过以上代码，我们实现了一个简单的公告网站，用户可以在网站上查看最新公告，并发布新的公告，代码使用了 HTML、CSS 和 JavaScript 来实现网站的布局、样式和交互功能，你可以根据自己的需求对代码进行修改和扩展，以满足不同的公告网站需求。