静态网站模板

admin 2023年11月10日 19:13 61 0

# 静态网站模板

在当今的互联网时代，网站已经成为人们获取信息、交流互动的重要平台，而静态网站由于其加载速度快、易于维护的特点，仍然在很多领域有着广泛的应用，我将为您介绍一种静态网站模板，帮助您快速搭建自己的网站。

一、HTML 模板

HTML 是用于描述网页结构的标记语言，下面是一个简单的 HTML 模板，包含了网页的基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>网站标题</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>网站标题</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>欢迎来到我的网站</h2>
            <p>这里是网站的内容。</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 版权所有</p>
    </footer>
</body>
</html>

这个模板包含了网页的标题、导航栏、主体内容和页脚等基本结构，您可以在 `` 标签中添加自己的内容。

二、CSS 样式表

CSS 是用于描述网页样式的语言，下面是一个简单的 CSS 样式表，用于美化网页的外观：

/* style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
}

nav {
    background-color: #e9ecef;
    padding: 10px;
}

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

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

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

main {
    margin: 20px;
}