您可以直接复制下面的代码,保存为 .html 和 .css 文件，然后在浏览器中打开即可看到效果。
（图片来源网络，侵删）
文件结构
创建一个文件夹,并在其中创建以下两个文件：
my-website/
├── index.html
└── style.cssHTML 代码 (index.html)
这个 HTML 文件定义了网页的结构和内容，我们使用了语义化的 HTML5 标签，如 <header>, <nav>, <main>, <aside>, <footer>，这有助于 SEO 和代码可读性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的 DIV+CSS 网页模板</title>
<!-- 引入外部 CSS 文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 1. 页头：通常包含 Logo 和网站名称 -->
<header class="main-header">
<div class="container">
<a href="#" class="logo">我的Logo</a>
</div>
</header>
<!-- 2. 导航栏：网站的主要菜单 -->
<nav class="main-nav">
<div class="container">
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品服务</a></li>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</nav>
<!-- 3. 主体内容区：包含主内容区和侧边栏 -->
<main class="main-content">
<div class="container">
<!-- 3.1 左侧主内容区 -->
<section class="content">
<article class="post">
<h2>欢迎来到我的网站</h2>
<p class="post-meta">发布于 2025年10月27日 | 作者：张三</p>
<p>这是一个使用 DIV 和 CSS 构建的简单网页模板，这个模板非常适合用作企业官网、博客或个人作品集的起点。</p>
<p>模板的结构清晰，易于理解和修改，您可以根据自己的需求，轻松地调整颜色、字体和布局。</p>
<a href="#" class="read-more">阅读更多</a>
</article>
<article class="post">
<h2>第二个文章标题</h2>
<p class="post-meta">发布于 2025年10月26日 | 作者：李四</p>
<p>这是另一篇示例文章，侧边栏通常用于放置网站的次要信息，如热门文章、分类、标签云或联系方式等。</p>
<a href="#" class="read-more">阅读更多</a>
</article>
</section>
<!-- 3.2 右侧边栏 -->
<aside class="sidebar">
<div class="widget">
<h3>关于我们</h3>
<p>这是一个简短的网站简介，告诉访问者您的网站是关于什么的。</p>
</div>
<div class="widget">
<h3>热门文章</h3>
<ul>
<li><a href="#">如何学习 DIV+CSS 布局</a></li>
<li><a href="#">响应式网页设计入门</a></li>
<li><a href="#">HTML5 新特性详解</a></li>
</ul>
</div>
<div class="widget">
<h3>联系我们</h3>
<p>邮箱: contact@example.com</p>
<p>电话: 138-0000-0000</p>
</div>
</aside>
</div>
</main>
<!-- 4. 页脚：通常包含版权信息、备案号等 -->
<footer class="main-footer">
<div class="container">
<p>© 2025 我的网站. 保留所有权利. | <a href="#">隐私政策</a> | <a href="#">使用条款</a></p>
</div>
</footer>
</body>
</html>
CSS 代码 (style.css)
这个 CSS 文件负责网页的所有样式，包括布局、颜色、字体、间距等，注释非常详细，解释了每一部分的作用。
/* --- 全局样式和变量 --- */
/* 使用 CSS 变量方便统一管理颜色主题 */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-color: #f4f4f4;
--text-color: #333;
--light-gray: #e9ecef;
--white: #ffffff;
}
/* 重置默认浏览器样式，使布局更可控 */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 盒模型计算方式，更符合直觉 */
}
body {
font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", sans-serif; /* 设置中文字体 */
line-height: 1.6; /* 行高，提升可读性 */
background-color: var(--background-color);
color: var(--text-color);
}
a {
text-decoration: none; /* 去掉链接下划线 */
color: var(--primary-color);
}
a:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
img {
max-width: 100%; /* 图片最大宽度为100%，防止溢出容器 */
height: auto;
}
h1, h2, h3 {
margin-bottom: 15px;
line-height: 1.2;
}
/* --- 布局容器 --- */
/* .container 用于居中内容并限制最大宽度，是现代网页设计的常用模式 */
.container {
width: 90%;
max-width: 1100px;
margin: 0 auto; /* 上下无间距，左右自动（实现居中） */
padding: 0 15px; /* 左右内边距，防止内容贴边 */
}
/* --- 页头 --- */
.main-header {
background: var(--white);
padding: 20px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 添加轻微阴影，增加层次感 */
}
.logo {
font-size: 24px;
font-weight: bold;
color: var(--text-color);
}
/* --- 导航栏 --- */
.main-nav {
background: var(--secondary-color);
}
.main-nav ul {
list-style: none; /* 去掉列表项前的点 */
display: flex; /* 使用 Flexbox 实现水平排列 */
justify-content: space-around; /* 项目之间平均分布 */
}
.main-nav a {
color: var(--white);
padding: 15px;
display: block; /* 让 a 填满整个 li */
text-align: center;
transition: background-color 0.3s ease; /* 添加过渡效果 */
}
.main-nav a:hover,
.main-nav a.active {
background-color: var(--primary-color);
}
/* --- 主体内容区 --- */
.main-content {
padding: 30px 0;
display: flex; /* 使用 Flexbox 布局，将内容区和侧边栏并排 */
gap: 30px; /* 设置子元素之间的间距 */
}
区 */
.content {
flex: 3; /* 内容区占据 3 份空间 */
}
.post {
background: var(--white);
margin-bottom: 30px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.post-meta {
color: var(--secondary-color);
font-size: 14px;
margin-bottom: 10px;
}
.read-more {
display: inline-block;
margin-top: 15px;
font-weight: bold;
}
/* 侧边栏 */
.sidebar {
flex: 1; /* 侧边栏占据 1 份空间 */
}
.widget {
background: var(--white);
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.widget h3 {
border-bottom: 2px solid var(--light-gray);
padding-bottom: 10px;
margin-bottom: 15px;
}
.widget ul {
list-style: none;
}
.widget ul li {
margin-bottom: 10px;
}
/* --- 页脚 --- */
.main-footer {
background: var(--secondary-color);
color: var(--white);
text-align: center;
padding: 20px 0;
margin-top: 30px;
}
.main-footer p {
margin: 0;
}
.main-footer a {
color: var(--white);
}
/* --- 响应式设计 --- */
/* 当屏幕宽度小于 768px（如平板和手机）时，应用以下样式 */
@media (max-width: 768px) {
.main-content {
flex-direction: column; /* 内容区和侧边栏从并排变为上下堆叠 */
}
.main-nav ul {
flex-direction: column; /* 导航菜单从水平变为垂直 */
}
.container {
width: 95%; /* 在小屏幕上稍微放宽容器宽度 */
}
}
如何使用
- 创建文件：按照上面的文件结构，创建
index.html和style.css。 - 复制代码：将对应的 HTML 和 CSS 代码分别粘贴到文件中。
- 保存文件：确保两个文件都在同一个文件夹
my-website中。 - 打开网页：用浏览器（如 Chrome, Firefox, Edge）打开
index.html文件，你就可以看到一个布局完整、样式美观的网页了。
模板特点
- 结构清晰：使用
<header>,<nav>,<main>,<aside>,<footer>等语义化标签，代码易于维护。 - 布局灵活：采用 Flexbox 布局，可以轻松实现内容区和侧边栏的并排或堆叠。
- 易于扩展：
.container类让内容居中并限制宽度，是构建任何复杂页面的基础。 - 响应式：通过
@media查询，模板在桌面和移动设备上都能良好显示。 - 注释详尽：CSS 代码中有大量注释，方便你理解每一行样式的作用，方便后续修改。
这个模板是一个绝佳的起点,你可以基于它来构建任何类型的中文网站。
（图片来源网络，侵删）
（图片来源网络，侵删）
