网页布局参考代码有哪些实用技巧？-网页设计-锦华智联科技

示例 1：经典两栏布局 (侧边栏 + 主内容)

这是最常见和基础的布局之一，通常用于博客、新闻网站等，它使用 Flexbox 实现,代码简洁且响应式。

（图片来源网络，侵删）

特点：

Flexbox：现代、灵活的布局方式。
响应式：在小屏幕上,侧边栏会移动到主内容下方。
简洁：HTML 结构清晰，CSS 代码量少。

代码实现：

HTML (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">经典两栏布局</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <h2>侧边栏</h2>
            <p>这里是一些导航链接或次要信息。</p>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系方式</a></li>
            </ul>
        </aside>
        <!-- 主内容区 -->
        <main class="main-content">
            <h1>主内容标题</h1>
            <p>这里是页面的主要内容，比如文章、产品介绍等，当内容增加时，它会自动填充剩余的空间。</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </main>
    </div>
</body>
</html>

CSS (style.css)

/* 基础重置和样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}
.container {
    display: flex; /* 1. 启用 Flexbox 布局 */
    /* 在小屏幕上，侧边栏会移到下面 */
    flex-direction: column; 
}
/* 侧边栏样式 */
.sidebar {
    background-color: #333;
    color: #fff;
    padding: 20px;
    width: 250px; /* 固定宽度 */
}
区样式 */
.main-content {
    background-color: #fff;
    padding: 20px;
    flex: 1; /* 2. 关键：让主内容区占据所有剩余空间 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 响应式设计：当屏幕宽度大于 768px 时 */
@media (min-width: 768px) {
    .container {
        flex-direction: row; /* 3. 在大屏幕上，侧边栏和主内容区水平排列 */
    }
}
/* 美化链接 */
a {
    color: #ddd;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

示例 2：CSS Grid 布局 (创建一个完整的网页结构)

CSS Grid 是一个二维布局系统，非常适合创建复杂的网页整体布局，如页头、导航、主内容、页脚等。

特点：

CSS Grid：强大的二维布局系统。
结构化：非常适合定义网页的宏观结构。
代码简洁：用非常少的代码就能创建复杂的网格。

代码实现：

HTML (index.html)

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">CSS Grid 布局</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="grid-container">
        <header class="header">
            <h1>我的网站</h1>
        </header>
        <nav class="nav">
            <a href="#">首页</a>
            <a href="#">产品</a>
            <a href="#">服务</a>
            <a href="#">lt;/a>
        </nav>
        <main class="main">
            <h2>主要内容</h2>
            <p>这里是页面的核心内容。</p>
        </main>
        <aside class="sidebar">
            <h3>侧边栏</h3>
            <p>一些额外的信息或广告。</p>
        </aside>
        <footer class="footer">
            <p>&copy; 2025 我的网站. 保留所有权利.</p>
        </footer>
    </div>
</body>
</html>

CSS (style.css)

/* 基础样式 */
body {
    font-family: sans-serif;
    margin: 0;
    background-color: #eee;
}
.grid-container {
    display: grid; /* 1. 启用 Grid 布局 */
    /* 2. 定义网格模板：行高 和 列宽 */
    grid-template-areas:
        "header header"
        "nav    nav"
        "main   sidebar"
        "footer footer";
    /* 3. 定义行和列的具体尺寸 */
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 2fr 1fr;
    min-height: 100vh; /* 让容器至少和视口一样高 */
}
/* 为每个区域指定其在网格中的位置 */
.header { grid-area: header; background-color: #6a11cb; color: white; padding: 1rem; }
.nav { grid-area: nav; background-color: #2575fc; color: white; padding: 1rem; }
.main { grid-area: main; background-color: white; padding: 1rem; }
.sidebar { grid-area: sidebar; background-color: #f0f0f0; padding: 1rem; }
.footer { grid-area: footer; background-color: #333; color: white; padding: 1rem; text-align: center; }
/* 响应式设计：在小屏幕上改变网格布局 */
@media (max-width: 768px) {
    .grid-container {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: 1fr; /* 只有一列 */
    }
}

示例 3：现代卡片式布局 (Flexbox + 响应式网格)

这种布局在作品集、产品展示、新闻聚合等场景中非常流行，它结合了 Flexbox 和媒体查询，以创建一个灵活的、自适应的卡片网格。

特点：

Flexbox 容器：用于居中和排列卡片。
媒体查询：根据屏幕宽度动态改变每行的卡片数量。
卡片设计块都是一个独立的卡片,有阴影和圆角。

代码实现：

HTML (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">卡片式布局</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card-container">
        <div class="card">
            <img src="https://via.placeholder.com/300x200" alt="图片占位符">
            <div class="card-content">
                <h3>卡片标题 1</h3>
                <p>这是卡片的一些描述性文字，它可以是产品信息、文章摘要等。</p>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/300x200" alt="图片占位符">
            <div class="card-content">
                <h3>卡片标题 2</h3>
                <p>这是卡片的一些描述性文字，它可以是产品信息、文章摘要等。</p>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/300x200" alt="图片占位符">
            <div class="card-content">
                <h3>卡片标题 3</h3>
                <p>这是卡片的一些描述性文字，它可以是产品信息、文章摘要等。</p>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/300x200" alt="图片占位符">
            <div class="card-content">
                <h3>卡片标题 4</h3>
                <p>这是卡片的一些描述性文字，它可以是产品信息、文章摘要等。</p>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/300x200" alt="图片占位符">
            <div class="card-content">
                <h3>卡片标题 5</h3>
                <p>这是卡片的一些描述性文字，它可以是产品信息、文章摘要等。</p>
            </div>
        </div>
    </div>
</body>
</html>

CSS (style.css)

（图片来源网络，侵删）

/* 基础样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f7f7f7;
    padding: 20px;
}
/* 卡片容器，使用 Flexbox */
.card-container {
    display: flex; /* 1. 启用 Flexbox */
    flex-wrap: wrap; /* 2. 允许项目换行 */
    justify-content: center; /* 3. 水平居中 */
    gap: 20px; /* 4. 卡片之间的间距 */
}
/* 单个卡片样式 */
.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden; /* 让图片圆角生效 */
    width: 300px; /* 固定宽度，方便理解 */
    transition: transform 0.3s ease;
}
.card:hover {
    transform: translateY(-5px); /* 鼠标悬停时上移 */
}
.card img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* 保证图片不变形 */
}
.card-content {
    padding: 15px;
}
.card-content h3 {
    margin: 0 0 10px 0;
    color: #333;
}
.card-content p {
    color: #666;
    font-size: 0.9em;
    line-height: 1.5;
}
/* 响应式设计 */
/* 在中等屏幕上，每行显示 2 个卡片 */
@media (min-width: 768px) {
    .card {
        width: calc(50% - 10px); /* 50%宽度减去一半的gap */
    }
}
/* 在大屏幕上，每行显示 3 个卡片 */
@media (min-width: 1024px) {
    .card {
        width: calc(33.333% - 14px); /* 33.333%宽度减去2/3的gap */
    }
}

如何选择和使用这些代码？

从 HTML 开始：复制对应的 HTML 代码到一个新的 .html 文件中。
创建 CSS 文件：在与 HTML 文件相同的目录下，创建一个 .css 文件（style.css），并复制对应的 CSS 代码。
链接 CSS：确保 HTML 文件中的 <head> 标签里有 <link rel="stylesheet" href="style.css"> 这一行。
打开和调试：用浏览器打开你的 HTML 文件，你可以通过浏览器的开发者工具（按 F12）来实时修改和调试 CSS,理解每个属性的作用。
自定义：将这些布局作为起点，修改颜色、字体、间距、图片等内容,以适应你自己的项目需求。

这些示例涵盖了网页布局中最核心和最常用的技术，熟练掌握它们,你就能应对绝大多数的网页布局需求。