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

元素的样式如下所示:

实例


相关文章
|
15天前
|
前端开发
Foundation 图标1
Foundation 图标提供了 283 个可自定义样式的图标,适用于文本、按钮、工具条、导航栏和表单等。使用方法简单,只需在 HTML 中添加相应的类名即可。例如:`<i class="fi-name"></i>`。需在 `<head>` 部分引入样式文件。
Foundation 下拉菜单6
分割按钮是在普通按钮基础上添加 `.split` 类,生成一个带有下拉箭头的按钮。点击按钮可展开下拉菜单,实现更多操作选项。示例代码展示了如何创建一个分割按钮及关联的下拉菜单。
|
11天前
|
JavaScript 前端开发
Foundation 图片2
Foundation 的简洁弹窗可轻松实现图片展示。只需在元素上添加 `.clearing-thumbs` 类和 `data-clearing` 属性,并在其中插入图片列表。需先初始化 Foundation JS。还可通过 `data-caption` 属性为每张图片添加描述,支持 HTML 元素。
|
11天前
Foundation 图片1
Foundation 提供了响应式图片功能,支持创建缩略图和图片弹窗。通过在 `<img>` 元素外添加 `<a>` 元素并使用 `.th` 类,可以实现缩略图效果。此外,Foundation 的图片默认是响应式的,支持浏览器窗口大小调整。添加 `.radius` 类可创建圆角缩略图。
Foundation 列表3
若无需标识符,可使用 `.no-bullet` 类去除列表项前的符号;若需创建水平列表,则可在 `<ul>` 标签上添加 `.inline-list` 类。
Foundation 列表1
在 Foundation 框架中,无序列表(`<ul>`)的前缀符号默认为圆圈,可通过添加 `.circle` 类实现。
Foundation 列表2
方块标识符用于在列表项前添加方块符号。使用方法是在 `<ul>` 标签中添加 `.square` 类,
|
17天前
|
前端开发
Foundation 表格
Foundation 框架中的表格采用灰色斑马条纹样式,四周有边框。示例表格展示了姓名和邮箱信息。通过在外层添加带有 `overflow-x:hidden` 样式的 `<div>`,可实现响应式设计,确保表格在不同设备上良好显示。
Foundation 下拉菜单4
下拉菜单默认位于底部
|
14天前
|
容器
Foundation 图标4
该示例展示了如何使用 `<label>` 元素为图标添加描述。每个图标按钮包含一个图标和一个标签,分别表示“主页”、“分享”、“信息”、“邮件”和“搜索”。整个图标栏通过 `div` 容器和类名 `icon-bar five-up` 进行布局。