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

相关文章
|
2月前
|
前端开发 开发者
Foundation CSS 可见性1
Foundation CSS 的可见性类可根据屏幕尺寸控制元素的显示。例如,`.show-for-small-only` 类仅在小屏设备(<40.0625em)上显示元素,而 `.show-for-medium-up` 类则在中型及以上设备(≥40.0625em)上显示。这些类帮助开发者根据不同设备优化界面布局。
|
1月前
|
前端开发
Foundation CSS 可见性4
简介:通过使用 `.show-for-touch` 和 `.hide-for-touch` 类,可以根据设备是否支持触屏来控制元素的显示与隐藏。示例中,支持触屏的设备会显示“你的设备支持触屏。”,而不支持的则显示“你的设备不支持触屏。”
|
2月前
|
前端开发
Foundation CSS 可见性2
根据屏幕尺寸隐藏元素的类,如 `.hide-for-small-only` 仅在小屏设备(<40.0625em)上隐藏,`.hide-for-medium-up` 在中型及以上设备(≥40.0625em)上隐藏等,适用于响应式设计。
|
2月前
|
前端开发
Foundation CSS 可见性3
根据屏幕方向显示元素:使用特定类可使元素在不同屏幕方向下显示或隐藏。例如,`.show-for-landscape` 类让元素仅在横屏时显示,而 `.show-for-portrait` 类则让元素仅在竖屏时显示。示例代码展示了如何根据屏幕方向显示不同的文本内容。
|
2月前
|
前端开发
Foundation CSS 参考手册3
此段内容介绍了几个常用的CSS类及其功能:.left 和 .right 分别使元素向左或向右浮动;.clearfix 用于清除浮动,需添加于浮动元素的父元素上;.hide 通过设置 CSS display 属性为 none 来隐藏元素;.list-inline 可将列表项水平排列;.lead 使文本更加突出;.subheader 用于设置浅色的标题元素。
|
2月前
|
前端开发
Foundation CSS 参考手册1
Foundation CSS参考手册:Foundation框架默认使用浏览器字体大小(通常16px),移动设备为12px,字体为"Helvetica Neue",行高1.5。段落底部外边距1.25rem,行高1.6。对h1至h6标题、链接、副标题、引用、加粗、斜体、缩写、键盘输入、水平线、代码片段及列表等HTML元素设置了独立样式,优化了网页显示效果。
|
5月前
|
前端开发 Ubuntu Linux
CSS 系统字体堆栈参考
CSS 系统字体堆栈参考
39 0
|
5天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
78 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
68 7

热门文章

最新文章