学校官网 CSS 代码示例：简单易懂的网页设计

<p>当然可以帮你写一个学校官网的 CSS 文件并套用在 HTML 内。下面是一个简单的示例：</p>
<p>CSS 文件（style.css）：</p>
<pre><code class="language-css">/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  color: #333;
}

a {
  text-decoration: none;
  color: #007bff;
}

/* 导航栏 */
.navbar {
  background-color: #f8f9fa;
  padding: 10px;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;
  margin-right: 10px;
}

/* 标题 */
h1 {
  color: #007bff;
  font-size: 24px;
  margin-top: 20px;
}

/* 内容区域 */
.content {
  margin-top: 20px;
}

/* 脚注 */
.footer {
  background-color: #f8f9fa;
  padding: 10px;
  text-align: center;
}
</code></pre>
<p>HTML 文件（index.html）：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;学校官网&lt;/title&gt;
  &lt;link rel='stylesheet' type='text/css' href='style.css'&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;header class='navbar'&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href='#'&gt;首页&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;新闻&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;关于我们&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;联系我们&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/header&gt;

  &lt;h1&gt;欢迎来到学校官网&lt;/h1&gt;

  &lt;div class='content'&gt;
    &lt;p&gt;这是学校官网的内容区域。&lt;/p&gt;
  &lt;/div&gt;

  &lt;footer class='footer'&gt;
    版权所有 &amp;copy; 学校名称
  &lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>将上述 CSS 代码保存为一个名为 style.css 的文件，与 HTML 文件（index.html）保存在同一目录下。然后在 index.html 文件的 <head> 标签内添加 <link> 标签，将 CSS 文件链接到 HTML 文件中。这样 CSS 样式就会应用到 HTML 元素上。</p>
<p>请注意，这只是一个简单的示例，你可以根据自己的需求进一步修改 CSS 样式和 HTML 结构。</p>