如何创建 - 制作网站
了解如何创建适用于所有设备、PC、笔记本电脑、平板电脑和手机的响应式网站。
从头开始创建网站
"布局草稿"
在创建网站之前绘制页面设计的布局草稿可能是明智的:
导航栏
侧边内容
一些文字一些文字..
主要内容
一些文字一些文字..
一些文字一些文字..
一些文字一些文字..
页脚
第一步 - 基本 HTML 页面
HTML 是创建网站的标准标记语言，而 CSS 是描述 HTML 文档样式的语言。 我们将结合 HTML 和 CSS 来创建一个基本的网页。
注释:如果你不懂 HTML 和 CSS，我们建议 您首先要阅读我们的 HTML 教程。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page 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>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
亲自试一试 »
实例解析
<!DOCTYPE html>声明将此文档定义为 HTML5<html>元素是 HTML 页面的根元素<head>元素包含有关文档的元信息<title>元素指定文档的标题<meta>元素应将字符集定义为 UTF-8- 带有 name="viewport" 的
<meta>元素使网站在所有设备和屏幕分辨率上都看起来不错 <style>元素包含网站的样式（布局/设计）<body>元素包含可见的页面内容<h1>元素定义了一个大标题<p>元素定义了一个段落
创建页面内容
在我们网站的 <body> 元素中，我们将使用我们的布局草稿并创建:
- 标题
- 导航栏
- 主要内容
- 附加内容
- 页脚
标题
标题通常位于网站顶部（或顶部导航菜单的正下方）。 它通常包含徽标或网站名称:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
然后我们使用 CSS 来设置标题的样式:
.header {
padding: 80px;
/* 一些填充 */
text-align: center;
/* 将文本居中 */
background: #1abc9c;
/* 绿色背景 */
color: white;
/* 白色文字颜色 */
}
/* 增加 <h1> 元素的字体大小 */
.header h1 {
font-size: 40px;
}
导航栏
导航栏包含一个链接列表，可帮助访问者浏览您的网站:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</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 column */
.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 媒体查询章节中了解更多信息。
提示:要了解有关弹性盒布局模块的更多信息，阅读我们的 CSS 弹性盒章节。
什么是 box-sizing?
您可以轻松地并排创建三个浮动框。但是，当您添加一些扩大每个框的宽度的东西（例如填充或边框）时，框会损坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包含内边距和边框，确保内边距保持在框内并且不会中断。
您可以在我们的CSS Box Sizing 教程中了解有关 box-sizing 属性的更多信息。
页脚
最后，我们将添加一个页脚。
<div class="footer">
<h2>Footer</h2>
</div>
并设置样式:
.footer {
padding: 20px;
/* 一些填充 */
text-align: center;
/* 居中文本 */
background: #ddd;
/* 灰色背景 */
}
恭喜！ 您已经从零开始构建了一个响应式网站。
