Учебники

W3.CSS — Настройка среды

Ноябрь 23, 2018

Есть два способа использования W3.CSS —

  • Локальная установка. Вы можете загрузить файл W3.CSS на свой локальный компьютер и включить его в свой HTML-код.

  • Версия на основе CDN. Вы можете включить файл W3.CSS в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка. Вы можете загрузить файл W3.CSS на свой локальный компьютер и включить его в свой HTML-код.

Версия на основе CDN. Вы можете включить файл W3.CSS в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка

  • Перейдите на https://www.w3schools.com/w3css/w3css_downloads.asp, чтобы загрузить последнюю доступную версию.

  • Затем поместите загруженный файл w3.css в каталог вашего сайта, например, / css.

Перейдите на https://www.w3schools.com/w3css/w3css_downloads.asp, чтобы загрузить последнюю доступную версию.

Затем поместите загруженный файл w3.css в каталог вашего сайта, например, / css.

пример

Теперь вы можете включить CSS- файл в ваш HTML-файл следующим образом: 

<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 основанная версия

Вы можете включить файл W3.CSS в свой HTML-код непосредственно из сети доставки контента (CDN). W3Schools.com предоставляет контент для последней версии.

Примечание. В этом руководстве мы используем версию библиотеки W3Schools.com CDN.

пример

Теперь давайте перепишем приведенный выше пример, используя библиотеку jQuery из W3Schools.com CDN.

Live Demo 

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

Это даст следующий результат —

47
Share: