网页制作简单模板div代码-网页设计-锦华智联科技

最简单的单页面布局

这是一个最基础的布局，包含一个页眉、一个内容区域和一个页脚。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">简单模板</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        /* 布局容器样式 */
        .container {
            width: 80%;
            margin: 0 auto; /* 水平居中 */
            padding: 20px;
        }
        /* 各个区块样式 */
        header {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 1rem;
            margin-bottom: 20px;
        }
        main {
            background-color: #f4f4f4;
            padding: 20px;
            margin-bottom: 20px;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 1rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>网站标题</h1>
            <p>这里是导航栏或副标题</p>
        </header>
        <main>
            <h2>主要内容</h2>
            <p>这里是网页的核心内容，你可以在这里放置文章、图片、视频等。</p>
        </main>
        <footer>
            <p>&copy; 2025 你的网站名称. 保留所有权利.</p>
        </footer>
    </div>
</body>
</html>

代码解释：

<!DOCTYPE html>: 声明这是一个 HTML5 文档。
<head>: 包含文档的元数据，如字符集、视口设置、标题和样式。
<style>: 内部 CSS 样式表，用于美化 HTML 元素。
- * { margin: 0; padding: 0; }: 重置所有元素的默认外边距和内边距,使布局更可控。
- .container: 一个包裹所有内容的 div，设置宽度为 80%，并通过 margin: 0 auto; 实现水平居中。
- header, main, footer: 分别为页眉、主内容区和页脚添加背景色、文字颜色和内边距,让它们看起来像独立的区块。
<body>: 网页的可见内容。
<div class="container">: 一个容器 div,用于包裹并居中内部的所有布局块。
<header>: 代表网页或区块的页眉，通常包含网站 Logo、主导航菜单等。
<main>: 代表网页的主要内容，一个页面中只应有一个 <main>
<footer>: 代表网页或区块的页脚，通常包含版权信息、联系方式、友情链接等。



经典的三栏布局
这是非常常见的一种布局，包含一个页眉、一个侧边栏、一个主内容区和一个页脚。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">三栏布局模板</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        .container {
            width: 90%;
            margin: 0 auto;
            display: flex; /* 使用 Flexbox 布局 */
            gap: 20px; /* 子元素之间的间距 */
        }
        header, footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 1rem;
            width: 100%; /* 头尾占满整个容器宽度 */
        }
        .content-wrapper {
            flex: 1; /* 主内容区占据剩余空间 */
        }
        main {
            background-color: #fff;
            padding: 20px;
            height: 500px; /* 为了演示高度，实际开发中不需要 */
        }
        aside {
            background-color: #f0f0f0;
            padding: 20px;
            width: 250px; /* 侧边栏固定宽度 */
            height: 500px; /* 为了演示高度 */
        }
        footer {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>网站标题</h1>
    </header>
    <div class="container">
        <div class="content-wrapper">
            <main>
                <h2>主要内容</h2>
                <p>这里是文章的主体内容，可以很长很长，很长很长...</p>
            </main>
        </div>
        <aside>
            <h3>侧边栏</h3>
            <p>这里是侧边栏，可以放置广告、分类、标签云等。</p>
        </aside>
    </div>
    <footer>
        <p>&copy; 2025 你的网站名称. 保留所有权利.</p>
    </footer>
</body>
</html>
代码解释：

.container: 这里使用了 display: flex;，这会让它的直接子元素（.content-wrapper 和 aside）变成弹性盒子,并排排列。
gap: 20px;: 这是 Flexbox 的一个属性，用于设置子元素之间的间距，比用 margin 更方便。
.content-wrapper: 这是一个包装 main 的 div，我们让它 flex: 1;,意思是让它占据所有可用的剩余空间。
main: 主内容区。flex: 1; 的效果是让 .content-wrapper (也就是 main) 拉伸以填满容器。
aside: 侧边栏，我们给它设置了一个固定的 width: 250px;，这样它就不会挤压主内容区,保持固定宽度。
header 和 footer: 它们被设置为 width: 100%;，所以它们会突破 .container 的限制,占据整个浏览器宽度。


响应式导航栏（带汉堡菜单）
这是一个更现代、更实用的模板，包含一个响应式的顶部导航栏,在移动设备上会自动变成汉堡菜单。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">响应式导航栏模板</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
        }
        .navbar {
            background-color: #333;
            overflow: hidden; /* 防止菜单溢出 */
        }
        .navbar a {
            float: left;
            display: block;
            color: #fff;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }
        .navbar a:hover {
            background-color: #ddd;
            color: #333;
        }
        /* 汉堡菜单按钮 */
        .navbar .icon {
            display: none; /* 默认隐藏 */
        }
        /* 响应式布局 - 当屏幕宽度小于 600px 时 */
        @media screen and (max-width: 600px) {
            .navbar a:not(:first-child) {
                display: none; /* 隐藏所有链接，除了第一个 */
            }
            .navbar a.icon {
                float: right;
                display: block; /* 显示汉堡菜单按钮 */
            }
            /* 点击汉堡菜单后，显示所有链接 */
            .responsive .navbar {
                position: relative;
            }
            .responsive .navbar a.icon {
                position: absolute;
                right: 0;
                top: 0;
            }
            .responsive a {
                float: none;
                display: block;
                text-align: left;
            }
        }
    </style>
</head>
<body>
<div class="navbar" id="myNavbar">
  <a href="#home">首页</a>
  <a href="#news">新闻</a>
  <a href="#contact">联系</a>
  <a href="#about">lt;/a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
<div style="padding:16px;">
  <h2>响应式导航栏</h2>
  <p>调整浏览器窗口大小，看看效果如何变化。</p>
  <p>当屏幕宽度小于600像素时，导航链接会隐藏，并显示一个汉堡菜单图标。</p>
  <p>点击汉堡菜单图标，可以显示导航链接。</p>
</div>
<script>
function myFunction() {
    var x = document.getElementById("myNavbar");
    if (x.className === "navbar") {
        x.className += " responsive";
    } else {
        x.className = "navbar";
    }
}
</script>
</body>
</html>
代码解释：

<style>:
.navbar: 导航栏的容器，overflow: hidden; 用于清除浮动。
.navbar a: 导航链接的样式，float: left; 让它们水平排列。
.navbar .icon: 汉堡菜单按钮，默认 display: none;,在桌面端不显示。
@media screen and (max-width: 600px): 这是媒体查询，当浏览器窗口宽度小于 600px 时，内部的样式才会生效。
它会隐藏除第一个外的所有导航链接。
显示汉堡菜单按钮。
.responsive 类是动态添加到 navbar 上的,用于切换菜单的显示和隐藏状态。




<body>:
<div class="navbar" id="myNavbar">: 导航栏的 HTML 结构，id 用于 JavaScript 操作。
<a href="javascript:void(0);" class="icon" ...>: 汉堡菜单按钮，onclick="myFunction()" 绑定了点击事件。


<script>:
myFunction() 函数是核心，当点击汉堡菜单时，它会检查 navbar 的 className。
如果当前只有 "navbar"，就给它加上 " responsive"，触发媒体查询中的样式,让菜单展开。
如果已经有 " responsive"，就移除它,让菜单收起。




模板一 是最基础的骨架,适合简单页面。
模板二 引入了 Flexbox 布局，是现代网页布局的核心技术,非常适合创建灵活的多栏布局。
模板三 引入了 媒体查询 和 JavaScript，是实现响应式设计的关键,让你的网站在不同设备上都有良好的显示效果。

您可以根据自己的需求，复制这些模板并修改其中的内容和样式,快速开始您的网页制作之旅。