Pure.CSS - 快速指南

上一頁
下一頁

Pure.CSS - 概述

Pure 是由 YAHOO 開發的層疊樣式表 (CSS)。它有助於建立更快、更美觀、更具響應性的網站。

它的一些主要特點如下：

  • 內建響應式設計
  • 具有最小佔用空間的標準 CSS
  • 一組小型、響應式的 CSS 模組
  • 免費使用

響應式設計

Pure 具有內建的響應式設計，因此使用 Pure 建立的網站會根據裝置大小重新設計自身。Pure 擁有一個 12 列的移動優先流體網格，支援小型、大型和中型螢幕尺寸的響應式類。

Pure 類以這樣的方式建立，使得網站可以適應任何螢幕尺寸。使用 Pure 建立的網站與 PC、平板電腦和移動裝置完全相容。

標準 CSS

Pure 僅使用標準 CSS，並且非常易於學習。它不依賴於任何外部 JavaScript 庫，例如 jQuery。

可擴充套件性

Pure 在設計上非常簡潔和扁平化。它的設計考慮到了新增新的 CSS 規則比覆蓋現有 CSS 規則容易得多的事實。透過新增幾行 CSS，可以自定義 Pure 的外觀以與現有的 Web 專案協同工作。

它支援陰影和大膽的顏色。顏色和陰影在各種平臺和裝置上保持一致。最重要的是，它完全免費使用。

Pure.CSS - 環境設定

有兩種使用 Pure 的方法：

  • 本地安裝 - 您可以在本地機器上下載 pure.css 檔案，並將其包含在您的 HTML 程式碼中。

  • 基於 CDN 的版本 - 您可以在 HTML 程式碼中直接從內容分發網路 (CDN) 包含 pure.css 檔案。

本地安裝

  • 訪問 https://purecss.io/start/ 下載最新版本。

  • 將下載的 pure-min.css 檔案放置在您網站的目錄中，例如 /css。

示例

您可以按如下方式在 HTML 檔案中包含 css 檔案：

即時演示 
<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 的版本

您可以直接從內容分發網路 (CDN) 將 pure.css 檔案包含到 HTML 程式碼中。yui.yahooapis.com 提供最新版本的庫。

在本教程中，我們始終使用 yui.yahooapis.com CDN 版本的庫。

示例

現在讓我們使用來自 PureCSS.io CDN 的 pure.css 重寫上面的示例。

即時演示 
<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>

它將產生以下結果：

Pure.CSS - 響應式設計

Pure.CSS 有幾個特殊的類來建立響應式設計。

序號 類名和描述
1

.pure-u-*

設定容器在任何裝置上佔用所需的空間。
2

.pure-u-sm-*

設定容器在寬度 ≥ 568px 的裝置上佔用所需的空間。
3

.pure-u-md-*

設定容器在寬度 ≥ 768px 的裝置上佔用所需的空間。
4

.pure-u-lg-*

設定容器在寬度 ≥ 1024px 的裝置上佔用所需的空間。

5

.pure-u-xl-*

設定容器在寬度 ≥ 1280px 的裝置上佔用所需的空間。

在以下示例中，我們將建立一個響應式網格，其中一行有四列。這些列應該在小螢幕上堆疊，在中等尺寸的螢幕上佔據寬度：50%，在大型螢幕上佔據寬度：25%。

這是透過為小螢幕新增 .pure-u-1 類，為中等尺寸的螢幕新增 .pure-u-md-1-2 類，以及為大型螢幕新增 .pure-u-lg-1-4 類來實現的。調整頁面大小以檢視網格對螢幕尺寸的響應。

示例

purecss_responsive_design.htm

即時演示 
<html>
   <head>
      <title>The PURE.CSS Containers</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">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	

         .graybox {
            background: rgb(240, 240, 240);
            border: 1px solid #ddd;			
         }	 
      </style>
   </head>
   <body> 
   
      <div class = "grids-example">       	  
         <div class = "pure-g">
            <div class = "pure-u-1-1">
               <div class = "graybox">
                  <p>These four columns should stack on small screens, 
                  should take up width: 50% on medium-sized screens, and should 
                  take up width: 25% on large screens.</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class = "graybox">
                  <p>First Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class="graybox">
                  <p>Second Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class="graybox">
                  <p>Third Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class = "graybox">
                  <p>Fourth Column</p>
               </div>
            </div>
         </div>
      </div>
	  
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1">
               <div class = "graybox">
                   <p>This column is to occupy the complete space of a row.</p>
               </div>
            </div>
         </div>
      </div>
	  
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-2-5">
               <div class = "graybox">
                  <p>This column is to occupy the two-fifth of the space of a row.</p>
               </div>
            </div>
         </div>
      </div>
      
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-3-5">
               <div class = "graybox">
                  <p>This column is to occupy the three-fifth of the space of a row.</p>
               </div>
            </div>
         </div>
      </div>   
      
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 1: This column is to occupy the one-third of the
                  space of a row on all devices.</p>
               </div>
            </div>
			
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 2: This column is to occupy the one-third of the space 
                     of a row on all devices.</p>
               </div>
            </div>
			
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 3: This column is to occupy the one-third of the space of a 
                     row on all devices.</p>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

結果

驗證結果。

Pure.CSS - 網格

Pure.CSS 提供了 Pure Grid 的概念，它包含兩種型別的類，pure-g（網格類）和單元類 pure-u-*。以下是使用 Pure Grid 的規則。

  • 單元的寬度以分數表示。例如，pure-u-1-2 表示 1/2 或 50% 的寬度，pure-u-2-5 表示 2/5 或 40% 的寬度，依此類推。

  • Pure Grid 的子元素（帶有 pure-g 類的元素）必須使用 pure-u 或 pure-u-* 類名。

  • 所有內容都必須是網格單元的一部分才能正確呈現。

網格單元大小

Pure Grid 提供了第 5 個和第 24 個單元大小。以下插圖顯示了一些可用單元的示例，這些單元可以附加到 pure-ui-。例如，要建立一個寬度為 50% 的單元格，您可以使用 css 樣式 pure-ui-1-2。

基於第 5 個單元的單元

purecss_5th_based.htm

即時演示 
<html>
   <head>
      <title>The PURE.CSS Grid</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">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	
         .grid-unit {
            margin: 0.25em 0;
            padding-left: 4.5em;
         }
         .grid-unit .grid-unit-width {
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
         }
         .grid-unit-bar {
            height: 2em;
            background: #eee;
         }
      </style>
   </head>
	
   <body> 
	
      <div class="grids-example">       	  
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">2-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-2-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">3-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-3-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit pure-g">
            <div class="grid-unit-width pure-u">4-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-4-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit pure-g">
            <div class="grid-unit-width pure-u">1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit pure-g">
            <div class="grid-unit-width pure-u">1-1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-1"></div>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

結果

驗證結果。

基於第 24 個單元的單元

purecss_24th_based.htm

即時演示 
<html>
   <head>
      <title>The PURE.CSS Grid</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">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	
         .grid-unit {
            margin: 0.25em 0;
            padding-left: 4.5em;
         }
         .grid-unit .grid-unit-width {
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
         }
         .grid-unit-bar {
            height: 2em;
            background: #eee;
         }
      </style>
   </head>
	
   <body> 
	
      <div class = "grids-example">       	  
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-24</div>
            <div class = "grid-unit-details pure-u-1">
			      <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-12</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-12"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">2-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-2-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">3-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-3-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-8</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-8"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">4-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-4-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-6</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-6"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">5-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-5-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-4</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-4"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">6-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-6-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">7-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-7-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-3</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-3"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">22-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-22-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">23-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-23-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1</div>
            <div class ="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1"></div>
               </div>
            </div>
         </div>
		 
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-1"></div>
               </div>
            </div>
         </div>
		 
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">24-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-24-24"></div>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

結果

驗證結果。

Pure.CSS - 表單

Pure.CSS 具有非常美觀且響應式的 CSS，用於表單設計。使用以下 CSS：

序號 類名和描述
1

pure-form

表示一個緊湊的內聯表單。
2

pure-form-stacked

表示一個堆疊的表單，輸入元素位於標籤下方。與 pure-form 一起使用。
3

pure-form-aligned

表示一個對齊的表單，輸入元素位於標籤下方。與 pure-form 一起使用。

4

pure-input-rounded

顯示具有圓角的表單控制元件
5

pure-button

美化按鈕。
6

pure-checkbox

美化複選框。
7

pure-radio

美化單選按鈕。

示例

purecss_forms.htm

即時演示 
<html>
   <head>
      <title>The PURE.CSS Forms</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">
   </head>
   
   <body> 
      <form class = "pure-form pure-form-aligned">
         <fieldset>
            <div class = "pure-control-group">      
               <label for = "name">Username</label>
               <input id = "name" type = "text" placeholder = "Username" required>
            </div>
			
            <div class = "pure-control-group"> 
               <label for = "email">Email</label>
               <input id = "email" type = "text" placeholder = "Email Address" required>       
            </div>
			
            <div class = "pure-control-group">   
               <label for = "comments">Comments</label>
               <input id = "comments" type="text" placeholder = "Comments">       
            </div>
			
            <div class = "pure-controls">
               <label  for = "married" class = "pure-checkbox">
                  <input id = "married" type = "checkbox" checked = "checked">
                  Married
               </label>
               <br>
			   
               <label  for = "single" class = "pure-checkbox">
                  <input id = "single" type = "checkbox">
                  Single
               </label>
               <br>
			   
               <label for = "dontknow" class = "pure-checkbox">
                  <input id = "dontknow" type = "checkbox" disabled>
                  Don't know (Disabled)
               </label>               
               <br>
               <br>
            </div>
			
            <div class = "pure-controls">
               <label for = "male" class = "pure-radio">
                  <input id = "male" type = "radio" name = "gender" value = "male" checked>
                  Male
               </label>
               <br>
			   
               <label for = "female" class= "pure-radio">
                  <input id = "female" type = "radio" name = "gender" value = "female">
                  Female
               </label>
               <br>
			   
               <label for = "dontknow1" class = "pure-radio">
                  <input id = "dontknow1" type = "radio" name = "gender" value = "female" disabled>
                  Don't know (Disabled)
               </label>
               <button type = "submit" class = "pure-button pure-button-primary">Submit</button>
			   
            </div>
         </fieldset>
      </form>       
   </body>
</html>

結果

驗證結果。

Pure.CSS - 按鈕

Pure.CSS 具有非常美觀且響應式的 CSS，用於自定義按鈕的外觀。使用以下 CSS：

序號 類名和描述
1

pure-button

表示標準按鈕。也可用於設定連結和按鈕的樣式。
2

pure-button-disabled

表示停用按鈕。與 pure-button 一起使用。
3

pure-button-active

表示按下的按鈕。與 pure-button 一起使用。

示例

purecss_buttons.htm

即時演示 
<html>
   <head>
      <title>The PURE.CSS Forms</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>
         .success,
         .error,
         .warning,
         .secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
         }
         
         .success {
            background: rgb(28, 184, 65); /* green */
         }

         .error {
            background: rgb(202, 60, 60); /* maroon */
         }

         .warning {
            background: rgb(223, 117, 20); /* orange */
         }

         .secondary {
            background: rgb(66, 184, 221); /* light blue */
         }

         .xsmall {
            font-size: 70%;
         }

         .small {
            font-size: 85%;
         }

         .large {
            font-size: 110%;
         }

         .xlarge {
            font-size: 125%;
         }
      </style>	  	  
   </head>
	
   <body> 
      <h2>Standard Buttons</h2>
      <button class = "pure-button">Click Me</button>
      <button class = "pure-button pure-button-active">Click Me</button>
      <button class = "pure-button pure-button-disabled">I am disabled</button>

      <h2>Links as Buttons</h2>
      <a class = "pure-button">Link</a>
      <a class = "pure-button pure-button-active">Link</a>
      <a class = "pure-button pure-button-disabled">Disabled Link</a>

      <h2>Primary Button</h2>
      <a class = "pure-button pure-button-primary">Submit</a>    

      <h2>Customized button</h2>
      <button class = "pure-button success">Success</button>
      <button class = "pure-button error">Error</button>
      <button class = "pure-button warning">Warning</button>
      <button class = "pure-button secondary">Secondary</button>
	  
      <h2>Different Sized button</h2>
      <button class = "pure-button xsmall">Extra Small</button>
      <button class = "pure-button small">Small</button>
      <button class = "pure-button large">Large</button>
      <button class = "pure-button xlarge">Extra Large</button>
   </body>
</html>

結果

驗證結果。

Pure.CSS - 表格

Pure.CSS 可用於使用各種樣式在 pure-table 上顯示不同型別的表格

序號 類名和描述
1

pure-table

表示一個基本表格，具有預設填充、邊框和強調的標題。
2

pure-table-bordered

繪製一個在行之間帶有邊框的表格。
3

pure-table-horizontal

繪製一個帶有水平線的表格。
4

pure-table-striped

顯示一個帶條紋的表格。
5

pure-table-odd

如果應用於每隔一行，則會更改行的背景並建立斑馬樣式的效果。

示例

purecss_tables.htm

即時演示 
<html>
   <head>
      <title>The PURE.CSS Tables</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">
   </head>
   
   <body> 
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
	  
      <table class = "pure-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Bordered Table</h3>
      <table class="pure-table pure-table-bordered">
         <thead>
            <tr><
               th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Table with Horizontal Borders</h3>
      <table class="pure-table pure-table-horizontal">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Stripped Table</h3>
      <table class = "pure-table pure-table-striped">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

結果

驗證結果。

Pure.CSS - 圖片

Pure.CSS 提供了使用 pure-image 作為主類以響應方式顯示影像的選項。

序號 類名和描述
1

pure-img

表示一個基本樣式的影像，沒有任何邊框。影像會隨著內容的增大和縮小而保持正確的比例。

示例

purecss_images.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Images</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">
   </head>
   
   <body> 
      <h2>Images Demo</h2>
      <hr/> 
      <div class = "pure-g">	
	  
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
      </div>
   </body>
</html>

結果

驗證結果。

Pure.CSS - 圖示

Pure.CSS 支援以下流行的圖示庫：

  • Font Awesome 圖示
  • Google Material 圖示
  • Bootstrap 圖示

用法

要使用圖示，請將圖示的名稱放在 HTML <i> 元素的類中。

示例

purecss_icons.htm

即時演示 
<html>
   <head>
   
      <title>The PURE.CSS Icons</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">
	  
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	  
      <link rel = "stylesheet" href="https://fonts.googleapis.com/icon?family = Material+Icons">
	  
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	  
      <style>  
         .xsmall {
            font-size: 70%;
         }
         .small {
            font-size: 85%;
         }
         .large {
            font-size: 110%;
         }
         .xlarge {
            font-size: 125%;
         }
      </style>
	  
   </head>
   
   <body> 
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud xsmall"></i>
      <i class = "fa fa-cloud small"></i>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud large"></i>
      <i class = "fa fa-cloud xlarge"></i>
	  
      <h3>Google Material Design Icon Demo</h3>      
      <i class = "material-icons xsmall">cloud</i>	
      <i class = "material-icons small">cloud</i>
      <i class = "material-icons large">cloud</i>
      <i class = "material-icons xlarge">cloud</i>
      <i class = "material-icons">cloud</i>
	  
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud xsmall"></i>
      <i class = "glyphicon glyphicon-cloud small"></i>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "glyphicon glyphicon-cloud large"></i>
      <i class = "glyphicon glyphicon-cloud xlarge"></i>
	  
      <h3>Button with Icon Demo</h3>
      <button class = "pure-button"><i class = "fa fa-cog"></i> Settings</button>
      <a class = "pure-button" href = "#"><i class = "fa fa-shopping-cart fa-lg"></i> Checkout</a>
   </body>
</html>

結果

驗證結果。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.