Foundation 图片1

简介: Foundation 提供了响应式图片功能,支持创建缩略图和图片弹窗。通过在 `<img>` 元素外添加 `<a>` 元素并使用 `.th` 类,可以实现缩略图效果。此外,Foundation 的图片默认是响应式的,支持浏览器窗口大小调整。添加 `.radius` 类可创建圆角缩略图。

Foundation 图片
Foundation 提供了响应式的图片,可以创建缩略图和图片弹窗:

尝试一下 »
缩略图
在 元素外添加 元素将图片作为一个锚链接。

在 标签中添加 .th 类将图片设置为缩略图。 鼠标移动到上面会显示一个浅蓝色外框:

实例

Paris

尝试一下 »
Note 响应式图片

Foundation 中图片默认是响应式的。我们可以在实例页面重置浏览器大小来查看图片缩放效果。
圆角图片
我们可以在 .th 类添加 .radius 类来设置圆角缩略图:

实例

Paris

相关文章
|
9天前
|
前端开发
Foundation 图标1
Foundation 图标提供了 283 个可自定义样式的图标,适用于文本、按钮、工具条、导航栏和表单等。使用方法简单,只需在 HTML 中添加相应的类名即可。例如:`&lt;i class=&quot;fi-name&quot;&gt;&lt;/i&gt;`。需在 `&lt;head&gt;` 部分引入样式文件。
|
5天前
|
JavaScript 前端开发
Foundation 图片2
Foundation 的简洁弹窗可轻松实现图片展示。只需在元素上添加 `.clearing-thumbs` 类和 `data-clearing` 属性,并在其中插入图片列表。需先初始化 Foundation JS。还可通过 `data-caption` 属性为每张图片添加描述,支持 HTML 元素。
|
12天前
|
移动开发
Foundation 文本
Foundation框架默认使用浏览器的字体大小(桌面16px,移动12px),基础字体为&quot;Helvetica Neue&quot;,行高1.5。支持通过`.subheader`类创建浅色标题,提供多种HTML元素样式定制,如标题、链接、段落等,适用于不同场景的文字排版需求。
|
5天前
|
前端开发
Foundation 面板2
通过添加.radius类,可以将面板设置为圆角样式。此外,还可以利用CSS来自定义面板样式,例如将其设计成卡片形式。示例展示了标题为“长城”的自定义面板,内容为“不到长城非好汉!!!”
Foundation 面板2
Foundation 图片3
要仅显示一张缩略图,可以在 `&lt;ul&gt;` 中使用 `.clearing-feature` 类,并在特定的 `&lt;li&gt;` 中使用 `.clearing-featured-img` 类。
|
12天前
|
移动开发 前端开发 JavaScript
使用 Foundation 创建页面
使用 Foundation 框架创建页面时,需先添加 HTML5 doctype 和语言、字符编码设置。Foundation 5 采用移动优先策略,确保页面在移动设备上的良好显示,需在 `&lt;head&gt;` 中加入 viewport 元标签。此外,部分组件依赖 jQuery,需通过特定脚本初始化。
|
8天前
|
容器
Foundation 图标4
该示例展示了如何使用 `&lt;label&gt;` 元素为图标添加描述。每个图标按钮包含一个图标和一个标签,分别表示“主页”、“分享”、“信息”、“邮件”和“搜索”。整个图标栏通过 `div` 容器和类名 `icon-bar five-up` 进行布局。
Foundation 图标2
以下示例展示了图标的不同用法:云图标、作为链接的云图标、样式化的云图标、主页图标、按钮上的主页图标、绿色按钮上的主页图标以及浅蓝色大链接按钮上的主页图标。
|
11天前
|
前端开发
Foundation 表格
Foundation 框架中的表格采用灰色斑马条纹样式,四周有边框。示例表格展示了姓名和邮箱信息。通过在外层添加带有 `overflow-x:hidden` 样式的 `&lt;div&gt;`,可实现响应式设计,确保表格在不同设备上良好显示。
Foundation 面板1
Foundation面板是一种具有灰色边框和内边距的内容模块,可使用.panel类创建。通过添加.callout类,可将面板颜色调整为浅蓝色,适用于不同场景下的页面设计。