Foundation5手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
annuaire recherche
Foundation 基础 Foundation 教程 Foundation 安装 Foundation 按钮 Foundation 按钮组 Foundation 标签 Foundation 表单 Foundation 表格 Foundation 侧边栏 Foundation 顶部导航栏 Foundation 分页 Foundation 滑动导航 Foundation 滑块 Foundation 价格表 Foundation 进度条 Foundation 均衡器(Equalizer) Foundation 开关 Foundation 列表 Foundation 麦哲伦（Magellan）导航 Foundation Joyride Foundation 面板 Foundation 模态框 Foundation 输入框 尺寸 Foundation 提示框 Foundation 提醒框 Foundation 图标 Foundation 图片 Foundation 文本 Foundation 下拉菜单 Foundation 选项卡 Foundation 折叠列表 Foundation 手册 Foundation CSS 参考手册 Foundation CSS 可见性 Foundation 图标参考手册 Foundation 网格 Foundation 块状网格 Foundation 网格 - 大型设备 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格实例 Foundation 网格系统

©
Ce document utilise Manuel du site Web PHP chinois Libérer

personnages

Foundation CSS 参考手册

Foundation 默认设置

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

这些设置是适用于 <body> 元素内的元素。

此外， <p> 元素与底部的外边距(margin-bottom) 为 1.25rem , line-height 为 1.6。

文本

以下的 HTML 元素，Foundation 设置了独立的样式渲染它，不会采用浏览器默认样式。点击 "实例预览" 查看在线实例。

元素 描述 在线实例
<h1> - <h6> h1 - h6 标题 实例预览
<a> 浅蓝色的链接，鼠标移动到链接会有下划线 实例预览
<small> 浅灰色的副标题文本 实例预览
<blockquote> 引用内容模块 实例预览
<strong> 加粗文本 实例预览
<em> 斜体 实例预览
<abbr> 指定单词的缩写，使用该元素文本出现虚线下划线，鼠标移动上去会有提示信息 实例预览
<kbd> 接收键盘输入指令:CTRL + P 实例预览
<hr> 水平线 实例预览
<code> 代码片段 实例预览
<ul> 无序列表 实例预览
<ol> 有序列表 实例预览
<dl> 描述性列表 实例预览

文本对齐

使用 CSS 类来修改文本的对齐方式：

类 描述 实例
.text-left 左对齐文本 实例预览
.text-right 右对齐文本 实例预览
.text-center 居中 实例预览
.text-justify 两端对齐 实例预览

不同尺寸屏幕的对齐

使用 CSS 类来修改文本的不同尺寸屏幕的对齐方式：

类 描述 实例
左对齐    
.small-text-left 所有尺寸屏幕左对齐 实例预览
.small-only-text-left 小尺寸屏幕左对齐(宽度小于 40em ) 实例预览
.medium-text-left 宽度大于 40.0625em 尺寸屏幕左对齐 实例预览
.medium-only-text-left 宽度在 40.0625em 到 64em 尺寸的屏幕左对齐 实例预览
.large-text-left 宽度大于 64.0625em 尺寸屏幕左对齐 实例预览
.large-only-text-left 宽度在 64.0625em 到 90em 尺寸的屏幕左对齐 实例预览
.xlarge-text-left 宽度大于 90.0625em 尺寸屏幕左对齐 实例预览
.xlarge-only-text-left 宽度在 90.0625em 到 120em 尺寸的屏幕左对齐 实例预览
.xxlarge-text-left 宽度大于 120em 尺寸屏幕左对齐 实例预览
     
右对齐    
.small-text-right 所有尺寸屏幕右对齐 实例预览
.small-only-text-right 小尺寸屏幕右对齐(宽度小于 40em ) 实例预览
.medium-text-right 宽度大于 40.0625em 尺寸屏幕右对齐 实例预览
.medium-only-text-right 宽度在 40.0625em 到 64em 尺寸的屏幕右对齐 实例预览
.large-text-right 宽度大于 64.0625em 尺寸屏幕右对齐 实例预览
.large-only-text-right 宽度在 64.0625em 到 90em 尺寸的屏幕右对齐 实例预览
.xlarge-text-right 宽度大于 90.0625em 尺寸屏幕右对齐 实例预览
.xlarge-only-text-right 宽度在 90.0625em 到 120em 尺寸的屏幕右对齐 实例预览
.xxlarge-text-right 宽度大于 120em 尺寸屏幕右对齐 实例预览
     
居中对齐    
.small-text-center 所有尺寸屏幕居中对齐 实例预览
.small-only-text-center 小尺寸屏幕居中对齐(宽度小于 40em ) 实例预览
.medium-text-center 宽度大于 40.0625em 尺寸屏幕居中对齐 实例预览
.medium-only-text-center 宽度在 40.0625em 到 64em 尺寸的屏幕居中对齐 实例预览
.large-text-center 宽度大于 64.0625em 尺寸屏幕居中对齐 实例预览
.large-only-text-center 宽度在 64.0625em 到 90em 尺寸的屏幕居中对齐 实例预览
.xlarge-text-center 宽度大于 90.0625em 尺寸屏幕居中对齐 实例预览
.xlarge-only-text-center 宽度在 90.0625em 到 120em 尺寸的屏幕居中对齐 实例预览
.xxlarge-text-center 宽度大于 120em 尺寸屏幕居中对齐 实例预览
     
两端对齐    
.small-text-justify 所有尺寸屏幕都两端对齐 实例预览
.small-only-text-justify 小尺寸屏幕两端对齐(宽度小于 40em ) 实例预览
.medium-text-justify 宽度大于 40.0625em 尺寸屏幕两端对齐 实例预览
.medium-only-text-justify 宽度在 40.0625em 到 64em 尺寸的屏幕两端对齐 实例预览
.large-text-justify 宽度大于 64.0625em 尺寸屏幕两端对齐 实例预览
.large-only-text-justify 宽度在 64.0625em 到 90em 尺寸的屏幕两端对齐 实例预览
.xlarge-text-justify 宽度大于 90.0625em 尺寸屏幕两端对齐 实例预览
.xlarge-only-text-justify 宽度在 90.0625em 到 120em 尺寸的屏幕两端对齐 实例预览
.xxlarge-text-justify 宽度大于 120em 尺寸屏幕两端对齐 实例预览

其他

类 描述 实例
.left 元素向左浮动 实例预览
.right 元素向右浮动 实例预览
.clearfix 清除浮动 - 必须添加在浮动元素的父元素上
.hide 隐藏元素 (CSS display: none) 实例预览
.list-inline 将所有元素设置在同一行 实例预览
.lead 让 <p> 元素更突出 实例预览
.subheader 设置浅色的 <h1> - <h6> 元素 实例预览


关于我们 联系我们 留言板

手册网

Article précédent： Article suivant：