如何 - 建立一个网站

了解如何创建一个快速且出色的响应式网站，该网站可在所有设备（PC、笔记本电脑、平板电脑和手机）上运行。

使用 CSS 框架创建网站

演示

亲自试一试

曾经听说过91xjr 空间？在这里您可以从头开始创建您的网站或使用模板。

免费开始❯

* 无需信用卡

一个"Layout Draft"

在建立网站之前绘制页面设计的布局草稿总是明智的。

拥有"Layout Draft" 将使创建网站变得更加容易：

导航栏

幻灯片

乐队

乐队描述

文章

页脚

文档类型、元标记和 CSS

doctype 应将页面定义为 HTML5 文档：

<!DOCTYPE html>

元标记应将字符集定义为 UTF-8：

视口元标记应该使网站可以在所有设备和屏幕分辨率上运行：

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://www.91xjr.com/w3css/3/w3.css">
<body>



</body>
</html>

笔记：如果您想在没有 CSS 框架帮助的情况下从头开始创建网站，请阅读我们的如何制作网站教程。

创建页面内容

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

一个导航栏
幻灯片放映
一个标题
一些章节和文章
页脚

语义元素

HTML5 引入了几个新的语义元素。语义元素的使用很重要，因为它们定义了网页的结构，并帮助屏幕阅读器和搜索引擎正确阅读页面。

以下是一些最常见的语义 HTML 元素：

这个<部分>元素可用于定义具有相关内容的网站的一部分。

这个<文章>元素可用于定义单独的内容。

这个<标题>元素可用于定义标题（在文档、节或文章中）。

这个<页脚>元素可用于定义页脚（在文档、节或文章中）。

这个<导航>元素可用于定义导航链接的容器。

在本教程中，我们将使用语义元素。

但是，如果您想使用 <div> 元素，则由您决定。

导航栏

在我们的"Layout Draft" 上有一个"Navigation bar"。

<nav class="w3-bar w3-black">
<a href="#home" class="w3-button w3-bar-item">Home</a>
<a href="#band" class="w3-button w3-bar-item">Band</a>
<a href="#tour" class="w3-button w3-bar-item">Tour</a>
<a href="#contact" class="w3-button w3-bar-item">Contact</a>
</nav>

亲自试一试 »

我们可以使用一个<导航>或 <div> 元素作为导航链接的容器。

这个w3-酒吧类是导航链接的容器。

这个w3-黑色类定义导航栏的颜色。

这个w3 栏项目和w3按钮类设置栏内导航链接的样式。

幻灯片放映

在"Layout Draft" 上我们有一个"Slide show"。

对于幻灯片放映，我们可以使用<部分>或 <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 秒更改一次图片：

// Automatic Slideshow - change image every 3 seconds
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);
}

亲自试一试 »

章节和文章

查看"Layout Draft"，我们可以看到下一步是创建文章。

首先我们将创建一个<部分>或包含波段信息的 <div> 元素：

<section class="w3-container w3-center" style="max-width:600px">
<h2 class="w3-wide">THE BAND</h2>
<p class="w3-opacity"><i>We love music</i></p>
</section>

亲自试一试 »

这个w3-容器类负责标准填充。

这个w3-中心课程以内容为中心。

这个w3 宽类提供了更广泛的标题。

这个w3-不透明度类提供文本透明度。

这个最大宽度样式设置带描述部分的最大值。

然后我们将添加一段描述乐队的段落：

<section class="w3-container w3-content w3-center" style="max-width:600px">
<p class="w3-justify">
We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>

亲自试一试 »

这个w3-对齐类调整文本的右边距和左边距。

然后创建一个<部分>或 <div> 带有<文章>或 <div> 关于每个乐队成员：

<section class="w3-row-padding w3-center w3-light-grey">
<article class="w3-third">
    <p>John</p>
    <img src="img_bandmember.jpg" alt="Random Name" style="width:100%">
</article>
<article class="w3-third">
    <p>Paul</p>
    <img src="img_bandmember.jpg" alt="Random Name" style="width:100%">
</article>
<article class="w3-third">
    <p>Ringo</p>
    <img src="img_bandmember.jpg" alt="Random Name" style="width:100%">
</article>
</section>

亲自试一试 »

页脚

最后我们将使用一个<页脚>或 <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">
Powered by <a href="https://www.91xjr.com/w3css/default.html" target="_blank">w3.css</a>
</p>
</footer>

亲自试一试 »

这个发发类是 Font Awesome Icon 类。

要使用这些类，您必须链接到 Font Awesome 库：

要了解有关使用图标的更多信息，请访问我们的图标教程。