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

W3CSS 案例:页眉和页脚



分离容器

为了可能为标题定义单独的类。使用单独的 <div> 元素将标题与其余内容分开:

Example

<div class="w3-container">
  <h1>My First W3.CSS Website!</h1>
  <p>This site will grow as we add more ...</p>
</div>

<div class="w3-container">
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>
尝试一下 »

颜色类

颜色类定义元素的颜色。

以下实例为第一个 <div> 元素添加颜色:

Example

<div class="w3-container w3-light-grey">
  <h1>My First W3.CSS Website!</h1>
  <p>This site will grow as we add more ...</p>
</div>

<div class="w3-container">
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>
尝试一下 »

尺寸类

尺寸类定义元素的文本大小。

以下实例将两个头元素添加尺寸:

Example

<div class="w3-container w3-light-grey">
  <h1 class="w3-jumbo">My First W3.CSS Website!</h1>
  <p class="w3-xxlarge">This sage will grow as we add more ...</p>
</div>

<div class="w3-container">
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>
尝试一下 »

使用语义元素

如果你喜欢遵循HTML5语义建议。请做!

Note 如果你使用 <div> 或 <header> 对于 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://www.w3schools.com/lib/w3.css">
<body>

<header class="w3-container w3-light-grey">
  <h1 class="w3-jumbo">My first W3.CSS website!</h1>
  <p class="w3-xxlarge">This site will grow as we add more ...</p>
</header>

<div class="w3-container">
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>

<footer class="w3-container">
  <p>This is my footer</p>
</footer>

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