今天分享一个标准 HTML5 + CSS3 响应式网页框架，这是企业级、可直接用于生产环境的标准前端框架，遵循 HTML5 语义化 + CSS3 现代规范，包含完整结构、响应式布局、基础样式、导航、页脚、移动端适配，开箱即用。
网页演示
网页源码
html
<!DOCTYPE html>
<!-- HTML5 标准文档声明 -->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 移动端响应式必备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标准 HTML5+CSS3 网页框架</title>
<meta name="description" content="通用响应式网页模板">
<meta name="author" content="前端模板">
<!-- CSS3 样式 -->
<style>
/* ====================== 全局重置 & 基础样式 ====================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* CSS3 盒模型，标准写法 */
}
/* 平滑滚动（CSS3 特性） */
html {
scroll-behavior: smooth;
}
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
/* 容器：居中 + 最大宽度（响应式核心） */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* ====================== 头部 & 导航 ====================== */
header {
background: #2c3e50;
color: white;
padding: 1rem 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* CSS3 阴影 */
position: sticky; /* CSS3 粘性定位 */
top: 0;
z-index: 999;
}
.logo {
float: left;
font-size: 1.5rem;
font-weight: bold;
}
nav {
float: right;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
margin-left: 2rem;
}
nav ul li a {
color: white;
text-decoration: none;
transition: color 0.3s; /* CSS3 过渡动画 */
}
nav ul li a:hover {
color: #3498db; /* CSS3 悬停效果 */
}
/* ====================== 主体内容 ====================== */
.hero {
background: linear-gradient(135deg, #3498db, #2980b9); /* CSS3 渐变 */
color: white;
text-align: center;
padding: 6rem 0;
margin-bottom: 2rem;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 2rem;
}
.btn {
display: inline-block;
padding: 12px 24px;
background: white;
color: #2980b9;
border-radius: 5px; /* CSS3 圆角 */
text-decoration: none;
font-weight: bold;
transition: all 0.3s;
}
.btn:hover {
background: #f1f1f1;
transform: translateY(-3px); /* CSS3 位移 */
}
/* 内容区块 */
.section {
padding: 4rem 0;
background: white;
margin-bottom: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.section h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 3rem;
color: #2c3e50;
}
/* 栅格布局（CSS3 Flex） */
.grid {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.col {
flex: 1;
min-width: 280px; /* 自动换行 */
padding: 2rem;
background: #f8f9fa;
border-radius: 8px;
text-align: center;
}
.col h3 {
margin-bottom: 1rem;
color: #2980b9;
}
/* ====================== 页脚 ====================== */
footer {
background: #2c3e50;
color: white;
text-align: center;
padding: 2rem 0;
margin-top: 2rem;
}
/* ====================== 移动端适配（媒体查询） ====================== */
@media (max-width: 768px) {
.logo, nav, nav ul li {
float: none;
text-align: center;
margin: 0.5rem 0;
}
.hero h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<!-- ====================== 页面结构 ====================== -->
<!-- 头部 -->
<header class="clearfix">
<div class="container">
<div class="logo">LOGO</div>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#service">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</div>
</header>
<!-- 轮播/首屏区域 -->
<section class="hero" id="home">
<div class="container">
<h1>HTML5 + CSS3 标准网页框架</h1>
<p>响应式布局、语义化标签、CSS3现代特性、移动端适配，企业级通用模板</p>
<a href="#service" class="btn">查看服务</a>
</div>
</section>
<!-- 主体内容 -->
<main class="container">
<!-- 关于我们 -->
<section class="section" id="about">
<h2>关于我们</h2>
<p style="text-align:center;max-width:800px;margin:0 auto;">
这是基于 HTML5 语义化标签 + CSS3 构建的标准网页框架，支持所有现代浏览器，完美适配手机、平板、PC。
</p>
</section>
<!-- 服务项目 -->
<section class="section" id="service">
<h2>我们的服务</h2>
<div class="grid">
<div class="col">
<h3>网页设计</h3>
<p>HTML5+CSS3 响应式设计，美观兼容</p>
</div>
<div class="col">
<h3>前端开发</h3>
<p>现代化前端技术栈，高性能交互</p>
</div>
<div class="col">
<h3>优化适配</h3>
<p>全设备兼容，加载速度优化</p>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer id="contact">
<div class="container">
<p>© 2026 标准 HTML5+CSS3 网页框架 | 版权所有</p>
</div>
</footer>
</body>
</html>
框架核心特性（标准规范）
1. HTML5 语义化标签
使用
符合 SEO 优化 + 浏览器可读性标准
包含完整文档声明、语言、视口、描述等必备配置
2. CSS3 现代特性
CSS3 盒模型 box-sizing: border-box
渐变、阴影、圆角、过渡、 transform 动画
Flex 弹性布局（主流响应式方案）
粘性导航、平滑滚动
统一的全局重置样式
3. 响应式设计
自动适配 PC / 平板 / 手机
媒体查询 @media 移动端适配
弹性栅格系统，自动换行
4. 工程化结构
容器居中 .container
清除浮动 .clearfix
按钮通用类 .btn
区块样式 .section
栅格布局 .grid + .col
总结
这是最通用、最标准、最简洁的 HTML5+CSS3 基础框架，无任何第三方依赖（不引 Bootstrap/JQuery），纯原生代码，适合学习、毕设、企业官网、 landing page 等所有场景。
