亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Foundation 中文手冊 / Foundation 文本

Foundation 文本

Foundation 默認(rèn)設(shè)置

Foundation 使用瀏覽器默認(rèn)字體大小 (font-size:100%)。對于大多數(shù)桌面瀏覽器來說，字體默認(rèn)為 16px。對于大多數(shù)移動端瀏覽器來說，字體默認(rèn)為 12px。默認(rèn)的字體為 "Helvetica Neue"， line-height 默認(rèn)為 1.5。

以上默認(rèn)的設(shè)置均是針對 <body> 元素。

Foundation 文字排列設(shè)計

本章節(jié)我們將討論 Foundation 的文字排列設(shè)計。

以下實例的真實樣式請通過點擊"嘗試一下"按鈕查看。

<h1> - <h6>

Foundation 渲染的 HTML 標(biāo)題 (<h1> 到<h6>) 如下所示:

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>標(biāo)題</h2>
  <p>標(biāo)題不同元素字體大小不一樣。以下字體默認(rèn)加粗，不同設(shè)備尺寸顯示的字體也是不一樣的，你可以通過重置瀏覽器窗口大小查看效果。</p>
  <h1>h1 標(biāo)題 (<strong>2.125rem</strong> - 2.75rem)</h1>
  <h2>h2 標(biāo)題 (<strong>1.6875rem</strong> - 2.3125rem)</h2>
  <h3>h3 標(biāo)題 (<strong>1.375rem</strong> - 1.6875rem)</h3>
  <h4>h4 標(biāo)題 (<strong>1.125rem</strong> - 1.4375rem)</h4>
  <h5>h5 標(biāo)題 (1.125rem)</h5>
  <h6>h6 標(biāo)題 (1rem)</h6>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

提示： 如果需要創(chuàng)建一個淺色的標(biāo)題，可以在元素上添加 .subheader 類:

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
<h2>副標(biāo)題</h2>
<p> .subheader 類讓標(biāo)題的文本顏色變淺。</p>
<h1 class="subheader">h1.subheader</h1>
<h2 class="subheader">h2.subheader</h2>
<h3 class="subheader">h3.subheader</h3>
<h4 class="subheader">h4.subheader</h4>
<h5 class="subheader">h5.subheader</h5>
<h6 class="subheader">h6.subheader</h6>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

<small>

在 Foundation 中， HTML <small> 元素用于創(chuàng)建一個淺色的副標(biāo)題：

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>Small</h2>
  <p>small 元素用于創(chuàng)建一個淺色的副標(biāo)題。</p>
  <h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

<a>

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>鏈接</h2>    
  <p>Foundation 的 <a href="#">鏈接樣式</a>。</p>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

<abbr>

Foundation <abbr> 元素的樣式如下所示：

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>Abbreviations</h2>
  <p>abbr 元素用于標(biāo)簽指示簡稱或縮寫。</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

<blockquote>

Foundation <blockquote> 元素的樣式如下所示：

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>引用</h2>
  <p>blockquote 元素用于定義塊引用。</p>
  <blockquote>
    <p> php中文網(wǎng)</p>
    <cite>php中文網(wǎng)</cite>
  </blockquote>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

<dl>

Foundation <dl> 元素的樣式如下所示：

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>描述列表</h2>    
  <p>dl 元素用于定義一個描述性列表：</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>
</div>
       
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

<code>

Foundation <code> 元素的樣式如下所示：

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>Code 片段</h2>
  <p>代碼片段展示可以使用 code 元素:</p>
  <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 是文檔的一部分。</p>
</div>
  
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

<kbd>

Foundation <kbd> 元素的樣式如下所示：

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>鍵盤輸入</h2>
  <p>使用 kbd 元素來接收鍵盤的輸入指令:</p>
  <p>按下 <kbd>ctrl + p</kbd> 鍵打開打印窗口。</p>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

<hr>

Foundation <hr> 元素的樣式如下所示：

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>水平線</h2>
  <p>Foundation 中 hr 元素是灰色的。</p>
  <hr>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例