如何制作网站

了解如何创建适用于所有设备（PC、笔记本电脑、平板电脑和手机）的响应式网站。

从头开始创建一个网站

演示

亲自试一试

一个"Layout Draft"

在创建网站之前绘制页面设计的布局草稿是明智的做法：

标头

导航栏

侧面内容

一些文字一些文字..

主要内容

一些文字一些文字..

页脚

第一步 - 基本 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>element 是 HTML 页面的根元素
这个<head>元素包含有关文档的元信息
这个<title>元素指定文档的标题
这个<meta>元素应将字符集定义为 UTF-8
这个<meta>name="viewport" 的元素使网站在所有设备和屏幕分辨率上看起来都很好
这个<style>元素包含网站的样式（布局/设计）
这个<body>元素包含可见的页面内容
这个<h1>元素定义一个大标题
这个<p>元素定义一个段落

创建页面内容

在 - 的里面<body>在我们网站的元素中，我们将使用 "Layout Draft" 并创建：

一个标题
一个导航栏
主要内容
侧面内容
页脚

标头

标题通常位于网站的顶部（或顶部导航菜单的正下方）。它通常包含徽标或网站名称：

<div class="header">
<h1>My Website</h1>
<p>A website created by me.</p>
</div>

然后我们使用 CSS 来设置标题的样式：

.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c; /* green background */
color: white; /* white text color */
}

/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}

亲自试一试 »

导航栏

导航栏包含一系列链接，可帮助访问者浏览您的网站：

使用 CSS 设置导航栏样式：

/* Style the top navigation bar */
.navbar {
  overflow: hidden; /* Hide overflow */
  background-color: #333; /* Dark background color */
}

/* Style the navigation bar links */
.navbar a {
float: left; /* Make sure that the links stay side-by-side */
display: block; /* Change the display to block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center; /* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none; /* Remove underline */
}

/* Right-aligned link */
.navbar a.right {
float: right; /* Float a link to the right */
}

/* Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
  color: black; /* Black text color */
}

亲自试一试 »

内容

创建一个 2 列布局，分为 "side content" 和 "main content"。

我们使用 CSS Flexbox 来处理布局：

/* Ensure proper sizing */
* {
box-sizing: border-box;
}

/* Column container */
.row {
display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%; /* Set the width of the sidebar */
  background-color: #f1f1f1; /* Grey background color */
  padding: 20px; /* Some padding */
}

/* Main column */
.main {
  flex: 70%; /* Set the width of the main content */
  background-color: white; /* White background color */
  padding: 20px; /* Some padding */
}

亲自试一试 »

然后添加媒体查询以使布局响应。这将确保您的网站在所有设备（台式机、笔记本电脑、平板电脑和手机）上看起来都不错。调整浏览器窗口大小以查看结果。

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
    flex-direction: column;
}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

亲自试一试 »

提示：要创建不同类型的布局，只需更改 Flex 宽度（但确保其加起来为 100%）。

提示：您想知道@media 规则如何运作吗？在我们的 CSS 媒体查询章节中阅读更多相关内容。

提示：要了解有关灵活框布局模块的更多信息，阅读我们的 CSS Flexbox 章节。

什么是盒子尺寸？

您可以轻松地并排创建三个浮动框。但是，当您添加一些东西来扩大每个框的宽度（例如内边距或边框）时，框就会破裂。这box-sizing属性允许我们将内边距和边框包含在框的总宽度（和高度）中，确保内边距保留在框内并且不会破坏。

您可以在我们的文章中阅读有关 box-sizing 属性的更多信息CSS 框大小调整教程。

页脚

最后，我们将添加页脚。

<div class="footer">
<h2>Footer</h2>
</div>

并设计它的样式：

.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd; /* Grey background */
}

亲自试一试 »

恭喜！您从头开始构建了一个响应式网站。

91xjr 空间

如果您想创建自己的网站并托管 .html 文件，请尝试我们的网站建设者，称为W3schools 空间：

91xjr Spaces

获取您自己的网站