如何做 - 制作网站
了解如何创建一个响应式网站，该网站适用于所有设备，包括PC、笔记本电脑、平板电脑和手机。
从零开始创建网站
一个“布局草图”
在创建网站之前，绘制页面设计的布局草图是明智的
导航栏
侧边内容
一些文本一些文本..
主内容
一些文本一些文本..
一些文本一些文本..
一些文本一些文本..
页脚
第一步 - 基本HTML页面
HTML是创建网站的标准标记语言，CSS是描述HTML文档样式的语言。我们将结合HTML和CSS来创建一个基本的网页。
注意: 如果您不了解HTML和CSS，我们建议您先阅读我们的HTML教程。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>页面标题</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>我的网站</h1>
<p>一个由我创建的网站。</p>
</body>
</html>
自己动手试一试 »
示例解释
<!DOCTYPE html>声明定义此文档为HTML5<html>元素是HTML页面的根元素<head>元素包含有关文档的元信息<title>元素为文档指定一个标题<meta>元素应定义字符集为UTF-8<meta name="viewport">元素使网站在所有设备和屏幕分辨率上看起来都很好<style>元素包含网站的样式（布局/设计）<body>元素包含可见的页面内容<h1>元素定义一个大标题<p>元素定义一个段落
创建页面内容
在网站的<body>元素内部，我们将使用我们的“布局草图”来创建
- 一个页眉
- 一个导航栏
- 主内容
- 侧边内容
- 一个页脚
Header
页眉通常位于网站顶部（或顶部导航菜单下方）。它通常包含一个Logo或网站名称
<div class="header">
<h1>我的网站</h1>
<p>一个由我创建的网站。</p>
</div>
然后我们使用CSS来设置页眉的样式
.header {
padding: 80px; /* 一些内边距 */
text-align: center; /* 居中文本 */
background: #1abc9c; /* 绿色背景 */
color: white; /* 白色文本颜色 */
}
/* 增大<h1>元素的字体大小 */
.header h1 {
font-size: 40px;
}
导航栏
导航栏包含一个链接列表，帮助访问者浏览您的网站
<div class="navbar">
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#" class="right">链接</a>
</div>
使用CSS为导航栏设置样式
/* 样式化顶部导航栏 */
.navbar {
overflow: hidden; /* 隐藏溢出 */
background-color: #333; /* 深色背景色 */
}
/* 样式化导航栏链接 */
.navbar a {
float: left; /* 确保链接保持并排 */
display: block; /* 更改显示为块，以实现响应式（见下文） */
color: white; /* 白色文本颜色 */
text-align: center; /* 居中文本 */
padding: 14px 20px; /* 添加一些内边距 */
text-decoration: none; /* 删除下划线 */
}
/* 右对齐链接 */
.navbar a.right {
float: right; /* 将链接浮动到右侧 */
}
/* 悬停/鼠标移上时更改颜色 */
.navbar a:hover {
background-color: #ddd; /* 灰色背景色 */
color: black; /* 黑色文本颜色 */
}
内容
创建2列布局，分为“侧边内容”和“主内容”。
<div class="row">
<div class="side">...</div>
<div class="main">...</div>
</div>
我们使用CSS Flexbox来处理布局
/* 确保正确的大小 */
* {
box-sizing: border-box;
}
/* 列容器 */
.row {
display: flex;
flex-wrap: wrap;
}
/* 创建两个不相等的列，它们并排显示 */
/* 侧边栏/左列 */
.side {
flex: 30%; /* 设置侧边栏的宽度 */
background-color: #f1f1f1; /* 灰色背景色 */
padding: 20px; /* 一些内边距 */
}
/* 主列 */
.main {
flex: 70%; /* 设置主内容的宽度 */
background-color: white; /* 白色背景色 */
padding: 20px; /* 一些内边距 */
}
然后添加媒体查询以实现响应式布局。这将确保您的网站在所有设备（桌面、笔记本电脑、平板电脑和手机）上看起来都很棒。调整浏览器窗口大小以查看结果。
/* 响应式布局 - 当屏幕宽度小于700px时，使两列堆叠在彼此之上，而不是并排 */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* 响应式布局 - 当屏幕宽度小于400px时，使导航链接堆叠在彼此之上，而不是并排 */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
提示: 要创建不同类型的布局，只需更改flex宽度（但要确保它们加起来为100%）。
提示: 想知道@media规则是如何工作的吗？ 在我们的CSS媒体查询章节中了解更多。
提示: 要了解更多关于Flexbox布局模块的信息，阅读我们的CSS Flexbox章节。
什么是box-sizing?
您可以轻松创建三个并排的浮动框。但是，当您添加会放大每个框宽度（例如，内边距或边框）的元素时，该框会中断。box-sizing属性允许我们将内边距和边框包含在框的总宽度（和高度）中，确保内边距保留在框内且不会中断。
您可以在我们的CSS Box Sizing教程中了解更多关于box-sizing属性的信息。
页脚
最后，我们将添加一个页脚。
<div class="footer">
<h2>页脚</h2>
</div>
并为其设置样式
.footer {
padding: 20px; /* 一些内边距 */
text-align: center; /* 居中文本 */
background: #ddd; /* 灰色背景 */
}
恭喜！您已从零开始构建了一个响应式网站。
W3Schools Spaces
如果您想创建自己的网站并托管您的.html文件，请尝试我们的网站构建器，名为W3schools Spaces
