Foundation 文本

简介: Foundation框架默认使用浏览器的字体大小(桌面16px,移动12px),基础字体为"Helvetica Neue",行高1.5。支持通过`.subheader`类创建浅色标题,提供多种HTML元素样式定制,如标题、链接、段落等,适用于不同场景的文字排版需求。

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

以上默认的设置均是针对

元素。

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

以下实例的真实样式请通过点击"尝试一下"按钮查看。

-


Foundation 渲染的 HTML 标题 (

) 如下所示:

实例

h1 标题

h2 标题

h3 标题

h4 标题

h5 标题
h6 标题

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

实例

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader

尝试一下 »

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

实例

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text

尝试一下 »

Foundation 元素的样式如下所示:

实例

这是一个 链接

尝试一下 »

Foundation 元素的样式如下所示:

实例

The WHO was founded in 1948.

尝试一下 »


Foundation
元素的样式如下所示:

实例

学的不仅是技术,更是梦想!


菜鸟教程

尝试一下 »


Foundation
元素的样式如下所示:

实例

Coffee

- black hot drink

Milk

- white cold drink

尝试一下 »

Foundation 元素的样式如下所示:

实例

以下 HTML 元素: span, section, 和 div 是文档的一部分。

尝试一下 »

Foundation 元素的样式如下所示:

实例

按下 ctrl + p 键打开打印窗口。

尝试一下 »



Foundation

元素的样式如下所示:

实例


相关文章
|
30天前
|
前端开发
Foundation 图标1
Foundation 图标提供了 283 个可自定义样式的图标,适用于文本、按钮、工具条、导航栏和表单等。使用方法简单,只需在 HTML 中添加相应的类名即可。例如:`<i class="fi-name"></i>`。需在 `<head>` 部分引入样式文件。
Foundation 提示框2
提示框默认显示在元素底部,可通过添加类 `.tip-top`, `.tip-left`, `.tip-right` 或 `.tip-bottom` 调整位置。小屏幕下提示框宽度为100%。示例:`<span>` 标签使用 `data-tooltip` 和不同方向的类来展示提示信息。
Foundation 提示框3
使用 .radius 和 .round 类可为提示框添加圆角效果。示例:`<span>` 标签结合 `data-tooltip` 和 `title` 属性展示不同样式的提示信息。
|
9天前
|
JavaScript 前端开发
Foundation 提示框1
Foundation 提示框通过在元素上添加 `data-tooltip` 属性和 `title` 属性来实现。需初始化 Foundation JS。示例代码展示了如何创建和加粗提示文本。
|
15天前
|
索引
Foundation 麦哲伦(Magellan)导航1
Foundation 麦哲伦(Magellan)导航是一种固定的导航索引,用于页面内跳转。通过在 HTML 中添加特定的 `data` 属性和链接,可以轻松创建导航条目。
|
15天前
Foundation 麦哲伦(Magellan)导航2
麦哲伦导航头部工具条示例:通过固定顶部栏实现页面内导航,包含两个导航链接分别指向“Page 1”和“Page 2”,并使用`data-magellan-destination`属性标记目标位置。
|
26天前
Foundation 图片1
Foundation 提供了响应式图片功能,支持创建缩略图和图片弹窗。通过在 `<img>` 元素外添加 `<a>` 元素并使用 `.th` 类,可以实现缩略图效果。此外,Foundation 的图片默认是响应式的,支持浏览器窗口大小调整。添加 `.radius` 类可创建圆角缩略图。
|
26天前
|
JavaScript 前端开发
Foundation 图片2
Foundation 的简洁弹窗可轻松实现图片展示。只需在元素上添加 `.clearing-thumbs` 类和 `data-clearing` 属性,并在其中插入图片列表。需先初始化 Foundation JS。还可通过 `data-caption` 属性为每张图片添加描述,支持 HTML 元素。
|
1月前
|
前端开发
Foundation 表格
Foundation 框架中的表格采用灰色斑马条纹样式,四周有边框。示例表格展示了姓名和邮箱信息。通过在外层添加带有 `overflow-x:hidden` 样式的 `<div>`,可实现响应式设计,确保表格在不同设备上良好显示。
|
23天前
Foundation 列表2
方块标识符用于在列表项前添加方块符号。使用方法是在 `<ul>` 标签中添加 `.square` 类,