如何 - 制作网站
了解如何创建一个响应式网站，该网站将在所有设备（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>
自己尝试 »
示例解释
- The
<!DOCTYPE html>声明定义此文档为 HTML5 - The
<html>元素是 HTML 页面 的根元素 - The
<head>元素包含有关文档的元信息 - The
<title>元素指定文档的标题 - The
<meta>元素应定义字符集为 UTF-8 - The
<meta>元素名称为“viewport”，使网站在所有设备和屏幕分辨率上看起来都很好 - The
<style>元素包含网站的样式（布局/设计） - The
<body>元素包含可见的页面内容 - The
<h1>元素定义一个大标题 - The
<p>元素定义一个段落
创建页面内容
在网站的 <body> 元素内，我们将使用我们的“布局草稿”并创建
- 页眉
- 导航栏
- 主要内容
- 侧边内容
- 页脚
页眉
页眉通常位于网站的顶部（或顶部导航菜单下方）。它通常包含徽标或网站名称
<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; /* 一些填充*/
}
然后添加媒体查询以使布局响应式。这将确保您的网站在所有设备（台式机、笔记本电脑、平板电脑和手机）上看起来都很好。调整浏览器窗口大小以查看结果。
/* 响应式布局 - 当屏幕宽度小于 700 像素时，使两列堆叠在一起，而不是并排排列*/
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* 响应式布局 - 当屏幕宽度小于 400 像素时，使导航链接堆叠在一起，而不是并排排列*/
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
提示：要创建不同类型的布局，只需更改 flex 宽度（但要确保总和为 100%）。
提示：您是否想知道 @media 规则是如何工作的？阅读我们 CSS 媒体查询章节中的更多信息.
提示：要了解有关弹性盒布局模块的更多信息，阅读我们的 CSS Flexbox 章节.
什么是 box-sizing？
您可以轻松地创建三个并排浮动的盒子。但是，当您添加使每个盒子宽度增大的内容（例如填充或边框）时，盒子将断裂。The box-sizing 属性允许我们包含填充和边框在盒子的总宽度（和高度）内，确保填充保持在盒子的内部，并且不会断裂。
您可以在我们的 CSS 盒子大小教程 中阅读有关 box-sizing 属性的更多信息。
页脚
最后，我们将添加一个页脚。
<div class="footer">
<h2>页脚</h2>
</div>
并对其进行样式化
.footer {
padding: 20px; /* 一些填充*/
text-align: center; /* 居中文本*/
background: #ddd; /* 灰色背景*/
}
恭喜！您从头开始构建了一个响应式网站。
W3Schools Spaces
如果您想创建自己的网站并托管您的 .html 文件，请尝试我们的网站构建器，名为W3schools Spaces
