Учебники

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

Январь 5, 2019

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

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

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

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

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

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

  • Перейдите на https://purecss.io/start/, чтобы загрузить последнюю доступную версию.

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

Перейдите на https://purecss.io/start/, чтобы загрузить последнюю доступную версию.

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

пример

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

Live Demo

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="pure-min.css">
	  
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }
      </style>
	  
   </head>
  
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

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

CDN основанная версия

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

В этом руководстве мы используем версию библиотеки yui.yahooapis.com CDN.

пример

Теперь давайте перепишем приведенный выше пример, используя pure.css из PureCSS.io CDN.

Live Demo 

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }
      </style>
   </head>
  
   <body>
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-3"><p>First Column</p></div>
            <div class = "pure-u-1-3"><p>Second Column</p></div>
            <div class = "pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

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

40
Share: