W3.CSS-环境设置

如何使用W3.CSS?

使用W3.CSS有两种方法:

  • 本地安装-您可以在本地计算机上下载W3.CSS文件,并将其包含在HTML代码中。
  • 基于CDN的版本-您可以直接从Content Delivery Network(CDN)将W3.CSS文件包含到HTML代码中。

本地安装

  • 转到https://www.w3schools.com/w3css/w3css_downloads.asp下载可用的最新版本。
  • 然后,将下载的w3.css文件放在您网站的目录中,例如/ css。

现在,您可以在HTML文件中包含css文件,如下所示:

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

基于CDN的版本

您可以直接从Content Delivery Network(CDN)将W3.CSS文件包含到HTML代码中。W3Schools.com提供最新版本的内容。

注意-在本教程中,我们一直使用W3Schools.com CDN版本的库。

现在,让我们使用W3Schools.com CDN中的jQuery库重写上述示例。

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width =  device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/w3css/948.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2020年11月3日 下午3:13
下一篇 2020年11月3日 下午3:16

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注