W3.CSS Case（实例）
从头开始构建一个响应性网站
在本章中，我们将从头开始构建一个 W3.CSS 响应式网站。
首先，从一个简单的 HTML 页面开始，该页面具有一个初始视口和一个指向 W3.CSS 的链接。
实例
<link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3.css">
<body>
<h1>我的第一个W3.CSS网站!</h1>
<p>这个网站会随着我们的增加而增长 ...</p>
<p>这是一个段落.</p>
<p>这是另一个段落.</p>
<p>这是一个段落.</p>
<p>这是另一个段落.</p>
</body>
尝试一下 »
将元素放入容器
要添加公共边距和填充，请将 HTML 元素放入容器中（<div class =“ w3-container”>）
使用两个单独的 <div> 元素将标题与其余内容分开：
实例
<div class="w3-container">
<h1>我的第一个W3.CSS网站!</h1>
<p>这个网站会随着我们的增加而增长 ...</p>
</div>
<p>这是一个段落.</p>
<p>这是另一个段落.</p>
<p>这是一个段落.</p>
<p>这是另一个段落.</p>
尝试一下 »
颜色分类
颜色类定义元素的颜色。
本示例向第一个 <div> 元素添加颜色：
实例
<div class="w3-container w3-light-grey">
<h1>我的第一个W3.CSS网站!</h1>
<p>这个网站会随着我们的增加而增长 ...</p>
</div>
<p>这是一个段落.</p>
<p>这是另一个段落.</p>
<p>这是一个段落.</p>
<p>这是另一个段落.</p>
尝试一下 »
尺寸等级
大小类定义元素的文本大小。
本示例向两个标头元素添加大小：
实例
<div class="w3-container w3-light-grey">
<h1 class="w3-jumbo">我的第一个W3.CSS网站!</h1>
<p class="w3-xlarge">这个网站会随着我们的增加而增长 ...</p>
</div>
<div class="w3-container">
<p>这是一个段落.</p>
<p>这是另一个段落.</p>
<p>这是一个段落.</p>
<p>这是另一个段落.</p>
</div>
尝试一下 »
使用语义元素
如果您想遵循 HTML5 语义建议。请做！
实例
<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>
<p>这是另一个段落.</p>
</div>
<footer class="w3-container w3-light-grey">
<p>这是一个页脚</p>
</footer>
尝试一下 »
多列响应式布局
使用 W3.CSS，可以轻松创建多列响应式布局。
在不同屏幕尺寸上查看时，列将自动重新排列。
一些网格规则：
- 从行类 <div class =“ w3-row-padding”>开始
- 使用预定义的类（例如“ w3-third”）快速创建网格列
- 将您的文本内容放在网格列中
本示例说明如何创建宽度相等的三列：
实例
<div class="w3-row-padding">
<div class="w3-third">
<p>最快的脚步不是跨越，而是继续；最慢的步伐不是缓慢，而是徘徊；最好的道路不是大道，而是坦荡；最险的道路不是陡坡，而是陷阱；最大的幸福不是得到，而是拥有.</p>
</div>
<div class="w3-third">
<p>在这个世界上取得成就的人，都努力去寻找他们想要的机会，如果找不到机会，他们便自己创造机会.</p>
</div>
<div class="w3-third">
<p><strong>在大屏幕上，内容将显示为三列布局。在一个小屏幕上，内容会自动调整为单列。调整浏览器窗口的大小以查看效果.</strong></p>
</div>
</div>
尝试一下 »
本示例说明如何创建四个宽度相等的列：
实例
<div class="w3-row-padding">
<div class="w3-quarter">
<p>最快的脚步不是跨越，而是继续；最慢的步伐不是缓慢，而是徘徊；最好的道路不是大道，而是坦荡；最险的道路不是陡坡，而是陷阱；最大的幸福不是得到，而是拥有.</p>
</div>
<div class="w3-quarter">
<p>在这个世界上取得成就的人，都努力去寻找他们想要的机会，如果找不到机会，他们便自己创造机会.</p>
</div>
<div class="w3-quarter">
<p><strong>在大屏幕上，内容将显示为三列布局。在一个小屏幕上，内容会自动调整为单列。调整浏览器窗口的大小以查看效果.</strong></p>
</div>
<div class="w3-quarter">
<p><strong>伟人之所以伟大，是因为他与别人共处逆境时，别人失去了信心，他却下决心实现自己的目标.</strong></p>
</div>
</div>
尝试一下 »
不同宽度的列
本示例创建一个三列布局，其中中间的列比第一列和最后一列宽：
实例
<div class="w3-row-padding">
<div class="w3-quarter">
<p>最快的脚步不是跨越，而是继续；最慢的步伐不是缓慢，而是徘徊；最好的道路不是大道，而是坦荡；最险的道路不是陡坡，而是陷阱；最大的幸福不是得到，而是拥有.</p>
</div>
<div class="w3-half">
<p><strong>在这个世界上取得成就的人，都努力去寻找他们想要的机会，如果找不到机会，他们便自己创造机会.</strong></p>
</div>
<div class="w3-quarter">
<p>在大屏幕上，内容将显示为三列布局。在一个小屏幕上，内容会自动调整为单列。调整浏览器窗口的大小以查看效果.</p>
</div>
</div>
尝试一下 »
导航栏
导航栏是放置在页面顶部的导航标题。
实例
<div 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>
</div>
尝试一下 »
侧面导航
使用侧面导航时，您有几种选择：
- 始终在页面内容的左侧显示导航窗格。
- 使用可折叠的“全自动”响应式侧面导航。
- 打开页面内容左侧的导航窗格。
- 在所有页面内容上打开导航窗格。
- 打开导航窗格时，将页面内容向右滑动。
- 在右侧而不是左侧显示导航窗格
本示例打开页面内容左侧上方的导航窗格：
<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：
实例
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
尝试一下 »