css模板

admin 2023年12月27日 18:43 36 0

创建一个简单的 CSS 模板，我们可以从基础的 HTML 结构开始，并为其添加一些基本的 CSS 样式，以下是一个简单的例子：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 模板</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #f0f0f0;
            color: #333;
        }

        /* 头部样式 */
        .header {
            background-color: #333;
            color: #fff;
            padding: 20px 0;
            text-align: center;
        }

        /* 内容样式 */
        .content {
            padding: 20px;
        }

        /* 尾部样式 */
        .footer {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>欢迎来到我的网页</h1>
    </header>
    <div class="content">
        <!-- 这里是主要内容 -->
        <p>这是一个使用 CSS 模板的简单网页。你可以在这里添加你自己的内容。</p>
        <p>你可以使用这个模板作为起点，然后根据你的需求进行修改和扩展。</p>
    </div>
    <footer class="footer">
        <p>&copy; 2023 我的网站. All rights reserved.</p>
    </footer>
</body>
</html>

这个模板包含了一个简单的 HTML 结构，其中包含一个头部（header）、一个内容区域（content）和一个尾部（footer），每个部分都有其对应的 CSS 样式，使得它们在视觉上更加吸引人，你可以根据需要修改这些样式，以适应你的网站或应用程序的外观和感觉。