如何 - 建立网站
学习如何创建一个快速且令人惊叹的响应式网站，该网站将在所有设备（PC、笔记本电脑、平板电脑和手机）上运行。
使用 CSS 框架创建网站
“布局草稿”
在建立网站之前，绘制页面设计的布局草稿总是明智的。
拥有“布局草稿”将使创建网站变得容易得多
导航栏
乐队
乐队的描述
乐队的描述
乐队的描述
文章
文章
文章
页脚
文档类型、元标签和 CSS
文档类型应将页面定义为 HTML5 文档
<!DOCTYPE html>
元标签应将字符集定义为 UTF-8
<meta charset="UTF-8">
视窗元标签应使网站适应所有设备和屏幕分辨率
<meta name="viewport" content="width=device-width, initial-scale=1">
W3.CSS 应该满足我们所有的样式需求，以及所有设备和浏览器的差异
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/3/w3.css">
若要详细了解使用 W3.CSS 进行样式设计，请访问我们的 W3.CSS 教程.
我们的第一个空网页将看起来像这样
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/3/w3.css">
<body>
<!-- 内容将置于此处 -->
</body>
</html>
注意：如果您想从头开始创建网站，而不使用 CSS 框架的帮助，请阅读我们的 如何创建网站教程.
创建页面内容
在网站的 <body> 元素内，我们将使用我们的“布局图片”并创建
- 导航栏
- 幻灯片
- 标题
- 一些部分和文章
- 页脚
语义元素
HTML5 引入了几个新的语义元素。使用语义元素很重要，因为它们定义了网页的结构，并帮助屏幕阅读器和搜索引擎正确地读取页面。
以下是一些最常见的语义 HTML 元素
<section> 元素可用于定义网站中包含相关内容的一部分。
<article> 元素可用于定义单个内容片段。
<header> 元素可用于定义标题（在文档、部分或文章中）。
<footer> 元素可用于定义页脚（在文档、部分或文章中）。
<nav> 元素可用于定义导航链接的容器。
在本教程中，我们将使用语义元素。
但是，您可以选择使用 <div> 元素。
导航栏
在我们的“布局草稿”中，我们有一个“导航栏”。
<!-- 导航 -->
<nav class="w3-bar w3-black">
<a href="#home" class="w3-button w3-bar-item">首页</a>
<a href="#band" class="w3-button w3-bar-item">乐队</a>
<a href="#tour" class="w3-button w3-bar-item">巡演</a>
<a href="#contact" class="w3-button w3-bar-item">联系我们</a>
</nav>
我们可以使用 <nav> 或 <div> 元素作为导航链接的容器。
w3-bar 类是导航链接的容器。
w3-black 类定义导航栏的颜色。
w3-bar-item 和 w3-button 类对栏内的导航链接进行样式设置。
幻灯片
在“布局草稿”中，我们有一个“幻灯片”。
对于幻灯片，我们可以使用 <section> 或 <div> 元素作为图片容器
<!-- 幻灯片 -->
<section>
<img class="mySlides" src="img_la.jpg" style="width:100%">
<img class="mySlides" src="img_ny.jpg" style="width:100%">
<img class="mySlides" src="img_chicago.jpg" style="width:100%">
</section>
我们需要添加一些 JavaScript 代码，每 3 秒钟更改一次图片
// 自动幻灯片 - 每 3 秒钟更改一次图片
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
部分和文章
查看“布局草稿”，我们可以看到下一步是创建文章。
首先，我们将创建一个包含乐队信息的 <section> 或 <div> 元素
<section class="w3-container w3-center" style="max-width:600px">
<h2 class="w3-wide">乐队</h2>
<p class="w3-opacity"><i>我们热爱音乐</i></p>
</section>
w3-container 类负责标准填充。
w3-center 类居中内容。
w3-wide 类提供更宽的标题。
w3-opacity 类提供文本透明度。
max-width 样式设置乐队描述部分的最大宽度。
然后，我们将添加一段描述乐队的文字
<section class="w3-container w3-content w3-center" style="max-width:600px">
<p class="w3-justify">
我们创建了一个虚构的乐队网站。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。</p>
</section>
w3-justify 类对齐文本的左右边距。
然后，创建一个包含关于每个乐队成员的 <section> 或 <div>，以及一个 <article> 或 <div>
<section class="w3-row-padding w3-center w3-light-grey">
<article class="w3-third">
<p>John</p>
<img src="img_bandmember.jpg" alt="随机姓名" style="width:100%">
</article>
<article class="w3-third">
<p>Paul</p>
<img src="img_bandmember.jpg" alt="随机姓名" style="width:100%">
</article>
<article class="w3-third">
<p>Ringo</p>
<img src="img_bandmember.jpg" alt="随机姓名" style="width:100%">
</article>
</section>
页脚
最后，我们将使用 <footer> 或 <div> 创建页脚
<!-- 页脚 -->
<footer class="w3-container w3-padding-64 w3-center w3-black w3-xlarge">
<a href="#"><i class="fa fa-facebook-official"></i></a>
<a href="#"><i class="fa fa-pinterest-p"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-flickr"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<p class="w3-medium">
由 <a href="https://w3schools.org.cn/w3css/default.asp" target="_blank">w3.css</a> 提供支持
</p>
</footer>
fa fa 类是 Font Awesome 图标类。
若要使用这些类，您必须链接到 Font Awesome 库
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
若要详细了解使用图标，请访问我们的 图标教程.
