模板预览

这是一个我们即将创建的模板的简单描述,您可以在脑海中构建出它的样子：

div css静态html网页设计模板
（图片来源网络，侵删）
  • 顶部导航栏: 固定在页面顶部，包含网站Logo和主导航链接（首页、服务、联系）。
  • 主横幅: 全屏宽度的背景图，中央有吸引人的标题、副标题和一个行动号召按钮。
  • 特色介绍: 三个并排的卡片，每个卡片包含一个图标、标题和简短描述。
  • 内容展示: 一个两栏布局，左侧是博客文章列表，右侧是侧边栏（包含关于、热门文章、标签云等）。
  • 页脚: 分为三列，包含公司信息、快速链接和联系方式，底部有版权信息。

第一步：创建HTML骨架 (index.html)

这是网页的结构,我们使用HTML5的语义化标签，如 <header>, <nav>, <main>, <section>, <footer>，这有助于SEO和代码可读性。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的静态网页模板</title>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="style.css">
    <!-- 引入字体图标库 (Font Awesome) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 1. 导航栏 -->
    <header class="main-header">
        <div class="container">
            <a href="#" class="logo">我的Logo</a>
            <nav class="main-nav">
                <ul>
                    <li><a href="#home" class="active">首页</a></li>
                    <li><a href="#about">lt;/a></li>
                    <li><a href="#services">服务</a></li>
                    <li><a href="#contact">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- 2. 主横幅 -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1>欢迎来到我的网站</h1>
            <p>这是一个使用 Div 和 CSS 构建的现代化、响应式静态网页模板。</p>
            <a href="#services" class="btn">了解更多</a>
        </div>
    </section>
    <!-- 3. 特色介绍 -->
    <section class="features">
        <div class="container">
            <div class="feature-box">
                <i class="fas fa-rocket"></i>
                <h3>快速高效</h3>
                <p>我们的服务致力于提供最高效的解决方案，助您快速达成目标。</p>
            </div>
            <div class="feature-box">
                <i class="fas fa-paint-brush"></i>
                <h3>现代设计</h3>
                <p>采用最新的设计趋势，确保您的网站在视觉上令人印象深刻。</p>
            </div>
            <div class="feature-box">
                <i class="fas fa-mobile-alt"></i>
                <h3>响应式布局</h3>
                <p>完美适配桌面、平板和手机等各种设备，随时随地提供最佳体验。</p>
            </div>
        </div>
    </section>
    <!-- 4. 内容展示区 -->
    <main class="content-section">
        <div class="container">
            <div class="main-content">
                <article class="post">
                    <h2>这是第一篇博客文章的标题</h2>
                    <p class="post-meta">发布于 2025年10月27日 | 作者：Admin</p>
                    <p>这里是文章的摘要内容，Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <a href="#" class="read-more">阅读更多</a>
                </article>
                <article class="post">
                    <h2>这是第二篇博客文章的标题</h2>
                    <p class="post-meta">发布于 2025年10月26日 | 作者：Admin</p>
                    <p>这里是另一篇文章的摘要内容，Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <a href="#" class="read-more">阅读更多</a>
                </article>
            </div>
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <div class="widget">
                    <h3>关于我们</h3>
                    <p>这是一个关于我们的简单描述，我们专注于为客户提供高质量的服务。</p>
                </div>
                <div class="widget">
                    <h3>热门文章</h3>
                    <ul>
                        <li><a href="#">如何学习前端开发</a></li>
                        <li><a href="#">CSS 布局技巧大全</a></li>
                        <li><a href="#">响应式设计最佳实践</a></li>
                    </ul>
                </div>
                <div class="widget">
                    <h3>标签云</h3>
                    <div class="tag-cloud">
                        <a href="#">HTML</a>
                        <a href="#">CSS</a>
                        <a href="#">JavaScript</a>
                        <a href="#">设计</a>
                        <a href="#">响应式</a>
                    </div>
                </div>
            </aside>
        </div>
    </main>
    <!-- 5. 页脚 -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-col">
                <h3>公司信息</h3>
                <p>地址：某某市某某区某某街道<br>电话：123-456-7890</p>
            </div>
            <div class="footer-col">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">博客</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>关注我们</h3>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-github"></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 我的公司. 保留所有权利.</p>
        </div>
    </footer>
</body>
</html>

第二步：编写CSS样式 (style.css)

这是网页的“皮肤”，负责布局、颜色、字体和视觉效果。

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --dark-color: #343a40;
    --light-color: #f8f9fa;
    --text-color: #333;
    --max-width: 1200px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
}
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3 {
    margin-bottom: 15px;
    color: var(--dark-color);
}
p {
    margin-bottom: 15px;
}
a {
    text-decoration: none;
    color: var(--primary-color);
}
ul {
    list-style: none;
}
img {
    max-width: 100%;
    height: auto;
}
/* --- 按钮样式 --- */
.btn {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background: #0056b3;
}
/* --- 导航栏 --- */
.main-header {
    background: #fff;
    color: var(--dark-color);
    padding: 15px
div css静态html网页设计模板
（图片来源网络，侵删）