学校社团门户网站静态页面设计教程 - 使用现代构建器 - 常规

以下是一个简单的静态网站代码示例，用于设计某个学校社团的门户网站。这个示例包含了社团介绍、活动进度等板块，使用了 HTML、CSS 和 JavaScript 等语言。在这个示例中，我们使用了现代构建器 Webpack 来打包构建为静态页面。

首先，在你的项目文件夹中创建以下文件和文件夹结构：

- index.html
- styles.css
- main.js
- dist/ (此文件夹用于存放构建后的静态页面)
- package.json
- webpack.config.js

然后，将以下代码分别复制到对应的文件中。

index.html:

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>学校社团门户网站</title>
  <link rel='stylesheet' href='dist/styles.css'>
</head>
<body>
  <header>
    <h1>学校社团门户网站</h1>
    <nav>
      <ul>
        <li><a href='#about'>社团介绍</a></li>
        <li><a href='#events'>活动进度</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id='about'>
      <h2>社团介绍</h2>
      <p>在这里写社团介绍...</p>
    </section>

    <section id='events'>
      <h2>活动进度</h2>
      <ul id='event-list'>
        <!-- 活动列表将通过JavaScript动态添加 -->
      </ul>
    </section>
  </main>

  <script src='dist/main.js'></script>
</body>
</html>

styles.css:

/* 一些基本样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

main {
  padding: 20px;
}

section {
  margin-bottom: 20px;
}

h2 {
  margin-bottom: 10px;
}

#event-list {
  list-style-type: none;
  padding: 0;
}

.event-item {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}

main.js:

// 活动进度数据
const events = [
  { title: '活动1', date: '2022-01-01' },
  { title: '活动2', date: '2022-02-01' },
  { title: '活动3', date: '2022-03-01' },
];

// 动态添加活动列表
const eventList = document.getElementById('event-list');
events.forEach(event => {
  const listItem = document.createElement('li');
  listItem.classList.add('event-item');
  listItem.innerHTML = `<strong>${event.title}</strong> - ${event.date}`;
  eventList.appendChild(listItem);
});

package.json:

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.1"
  }
}

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

最后，在命令行中执行以下命令来安装所需的依赖并进行构建：

npm install webpack webpack-cli --save-dev
npm run build

完成后，将生成的静态页面文件位于dist/文件夹中。

这只是一个基本的示例，你可以根据需要进一步定制和完善这个网站。你可以添加更多的板块、样式和交互功能，以满足学校社团门户网站的需求。