W3.CSS 案例研究

从头开始构建响应式网站

在本章中，我们将从头开始构建一个 W3.CSS 响应式网站。

首先，从一个简单的 HTML 页面开始，其中包含一个初始视口和一个指向 W3.CSS 的链接。

示例

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.91xjr.com/w3css/4/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>

亲自试一试 »

将元素放入容器中

要添加通用边距和填充，请将 HTML 元素放入容器内 (<div class="w3-container">)

使用两个单独的 <div> 元素将标题与其余内容分开：

示例

<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> 元素添加颜色：

示例

<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>

亲自试一试 »

尺码等级

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

此示例为两个标头元素添加了大小：

示例

<div 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>
</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 语义建议。请这样做！

如果您使用 <div> 或 <header>，对于 W3.CSS 来说并不重要。

示例

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.91xjr.com/w3css/4/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>

亲自试一试 »

多列响应式布局

使用 W3.CSS 可以轻松创建多列响应式布局。

在不同的屏幕尺寸上查看时，列会自动重新排列。

一些网格规则：

从行类开始 <div class="w3-row-padding">
使用"w3-third"等预定义类快速制作网格列
将文本内容放置在网格列内

此示例演示如何创建三个等宽的列：

示例

<div class="w3-row-padding">
<div class="w3-third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

亲自试一试 »

此示例演示如何创建四个等宽的列：

示例

<div class="w3-row-padding">
<div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

亲自试一试 »

不同宽度的列

此示例创建一个三列布局，其中中间的列比第一列和最后一列宽：

示例

<div class="w3-row-padding">
<div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

亲自试一试 »

导航栏

导航栏是位于页面顶部的导航标题。

示例

亲自试一试»

侧面导航

通过侧面导航，您有多种选择：

始终将导航窗格显示在页面内容的左侧。
使用可折叠的"fully automatic"响应式侧边导航。
打开页面内容左侧的导航窗格。
打开所有页面内容的导航窗格。
打开导航窗格时将页面内容向右滑动。
在右侧而不是左侧显示导航窗格

此示例在页面内容的左侧部分打开导航窗格：

JavaScript 用于打开和隐藏菜单：

function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}

亲自试一试»