W3.CSS Case(实例)

2020-12-01 16:58 更新

从头开始构建一个响应性网站

在本章中,我们将从头开始构建一个 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 语义建议。请做!

对于 W3.CSS,使用或都没有关系。

实例

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


尝试一下 »

侧面导航

使用侧面导航时,您有几种选择:

  • 始终在页面内容的左侧显示导航窗格。
  • 使用可折叠的“全自动”响应式侧面导航。
  • 打开页面内容左侧的导航窗格。
  • 在所有页面内容上打开导航窗格。
  • 打开导航窗格时,将页面内容向右滑动。
  • 在右侧而不是左侧显示导航窗格

本示例打开页面内容左侧上方的导航窗格:

<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";
}

尝试一下 »


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号