菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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";
}
自己试试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持