Foundation CSS 参考手册2

简介: 本文介绍了如何使用CSS类实现文本对齐,包括基本的左、右、居中和两端对齐,以及针对不同屏幕尺寸的特定对齐方式,如小屏、中屏、大屏等,每个类别都有相应的示例供测试。

文本对齐
使用 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 尺寸屏幕两端对齐

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