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

元素的样式如下所示:

实例


相关文章
|
机器学习/深度学习 算法 TensorFlow
|
测试技术
详解单元测试问题之MockHandlerImpl类的handle方法中VerificationMode不为空如何解决
详解单元测试问题之MockHandlerImpl类的handle方法中VerificationMode不为空如何解决
236 3
|
算法 安全 数据安全/隐私保护
一对一语音视频交友系统开发详细指南丨案例设计丨功能需求丨方案逻辑
一对一语音视频交友系统开发指的是开发一种用于让用户通过语音和视频进行一对一交流的交友系统。该系统旨在提供一个平台,让用户可以通过语音和视频相互了解、交流和建立关系。以下是一对一语音视频交友系统开发的一些关键特点:
|
安全 Linux 编译器
从C语言到C++_40(多线程相关)C++线程接口+线程安全问题加锁(shared_ptr+STL+单例)(下)
从C语言到C++_40(多线程相关)C++线程接口+线程安全问题加锁(shared_ptr+STL+单例)
219 0
|
存储 网络协议 数据可视化
如何使用Synology Drive作为文件同步服务器实现云同步Obsidian笔记
如何使用Synology Drive作为文件同步服务器实现云同步Obsidian笔记
542 0
|
搜索推荐 Python
【现学现用】matplotlib画图(plt与ax的关系add_subplot与subplots等)
【现学现用】matplotlib画图(plt与ax的关系add_subplot与subplots等)
830 0
【现学现用】matplotlib画图(plt与ax的关系add_subplot与subplots等)
Axure如何做到屏幕自适应
Axure如何做到屏幕自适应
637 0
Axure如何做到屏幕自适应
|
存储 缓存 NoSQL
H2存储内核分析一
现在做数据库一般都才有 C/C++ 获取其它编译型的语言,为什么会选择 h2 这种基于 java 的语言?会不会影响效率?其实回答这个问题很简单,无论是用什么语言来实现数据库,其实都是在调用操作系统 IO 的函数。因此仅仅是作为存储的话差别其实是不大的。 现在大多数,涉及到存储内核的文章或者讲义,要么是一堆原理,要么就是玩具版本例子,根本无法应用到实际的工程上面去,就像马保国的闪电五连鞭一样。我们选择 h2 的一个重要原因就是,学习完后,可以直接应用到工程上。行不行直接在擂台上比一下就知道了。
H2存储内核分析一