请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

Foundation5 教程

RSS
  • Foundation 网格 - 大型设备
    Foundation 网格 - 大型设备
    Foundation 网格 - 大型设备上一章节我们介绍了中型设备和小型设备的网格布局,小型设备上使用的比例为 25%/75% (.small-3 和 .small-9),但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6):div class= ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:04 | 阅读:131 | 回复:0
  • Foundation 块状网格
    Foundation 块状网格
    Foundation 块状网格块状网格用于均分页面内容:例如一行内要显示四张图片,不管什么屏幕下都需要均分宽度。可以使用 ul 元素加上 .small|medium|large-block-grid-num 类来创建块状网格。num 用于指定均分是数量: ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:04 | 阅读:119 | 回复:0
  • Foundation 网格实例
    Foundation 网格实例
    Foundation 网格实例以下我们收集了一些网格常用的实例。三个均等列该实例演示了如何创建三个均等列(33.3%/33.3%/33.3%) ,在中型和大型设备上显示三个列,在小型设备上自动堆叠:实例div class=row div c_来自Found ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:04 | 阅读:129 | 回复:0
  • Foundation 图标参考手册
    Foundation 图标参考手册
    Foundation 图标参考手册Foundation 图标Foundation 提供了 283 图标,你可以使用 CSS 来渲染她们:修改大小和颜色。图标创建语法格式如下:i class=fi-name/i语法中 name 部分为图标指定的名_来自Foundation5 教程 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:04 | 阅读:123 | 回复:0
  • Foundation CSS 参考手册
    Foundation CSS 参考手册
    Foundation CSS 参考手册Foundation 默认设置Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说,字体大小默认为 16px。对于移动设备的浏览器,字体默认大小为 12px。默认的字体 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:04 | 阅读:134 | 回复:0
  • Foundation CSS 可见性
    Foundation CSS 可见性
    Foundation CSS 可见性根据屏幕尺寸显示元素以下类会根据设备(屏幕尺寸)来显示元素。 类 描述 .show-for-small-only 只在小型设备上显示元素 (屏幕宽度小于 40.0625em ) .show-for-medium- ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:04 | 阅读:127 | 回复:0
  • Foundation 提示框
    Foundation 提示框
    Foundation 提示框提示框在鼠标移动到元素上后显示:我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。 注意: 滑块需要使用 JavaScript。所以你需要初始化oundatio ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:03 | 阅读:126 | 回复:0
  • Foundation 模态框
    Foundation 模态框
    Foundation 模态框模态框是一个显示在页面头部的弹窗。我们可以在容器元素上(如 div id=myModal)使用唯一 ID,并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-_来 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:03 | 阅读:128 | 回复:0
  • Foundation Joyride
    Foundation Joyride
    Foundation JoyrideJoyride 是一个功能向导的 JavaScript 效果,创建实例如下:实例!-- Elements that control the tour stops --h3 id=firstFirst stop_来自Foundation5 教程……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:03 | 阅读:127 | 回复:0
  • Foundation 均衡器
    Foundation 均衡器
    Foundation 均衡器(Equalizer)我们可以在容器元素添加 data-equalizer 属性,并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。注意: 滑块需要使用 JavaS ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:03 | 阅读:125 | 回复:0
  • Foundation 网格系统
    Foundation 网格系统
    Foundation 网格系统Foundation 网格系统为 12 列。如果你不需要 12 列,你可以合并一些列,创建一些更大宽度的列。Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上,可能是三列, ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:03 | 阅读:135 | 回复:0
  • Foundation 网格 - 水平堆叠
    Foundation 网格 - 水平堆叠
    Foundation 网格 - 水平堆叠以下实例创建了一个基本的网格系统,在 PC 和平板设备上它是水平平铺的,在手机等小型设备上它是水平堆叠的。实例div class=rowdiv class=medium-6co_来自Foundation5 教程 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:03 | 阅读:126 | 回复:0
  • Foundation 网格 - 小型设备
    Foundation 网格 - 小型设备
    Foundation 网格 - 小型设备假设我们在小型设备上有一个简单的网格布局,两列,宽度比例为 25% 和 75%。提示: 小型设备的定义是屏幕小于 40.0625em。小型设备上我们使用 .small-* 类。div class=small-3 columns&_来 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:03 | 阅读:123 | 回复:0
  • Foundation 网格 - 中型设备
    Foundation 网格 - 中型设备
    Foundation 网格 - 中型设备上一章节我们介绍了小型设备上我们使用 .small-* 类来设置,网格比例为 25%/75%:div class=small-3 columns..../divdiv class=s_来自Foundation5 教程 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:03 | 阅读:145 | 回复:0
  • Foundation 侧边栏
    Foundation 侧边栏
    Foundation 侧边栏侧边栏导航Foundation 使用 ul class=side-nav 创建侧边栏:实例ul class=side-nav lia href=_来自Foundation5 教程……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:02 | 阅读:132 | 回复:0
  • Foundation 滑动导航(Off-Canvas)
    Foundation 滑动导航(Off-Canvas)
    Foundation 滑动导航(Off-Canvas)侧边栏导航Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了(点击菜单按钮菜单从左侧滑出):创建滑动导航创建滑动导航实例如下:实例!-- 最外层div:页面布局 --div class=off ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:02 | 阅读:140 | 回复:0
  • Foundation Magellan
    Foundation Magellan
    Foundation 麦哲伦(Magellan)导航如何创建麦哲伦导航麦哲伦导航就是一个导航索引,创建方式如下:实例 div data-magellan-expedition=fixed dl class=sub-nav&qu_来自Foundation5 教程 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:02 | 阅读:127 | 回复:0
  • Foundation 表单
    Foundation 表单
    Foundation 表单Foundation 表单控制会自动设置为全局样式:所有 textarea, select 及 input 元素宽度都为 100%,且带有外边距、内边距、阴影喝鼠标移动效果。实例formInput:_来自Foundation5 教程 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:02 | 阅读:122 | 回复:0
  • Foundation 输入框尺寸
    Foundation 输入框尺寸
    Foundation 输入框尺寸使用网格的列来设置输入框的大小,如 .large-6, .medium-6, 等。更多网格系统知识,可以点击 网格系统 教程。实例 form div class=row&n_来自Foundation5 教程 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:02 | 阅读:121 | 回复:0
  • Foundation 开关
    Foundation 开关
    Foundation 开关开关是在鼠标点击(手指敲击)下在 On 和 Off 状态下切换:切换开关使用 div class=switch 创建。div 内添加带有唯一 id 的 inpu_来自Foundation5 教程……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:02 | 阅读:138 | 回复:0
  • Foundation 滑块
    Foundation 滑块
    Foundation 滑块Foundation 滑块允许用户通过拖动来选取区间值:滑块可以通过使用 div class=range-slider data-slider 创建。在div 内, 添加两个 span 元素: _来自Foundation5 教程 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:02 | 阅读:140 | 回复:0
  • Foundation 面板
    Foundation 面板
    Foundation 面板Foundation 面板是一个灰色边框,内容含有内边距的模块。可以使用 .panel 类来创建:实例div class=panel h3标题/h3 p文本内容._来自Foundation5 教程……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:01 | 阅读:138 | 回复:0
  • Foundation 图片
    Foundation 图片
    Foundation 图片Foundation 提供了响应式的图片,可以创建缩略图喝图片弹窗:尝试一下 »缩略图在 img 元素外添加 a 元素将图片作为一个锚链接。在 a 标签中添加 .th 类将图片设置为缩略图。 鼠标移动到上面会显示一 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:01 | 阅读:136 | 回复:0
  • Foundation 下拉菜单
    Foundation 下拉菜单
    Foundation 下拉菜单Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值:实例!-- Trigger the Dropdown --a href=# data-dropdown=id01 class=&_来自Foundation5 教程 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:01 | 阅读:138 | 回复:0
  • Foundation 折叠列表
    Foundation 折叠列表
    Foundation 折叠列表在你想隐藏部分内容的显示时,可以使用折叠列表。实例ul class=accordion data-accordion li class=accordion-navigation&_来自Foundation5 教程……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:01 | 阅读:152 | 回复:0
  • Foundation 列表
    Foundation 列表
    Foundation 列表在 HTML 中,无序列表 (ul) 实例如下:ul liList item/li liList item/li liList_来自Foundation5 教程……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:01 | 阅读:144 | 回复:0
  • Foundation 选项卡
    Foundation 选项卡
    Foundation 选项卡选项卡导航可以很好的展示不同的内容,并可以对内容进行切换。选项卡使用 ul class=tabs data-tab 来创建, 各个选项使用 li 元素并加上 .tab-title 类来创建。提示: 当前选中项可以使用_来自Founda ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:01 | 阅读:147 | 回复:0
  • Foundation 分页
    Foundation 分页
    Foundation 分页如果你的网页有很多内容,就需要使用分页功能。要创建一个基础的分页功能需要在 ul 元素上加上 .pagination 类:实例ul class=pagination lia href_来自Foundation5 教程 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:01 | 阅读:137 | 回复:0
  • Foundation 价格表
    Foundation 价格表
    Foundation 价格表价格表可用于展示企业产品:实例ul class=pricing-table li class=titleBasic/li li class=&q_来自Foundation5 教程……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:01 | 阅读:144 | 回复:0
  • Foundation 顶部导航栏
    Foundation 顶部导航栏
    Foundation 顶部导航栏顶部导航栏放在页面头部:实例nav class=top-bar data-topbar ul class=title-area li_来自Foundation5 教程……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:01 | 阅读:125 | 回复:0
  • Foundation 表格
    Foundation 表格
    Foundation 表格Foundation 的 table 元素样式为灰色斑马条纹且包含四个边框:实例table thead tr&nb_来自Foundation5 教程……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:00 | 阅读:140 | 回复:0
  • Foundation 按钮
    Foundation 按钮
    Foundation 按钮按钮样式Foundation 提供了 6 种按钮样式。 .button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为: .secondary, .success, .info, .warning 或 .alert:实例button type=bu_来自Foundation ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:00 | 阅读:139 | 回复:0
  • Foundation 按钮组
    Foundation 按钮组
    Foundation 按钮组按钮组Foundation 可以在同一行内创建一系列的按钮。可以使用 ul 元素并添加 .button-group 类来创建按钮组:实例ul class=button-group li&l_来自Foundation5 教程 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:00 | 阅读:140 | 回复:0
  • Foundation 图标
    Foundation 图标
    Foundation 图标Foundation 提供了 283 个图标,你可以使用css来定义它的样式尺寸。图标可用于文本,按钮,工具条,导航栏,表单等。以下是 Foundation 图标的实例:刷新按钮: 检测图标: 主页图标: 图标语法创 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:00 | 阅读:132 | 回复:0
  • Foundation 标签
    Foundation 标签
    Foundation 标签.label 类用于提供一些附加信息:实例h2Example span class=labelNew/span/h2h3Example span class=&q_来自Foundation5 教程……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:00 | 阅读:132 | 回复:0
  • Foundation 提醒框
    Foundation 提醒框
    Foundation 提醒框Foundation 可以很简单的创建一个提醒框:提醒框可以使用 .alert-box 类创建, 可以添加可选的类: .secondary, .success, .info, .warning 或 .alert:实例div data-alert class=&qu_来自Foundation ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:00 | 阅读:136 | 回复:0
  • Foundation 进度条
    Foundation 进度条
    Foundation 进度条Foundation 进度条可以作为程序处理的程度来显示:我们可以在 div 元素中使用 .progress 类来创建进度条,.meter 类用于子元素(span)。我们可以在 span 元素中设置进度百分比,如下所示:实例_来自 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 20:00 | 阅读:138 | 回复:0
  • Foundation 教程
    Foundation 教程
    Foundation 5 教程 Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。_来自Foundation5 ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 19:59 | 阅读:971 | 回复:0
  • Foundation 起步
    Foundation 起步
    Foundation 起步什么是 Foundation? Foundation 是一个免费的前端框架,用于快速开发。 Foundation 包含了 HTML 和 CSS 的设计模板,提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。同时也提供了多种 Java ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 19:59 | 阅读:162 | 回复:0
  • Foundation 文本
    Foundation 文本
    Foundation 文本Foundation 默认设置Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说,字体默认为 16px。对于大多数移动端浏览器来说,字体默认为 12px。默认的字体为 Helvetica Neu ...……
    作者:菜鸟教程小白 | 时间:2022-1-31 19:59 | 阅读:151 | 回复:0
热门推荐
专题导读
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap