Foundation 教程
1. Foundation 教程 2. Foundation 起步 3. Foundation 文本 4. Foundation 表格 5. Foundation 按钮 6. Foundation 按钮组 7. Foundation 图标 8. Foundation 标签 9. Foundation 提醒框 10. Foundation 进度条 11. Foundation 面板 12. Foundation 图片 13. Foundation 下拉菜单 14. Foundation 折叠列表 15. Foundation 列表 16. Foundation 选项卡 17. Foundation 分页 18. Foundation 价格表 19. Foundation 顶部导航栏 20. Foundation 侧边栏 21. Foundation 滑动导航(Off-Canvas) 22. Foundation 麦哲伦(Magellan)导航 23. Foundation 表单 24. Foundation 输入框尺寸 25. Foundation 开关 26. Foundation 滑块 27. Foundation 提示框 28. Foundation 模态框 29. Foundation Joyride 30. Foundation 均衡器(Equalizer) 31. Foundation 网格系统 32. Foundation 网格 – 水平堆叠 33. Foundation 网格 – 小型设备 34. Foundation 网格 – 中型设备 35. Foundation 网格 – 大型设备 36. Foundation 块状网格 37. Foundation 网格实例 38. Foundation 图标参考手册 39. Foundation CSS 参考手册 40. Foundation CSS 可见性

Foundation 文本

Foundation 文本

Foundation 默认设置

Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说,字体默认为 16px。对于大多数移动端浏览器来说,字体默认为 12px。默认的字体为 "Helvetica Neue", line-height 默认为 1.5

以上默认的设置均是针对 <body> 元素。


Foundation 文字排列设计

本章节我们将讨论 Foundation 的文字排列设计。

以下实例的真实样式请通过点击"55面试教程网"按钮查看。


<h1> - <h6>

Foundation 渲染的 HTML 标题 (<h1><h6>) 如下所示:

实例

<h1>h1 标题</h1> <h2>h2 标题</h2> <h3>h3 标题</h3> <h4>h4 标题</h4> <h5>h5 标题</h5> <h6>h6 标题</h6>

55面试教程网 »

提示: 如果需要创建一个浅色的标题,可以在元素上添加 .subheader 类:

实例

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

55面试教程网 »

<small>

在 Foundation 中, HTML <small> 元素用于创建一个浅色的副标题:

实例

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

55面试教程网 »

<a>

Foundation <a> 元素的样式如下所示:

实例

<p>这是一个 <a class="a" href="#">链接</a></p>

55面试教程网 »

<abbr>

Foundation <abbr> 元素的样式如下所示:

实例

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

55面试教程网 »

<blockquote>

Foundation <blockquote> 元素的样式如下所示:

实例

<blockquote> <p>学的不仅是技术,更是梦想!</p> <cite></cite> </blockquote>

55面试教程网 »

<dl>

Foundation <dl> 元素的样式如下所示:

实例

<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

55面试教程网 »

<code>

Foundation <code> 元素的样式如下所示:

实例

<p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 是文档的一部分。</p>

55面试教程网 »

<kbd>

Foundation <kbd> 元素的样式如下所示:

实例

<p>按下 <kbd>ctrl + p</kbd> 键打开打印窗口。</p>

55面试教程网 »

<hr>

Foundation <hr> 元素的样式如下所示: