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

相关文章
|
前端开发
Foundation CSS 可见性4
简介:通过使用 `.show-for-touch` 和 `.hide-for-touch` 类,可以根据设备是否支持触屏来控制元素的显示与隐藏。示例中,支持触屏的设备会显示“你的设备支持触屏。”,而不支持的则显示“你的设备不支持触屏。”
|
前端开发
Foundation CSS 可见性3
根据屏幕方向显示元素:使用特定类可使元素在不同屏幕方向下显示或隐藏。例如,`.show-for-landscape` 类让元素仅在横屏时显示,而 `.show-for-portrait` 类则让元素仅在竖屏时显示。示例代码展示了如何根据屏幕方向显示不同的文本内容。
|
前端开发
Foundation CSS 可见性2
根据屏幕尺寸隐藏元素的类,如 `.hide-for-small-only` 仅在小屏设备(<40.0625em)上隐藏,`.hide-for-medium-up` 在中型及以上设备(≥40.0625em)上隐藏等,适用于响应式设计。
|
前端开发 开发者
Foundation CSS 可见性1
Foundation CSS 的可见性类可根据屏幕尺寸控制元素的显示。例如,`.show-for-small-only` 类仅在小屏设备(<40.0625em)上显示元素,而 `.show-for-medium-up` 类则在中型及以上设备(≥40.0625em)上显示。这些类帮助开发者根据不同设备优化界面布局。
|
前端开发
Foundation CSS 参考手册3
此段内容介绍了几个常用的CSS类及其功能:.left 和 .right 分别使元素向左或向右浮动;.clearfix 用于清除浮动,需添加于浮动元素的父元素上;.hide 通过设置 CSS display 属性为 none 来隐藏元素;.list-inline 可将列表项水平排列;.lead 使文本更加突出;.subheader 用于设置浅色的标题元素。
|
前端开发
Foundation CSS 参考手册1
Foundation CSS参考手册:Foundation框架默认使用浏览器字体大小(通常16px),移动设备为12px,字体为"Helvetica Neue",行高1.5。段落底部外边距1.25rem,行高1.6。对h1至h6标题、链接、副标题、引用、加粗、斜体、缩写、键盘输入、水平线、代码片段及列表等HTML元素设置了独立样式,优化了网页显示效果。
|
前端开发 Ubuntu Linux
CSS 系统字体堆栈参考
CSS 系统字体堆栈参考
305 0
|
10月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
639 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
284 34

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    422
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    331
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    316
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    207
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    426
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    609
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    797
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    216
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    645
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    387