8、网页响应式改造：AWD 与 RWD 技术详解

kmeans3miner

于 2025-07-05 14:13:09 发布

阅读量20

点赞数

CC 4.0 BY-SA版权

分类专栏：响应式网页设计与HTML5、CSS3的深度融合文章标签：响应式网页设计 RWD AWD

本文链接：https://blog.csdn.net/kmeans3miner/article/details/149385400

响应式网页设计与HTML5、CSS3的深度融合专栏收录该内容

19 篇文章 ¥399.00 ¥499.90

订阅专栏

超级会员免费看

网页响应式改造：AWD 与 RWD 技术详解

1. 基础页面搭建

首先，我们来构建基础页面。页面的白色间隔为 20px，即导航栏右侧有 10px 边距，内容区左侧有 10px 边距。整体布局宽度计算为：220px 导航栏 + 710px 内容区 + 20px 间隔 + 10px 边距 = 960px。

以下是基础页面的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Retrofitting with Adaptive Web Design</title>
    <link href="css/styles.css" rel="stylesheet">
</head>
<body>
    <main class="container_12 clear">
      <header class="grid_12">Header</header>
      <nav class="grid_3">Nav</nav>
      <section class="grid_9">Content</section>
      <footer class="grid_12">Footer</footer>
    </main>
</body>
</html>

了解本专栏