W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 案例:W3.CSS 首页



开始构建W3.CSS网站

在接下来的章节中,我们将从头开始构建一个W3.CSS网站。

我们将从一个简单的HTML页面开始,然后添加越来越多的组件,直到我们有一个功能齐全的响应网站。

首先,从一个简单的HTML页面开始:

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>

<body>
  <h1>My first W3.CSS website!</h1>
  <p>This site will grow as we add more ...</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</body>

</html>
尝试一下 »

添加 W3.CSS

然后,添加一个 viewport 和 链接到 W3.CSS。

Example

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.w3schools.wang/w3.css">

<body>
  <h1>My first W3.CSS website!</h1>
  <p>This site will grow as we add more ...</p>
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</body>

</html>
尝试一下 »

将元素放到容器中

现在我们需要为所有元素添加一个通用的margin和padding。

要实现这一点,将所有元素放在一个容器 (<div class="w3-container">) 中:

Example

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.w3schools.wang/w3.css">
<body>

<div class="w3-container">
  <h1>My first W3.CSS website!</h1>
  <p>This site will grow as we add more ...</p>
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>

</body>
</html>
尝试一下 »