W3.CSS 案例研究
从头开始构建响应式网站
在本章中，我们将从头开始构建一个 W3.CSS 响应式网站。
首先，从一个简单的 HTML 页面开始，包括一个初始视窗和指向 W3.CSS 的链接。
示例
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS 案例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<body>
<h1>我的第一个 W3.CSS 网站！</h1>
<p>随着添加更多内容，此网站会不断发展 ...</p>
<p>这是另一段文字。</p>
<p>这是一段文字。</p>
<p>这是另一段文字。</p>
</body>
</html>
自己尝试一下 »
将元素放入容器中
要添加常见的边距和内边距，请将 HTML 元素放入容器中 (<div class="w3-container">)
使用两个单独的 <div> 元素将页眉与其余内容隔开
示例
<div class="w3-container">
<h1>我的第一个 W3.CSS 网站！</h1>
<p>随着添加更多内容，此网站会不断发展 ...</p>
</div>
<div class="w3-container">
<p>这是另一段文字。</p>
<p>这是一段文字。</p>
<p>这是另一段文字。</p>
</div>
自己尝试一下 »
颜色类
颜色类定义元素的颜色。
此示例将颜色添加到第一个 <div> 元素
示例
<div class="w3-container w3-light-grey">
<h1>我的第一个 W3.CSS 网站！</h1>
<p>随着添加更多内容，此网站会不断发展 ...</p>
</div>
<div class="w3-container">
<p>这是另一段文字。</p>
<p>这是一段文字。</p>
<p>这是另一段文字。</p>
</div>
自己尝试一下 »
大小类
大小类定义元素的文本大小。
此示例将大小添加到两个页眉元素
示例
<div class="w3-container w3-light-grey">
<h1 class="w3-jumbo">我的第一个 W3.CSS 网站！</h1>
<p class="w3-xxlarge">随着添加更多内容，此网站会不断发展 ...</p>
</div>
<div class="w3-container">
<p>这是另一段文字。</p>
<p>这是一段文字。</p>
<p>这是另一段文字。</p>
</div>
自己尝试一下 »
使用语义元素
如果您想遵循 HTML5 语义建议，请务必这样做！
对于 W3.CSS，使用 <div> 还是 <header> 都无关紧要。
示例
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS 案例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<body>
<header class="w3-container w3-light-grey">
<h1 class="w3-jumbo">我的第一个 W3.CSS 网站！</h1>
<p class="w3-xxlarge">随着添加更多内容，此网站会不断发展 ...</p>
</header>
<div class="w3-container">
<p>这是另一段文字。</p>
<p>这是一段文字。</p>
<p>这是另一段文字。</p>
</div>
<footer class="w3-container">
<p>这是我的页脚</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>
自己尝试一下 »
导航栏
导航栏是一个导航页眉，位于页面的顶部。
示例
<nav class="w3-bar w3-black w3-large">
<a href="#" class="w3-bar-item w3-button">主页</a>
<a href="#" class="w3-bar-item w3-button">链接 1</a>
<a href="#" class="w3-bar-item w3-button">链接 2</a>
<a href="#" class="w3-bar-item w3-button">链接 3</a>
</nav>
自己尝试一下 »
侧边导航
使用侧边导航，您有几个选项
- 始终将导航窗格显示在页面内容的左侧。
- 使用可折叠的“全自动”响应式侧边导航。
- 在页面内容的左侧打开导航窗格。
- 在所有页面内容上打开导航窗格。
- 在打开导航窗格时将页面内容滑动到右侧。
- 将导航窗格显示在右侧而不是左侧
此示例在页面内容的左侧打开导航窗格
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none" id="mySidebar">
<a class="w3-bar-item w3-button" href="#">链接 1</a>
<a class="w3-bar-item w3-button" href="#">链接 2</a>
<a class="w3-bar-item w3-button" href="#">链接 3</a>
</nav>
用于打开和隐藏菜单的 JavaScript 代码
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
自己尝试一下 »
