制作网站

创建于 2024-12-03 / 27

字体： [默认] [大] [更大]

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

从头开始创建网站

Demo 亲自试一试

"布局草稿"

在创建网站之前绘制页面设计的布局草稿可能是明智的:

标题

导航栏

侧边内容

一些文字一些文字..

主要内容

一些文字一些文字..

页脚

第一步 - 基本 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;
}

亲自试一试 »

导航栏

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

使用 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 列布局，分为"侧边内容" 和"主要内容"。

我们使用 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; /* 灰色背景 */
}

亲自试一试 »

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

0 人点赞过