Foundation CSS 参考手册1

简介: Foundation CSS参考手册:Foundation框架默认使用浏览器字体大小(通常16px),移动设备为12px,字体为"Helvetica Neue",行高1.5。段落底部外边距1.25rem,行高1.6。对h1至h6标题、链接、副标题、引用、加粗、斜体、缩写、键盘输入、水平线、代码片段及列表等HTML元素设置了独立样式,优化了网页显示效果。

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

这些设置是适用于

元素内的元素。

此外,

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

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

元素 描述 在线实例

-

h1 - h6 标题 尝试一下
浅蓝色的链接,鼠标移动到链接会有下划线 尝试一下
浅灰色的副标题文本 尝试一下

引用内容模块 尝试一下
加粗文本 尝试一下
斜体 尝试一下
指定单词的缩写,使用该元素文本出现虚线下划线,鼠标移动上去会有提示信息 尝试一下
接收键盘输入指令: CTRL + P 尝试一下


水平线 尝试一下
代码片段 尝试一下

  • 无序列表 尝试一下

    1. 有序列表 尝试一下

      描述性列表
相关文章
|
8月前
|
前端开发 开发者
Foundation CSS 可见性1
Foundation CSS 的可见性类可根据屏幕尺寸控制元素的显示。例如,`.show-for-small-only` 类仅在小屏设备(<40.0625em)上显示元素,而 `.show-for-medium-up` 类则在中型及以上设备(≥40.0625em)上显示。这些类帮助开发者根据不同设备优化界面布局。
|
7月前
|
前端开发
Foundation CSS 可见性4
简介:通过使用 `.show-for-touch` 和 `.hide-for-touch` 类,可以根据设备是否支持触屏来控制元素的显示与隐藏。示例中,支持触屏的设备会显示“你的设备支持触屏。”,而不支持的则显示“你的设备不支持触屏。”
|
8月前
|
前端开发
Foundation CSS 可见性2
根据屏幕尺寸隐藏元素的类,如 `.hide-for-small-only` 仅在小屏设备(<40.0625em)上隐藏,`.hide-for-medium-up` 在中型及以上设备(≥40.0625em)上隐藏等,适用于响应式设计。
|
8月前
|
前端开发
Foundation CSS 可见性3
根据屏幕方向显示元素:使用特定类可使元素在不同屏幕方向下显示或隐藏。例如,`.show-for-landscape` 类让元素仅在横屏时显示,而 `.show-for-portrait` 类则让元素仅在竖屏时显示。示例代码展示了如何根据屏幕方向显示不同的文本内容。
|
8月前
|
前端开发
Foundation CSS 参考手册3
此段内容介绍了几个常用的CSS类及其功能:.left 和 .right 分别使元素向左或向右浮动;.clearfix 用于清除浮动,需添加于浮动元素的父元素上;.hide 通过设置 CSS display 属性为 none 来隐藏元素;.list-inline 可将列表项水平排列;.lead 使文本更加突出;.subheader 用于设置浅色的标题元素。
|
8月前
|
前端开发
Foundation CSS 参考手册2
本文介绍了如何使用CSS类实现文本对齐,包括基本的左、右、居中和两端对齐,以及针对不同屏幕尺寸的特定对齐方式,如小屏、中屏、大屏等,每个类别都有相应的示例供测试。
|
11月前
|
前端开发 Ubuntu Linux
CSS 系统字体堆栈参考
CSS 系统字体堆栈参考
159 0
|
1月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
1月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
1月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中

热门文章

最新文章