Foundation5 教程 第3页

2023-01-01阅读(306)

侧边栏导航 Foundation 使用 <ul class="side-nav"> 创建侧边栏: 激活链接与分割线 已点击的链接可以在 <li> 上使用 .activ...

2023-01-01阅读(285)

顶部导航栏放在页面头部： 实例解析 使用 <nav class="top-bar" data-topbar> 创建标准工具条。 .title-area 类定义了网站logo区域 (必须防止...

2023-01-01阅读(225)

价格表可用于展示企业产品: 实例解析 ul.pricing-table - 定义价格表 li.title - 定义产品标题 (黑色背景) li.price - 定义价格 (灰色背景字体大个项) li.descr...

2023-01-01阅读(257)

如果你的网页有很多内容，就需要使用分页功能。 要创建一个基础的分页功能需要在 <ul> 元素上加上 .pagination 类: 当前页面 可以在 <li> 加上 .current ...

2023-01-01阅读(337)

选项卡使用 <ul class="tabs" data-tab> 来创建, 各个选项使用 <li> 元素并加上 .tab-title 类来创建。 提示: 当前选中项可...

2023-01-01阅读(353)

在 HTML 中，无序列表 (<ul>) 实例如下: 圆圈标识符 在 Foundation 中，无序列表 (<ul>) 的前缀符号为圆圈，使用 .circle 类，实例如下: 方块标识符 方块标识符前缀使用 .squ...

2023-01-01阅读(231)

在你想隐藏部分内容的显示时，可以使用折叠列表。 实例解析 .accordion 类和 data-accordion 属性用于创建一个可折叠的元素。 .accordion-navigation ...

2023-01-01阅读(283)

Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值： 实例解析 .dropdown 类为按钮添加一个向下的箭头符号"图标。 使用按钮或链接的 data-dropdown="id" 属性来打开下...

2022-12-31阅读(282)

缩略图 在 <img> 元素外添加 <a> 元素将图片作为一个锚链接。 在 <a> 标签中添加 .th 类将图片设置为缩略图...

2022-12-31阅读(219)

Foundation 面板是一个灰色边框，内容含有内边距的模块。可以使用 .panel 类来创建: 面板颜色 使用 .callout 类将面板颜色修改为浅蓝： 圆角面板 使用 .radius...