Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架

元素中使用 .progress 类来创建进度条， .meter 类用于子元素()。我们可以在元素中设置进度百分比

。。。。。。。

进度条颜色

默认情况下，进度条颜色为蓝色。不同颜色的类为：.secondary, .success, 或 .alert

。。。。。。。

圆角进度条。.radius 和 .round 类用于为进度条添加圆角效果

。。。。。。。

进度条尺寸

可以使用 .small-num 或 .large-num 来修改进度条的宽度， num 是一个数字在 1(8.33%) 和 12(default (100%)) 之间

。。。。。。。

进度条标签，可以使用 CSS 为进度条添加标签。我们可以添加元素来显示百分比

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 面板

Foundation 面板是一个灰色边框，内容含有内边距的模块。可以使用 .panel 类来创建

。。。。。。。

面板颜色，使用 .callout 类将面板颜色修改为浅蓝

。。。。。。。

自定义面板

可以使用 CSS 来自定义面板。

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 图片

Foundation 提供了响应式的图片，可以创建缩略图和图片弹窗，Foundation 中图片默认是响应式的。

。。。。。。。

缩略图

在元素外添加元素将图片作为一个锚链接。

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

。。。。。。。

圆角图片

我们可以在 .th 类添加 .radius 类来设置圆角缩略图

。。。。。。。

简洁的弹窗

Foundation 可以很容易实现图片弹窗。

要创建一个弹窗可以在

元素上添加 .clearing-thumbs 类及 data-clearing 属性。在

内添加图片列表。

注意: 图片弹窗需要 JavaScript。所以使用它前需要初始化 Foundation JS。

图片文本描述，在img里面可以添加 data-caption 属性到每个图片来设置图片的描述，你可以在 data-caption 属性中添加 HTML 元素，如 data-caption="

Pulpit Rock

。。。。。。

只显示一张缩略图

当你需要实现只显示一张缩略图时你可以在

中使用 .clearing-feature 类并在

中使用 .clearing-featured-img 类。

:::::::::::::::::::::::::::::::::::::::::::::::

Foundation 下拉菜单

Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值

.dropdown 类为按钮添加一个向下的箭头符号"图标。

使用按钮或链接的 data-dropdown="id" 属性来打开下拉菜单。

id 值需要与下拉菜单的内容 (id) 匹配。

在
,
,
中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。

最后初始化 Foundation JS。

注意: 在小屏幕上，所有的下拉菜单的宽度是100%。

。。。。。。。。。

下拉菜单尺寸

使用 .tiny, .small, .medium, .large 或 .mega 来修改下拉菜单的宽度。

注意: 在小屏幕上，所有的下拉菜单的宽度是100%。

。。。。。。。。。

下拉菜单边距

可以使用 .content 类为下拉菜单添加内边距，没加就没有。

。。。。。。。。。

下拉菜单方向

默认情况下下拉菜单在底部，可以通过添加 data-options="align:left，right，top" 来修改其方向

。。。。。。。。。

下拉菜单触发条件

默认情况下，下拉菜单在点击按钮后显示。如果你需要在鼠标移动上去后显示，可以在按钮上使用 data-options="is_hover:true" 属性

。。。。。。。。

分割按钮

我们可以在按钮上添加 .split 类来设置一个分割效果的按钮，分割后会在元素上生成一个方向向下的图标按钮

::::::::::::::::::::::::::::::::::::

Foundation 折叠列表

在你想隐藏部分内容的显示时，可以使用折叠列表。

。。。。。。。。

.accordion 类和 data-accordion 属性用于创建一个可折叠的元素。 .accordion-navigation 类用于渲染可折叠元素。实际的内容在 .content 类 (

我们在列表项中添加元素来控制（显示/隐藏）可折叠的内容。然后锚链接使用与可折叠内容内容相同的id ( 相关联)。

注意：可折叠的效果需要初始化 Foundation JS。

默认情况下，可折叠内容是隐藏的。我们可以通过在
上添加 .active 类让其默认是显示的

。。。。。。。。

手风琴效果

手风琴效果用于延展与设置可折叠内容。

手风琴效果通过使用多个不同的锚链接与id来创建

默认情况下，手风琴列表项有一个是打开的。如果你想关闭所有可以使用 data-options="multi_expand:true;" 属性

::::::::::::::::::::::::::::::::::::::::::

Foundation 列表

。。。。。。。

圆圈标识符，在 Foundation 中，无序列表 (
) 的前缀符号为圆圈，使用 .circle 类

方块标识符，方块标识符前缀使用 .square 类

无标识符，如果你不需要标识符，你可以使用 .no-bullet 类

如果你需要添加一个水平的列表，可以在
上添加 .inline-list 类

。。。。。。。

列表菜单

一些 Web 页面可能需要列表菜单。

在 HTML 中，列表菜单同无序列表
来定义

::::::::::::::::::::::::::::::::::::::::::::::

Foundation 选项卡

选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。

选项卡使用
来创建, 各个选项使用
元素并加上 .tab-title 类来创建。提示: 当前选中项可以使用 .active 类。

。。。。。。。

垂直的选项卡

垂直选项卡可以使用 .vertical 类

。。。。。。。

切换选项卡

如果要设置切换标签，可以使用
元素加上 .content 类。每个选项卡上加上唯一的 ID, 并连接到列表项 ( 元素上，该
元素需要添加 .tabs-content 类，并初始化 Foundation JS。

注意 .active 类会自动添加到当前选中的选项卡上

。。。。。。。

选项卡淡入

使用 CSS 来自定义选项卡淡入的效果

::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 分页

如果你的网页有很多内容，就需要使用分页功能。

分页 - 当前页。当前页面需要添加 .current 类

。。。。。。。

要创建一个基础的分页功能需要在
元素上加上 .pagination 类，.pagination 类提供了分页链接

可以在
加上 .current 类来标注当前页面，如果需要设置某个分页不可点击需要使用 .unavailable 类

。。。。。。。

分页方向

在第一个和最后一个
元素上添加.arrow 类插入 HTML 实体符号 « 和 » 来创建分页方向符号

。。。。。。。

分页居中显示

我们可以在
外层添加
元素，并在
上添加.pagination-centered 类来实现分页居中显示

。。。。。。。

面包屑导航

面包屑导航用于展示当前页面的导航结构。

在
元素上添加 .breadcrumbs 类来实现面包屑导航。你可以在
上添加 .current 或 .unavailable 类设置当前页与不可点击效果:

。。。。。。。

子导航

在页面切换上，子导航是非常有用的。

在
元素上添加 .sub-nav 类来创建子导航。在
元素上添加标题，为选中的选项
添加 .active 类

:::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 价格表

价格表可用于展示企业产品

ul.pricing-table - 定义价格表

li.title - 定义产品标题 (黑色背景)

li.price - 定义价格 (灰色背景字体大个项)

li.description - 定义产品描述 (如果需要)

li.bullet-item - 定义产品特点

li.ca-button - 按钮文本 (如 "Buy", "Join", "Sign Up", 等)

注意: 表格会 100% 填充容器的宽度，所有的项都有边框且是居中的。

。。。。。。。

价格表网格

:::::::::::::::::::::::::::::::::::::::::::::::

Foundation 顶部导航栏

顶部导航栏放在页面头部

使用
创建标准工具条。 .title-area 类定义了网站logo区域 (必须防止 li.name 内) 。屏幕变小后你就可以看到一个 "menu" 按钮。 Foundation 的菜单会根据屏幕尺寸自动折叠和延展：

小屏幕上，由于尺寸的原因很多选项会被隐藏。 li.toggle-topbar menu.icon 类创建了一个菜单的按钮，点击它可以显示被隐藏的选项。

.top-bar-section 定义了导航的链接部分。 .left 类指定链接左对齐。 .active 类用于显示选中的项，背景为蓝色。

提示: 如果你想导航链接右对齐可以将 .left 修改为 .right，你可以同时设置左边对齐与右边对齐

导航栏可以通过 .divider 类来添加分割线 (大屏幕上是垂直的线，小屏幕上是水平线)

。。。。。。。。

导航栏的下拉菜单

顶部导航栏可以设置下拉菜单。

可以通过在
元素上添加 .has-dropdown 类来设置下拉菜单

分割线，使用 .divider 类来设置下拉菜单的分割线

下拉菜单标签，在
内添加元素来设置下拉菜单的标签(标题)

可点击，默认情况下导航栏的下拉菜单在鼠标移动过去后显示，我们可以使用 data-options="is_hover: false" 属性来设置导航栏在鼠标在点击后显示

。。。。。。。。

导航栏上的按钮及图标

你可以在导航栏上放置图标和按钮

。。。。。。。。

固定导航栏

导航栏可以固定在页面顶部。

页面滚动时导航栏在顶部是不会动的。

要固定导航栏只需要将导航栏放在
内即可

导航栏绝对定位

我们可以将导航栏放在
内来设置导航栏的绝对定位，当滚动条滚到到该区域时，该导航栏就像固定导航栏一样在顶部不动

当你使用 .sticky 类时，顶部导航栏在所有屏幕尺寸上将固定不动。如果你需要在指定屏幕上设定只需要在
上添加 data-options="sticky_on: small|medium|large" 属性即可

::::::::::::::::::::::::::::::::::::::::::::

Foundation 侧边栏

侧边栏导航，Foundation 使用
创建侧边栏

。。。。。。。。

激活链接与分割线，已点击的链接可以在
上使用 .active 类来标识，使用 .divider 类添加水平分割线

。。。。。。。。

网格中的侧边栏，我们可以使用网格设计模式来设置侧边导航栏

::::::::::::::::::::::::::::::::::::::::::::::

Foundation 滑动导航(Off-Canvas)

侧边栏导航，Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了 (点击菜单按钮菜单从左侧滑出)

::::::::::::::::::::::::::::::::::::::::::::::

Foundation 麦哲伦（Magellan）导航

Magellan，麦哲伦导航就是一个导航索引，位置是固定的，会根据用户滚动当前展示的内容自动切换导航栏上的导航项

麦哲伦导航内边距，默认情况下，麦哲伦导航的
元素有 10px 的内边距。可以使用 CSS 移除它

在
元素上添加 data-magellan-expedition="fixed" 属性来创建麦哲伦导航。

然后在
或
上添加 data-magellan-arrival="value" 属性，后面添加一个与该属性值一样的链接(page1)。

使用 data-magellan-destination="value" 属性来控制麦哲伦导航的目标, 后面紧跟的元素添加 name="value" 属性。两个属性的值必须与 data-magellan-arrival 的值一致 (page1)。

最后，初始化 Foundation JS ，用户在滚动页面时导航就会根据当前显示的内容自动切换。

。。。。。。。。。

麦哲伦导航选项

使用 data-options 属性修改麦哲伦导航的设置, 例如
:

名称类型默认描述

active_class string active 指定激活链接的类

threshold number 0 指定导航在什么时候需要固定位置。会根据滚动条滚动计算，默认为 0 (auto)。

destination_threshold number 20 设该值设定了导航链接显示为激活（蓝色背景）时导航列表距离顶部的值。

fixed_top number 0 指定了导航条距离头部的像素值

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 表单

Foundation 表单控制会自动设置为全局样式:

所有 , <select> 及 <input> 元素宽度都为 100%，且带有外边距、内边距、阴影和鼠标移动效果。 。。。。。。。。。 标签，在表单中使用 <label> 元素来设置标签，标签可以添加 for 属性和 id 属性。用户在点击标签或输入域时获取输入框焦点，如果需要设置标签右对齐，可以使用 .right 类 。。。。。。。。。 Fieldset，Foundation 渲染 <fieldset> 元素的样式 。。。。。。。。。 错误状态 使用 .error 类来设置错误的标签、输入框、文本框样式，你需要使用 JavaScript 来更新用户输入的错误状态。 ::::::::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 输入框尺寸，使用网格的列来设置输入框的大小，如 .large-6, .medium-6, 等。 。。。。。。。。。 内联标签，如果你希望你的标签内容显示在左边（不是上边），可以将标签元素 label 放在输入框左边的不同的列上，并使用 .inline 类来设置垂直居中 。。。。。。。。。 前置和后置标签 你可以在 <div class="row collapse"> 中添加前置和后置标签，元素为： <element class="postfix"> 或 <element class="prefix">。可以使用网格系统来设置前置和后置标签的大小 。。。。。。。。。 前置和后置标签按钮，可以使用 <a> 元素添加 .button 类来设置前置和后置按钮 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 开关 开关是在鼠标点击(手指敲击)下在 "On" 和 "Off" 状态下切换 切换开关使用 <div class="switch"> 创建。 <div> 内添加带有唯一 id 的 <input type="checkbox"> ， <label> 元素的 for 属性需要与 <input type="checkbox"> 的 id 相匹配 。。。。。。。。。 开关大小 使用 .large(最大)， .small(小)，.tiny(最小) 类来设置开关大小 。。。。。。。。。 圆角切换开关 使用 .radius 和 .round 类来设置圆角切换开关 。。。。。。。。。 开关组 可以通过设置单选按钮(radio)来设置单个选项。注意: 注意各个选项的 name 属性必须一致 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 滑块 Foundation 滑块允许用户通过拖动来选取区间值 滑块可以通过使用 <div class="range-slider" data-slider> 创建。在 <div> 内, 添加两个 元素: 创建矩形滑块（蓝色背景）， 是在滑块后的灰色横条，是滑块拖动区域。 注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS 。。。。。。。。。 圆角和禁用滑块，使用 .radius 和 .round 类来添加圆角滑块。使用 .disabled 类来禁用滑块 。。。。。。。。。 垂直滑块，使用 .vertical-range 类和 data-options="vertical: true;" 来创建垂直滑块 。。。。。。。。。 滑块值，默认情况下，滑块放在横条的中间 (数值为 "50")。可以通过添加 data-options="initial: num" 属性来修改默认值 。。。。。。。。。 显示滑块值，如果我们需要在滑块拖动时实时显示值，可以通过在 <div> 中添加 data-options="display_selector:#id" 属性且元素 id 值与滑块的 id 匹配 。。。。。。。。。 步长，默认情况下，滑块滑动的增加减少的数量为 "1"。可以通过添加 data-options="step: num;" 属性来修改步长值。 。。。。。。。。。 自定义区间，默认情况下，区间值在 "0" 到 "100"。可以通过添加 data-options start 和 end 来设置区间值 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 提示框 提示框在鼠标移动到元素上后显示 我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。 注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS .has-tip 类可以加粗鼠标移动的文本 。。。。。。。。。。 提示框显示位置 默认情况下，提示框会出现在元素的底部。 可以使用 .tip-top, .tip-left, .tip-right or .tip-bottom (默认) 来设置提示框的位置。 注意: 在小尺寸的屏幕上，提示框的宽带是 100%。 。。。。。。。。。。 圆角提示框 .radius 和 .round 类用于设置圆角提示框 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 模态框 模态框是一个显示在页面头部的弹窗。 我们可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id="id" 属性阿里打开模态框。 id 必须与容器 id 一致(实例为 "myModal")。 如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮 <a> 标签上添加 .close-reveal-modal 类来实现。 注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS 。。。。。。。。。。 模态框大小 可以在模态框容器上添加以下类来设置模态框的大小： .tiny: 30% 宽度 .small: 40% 宽度 .medium: 60% 宽度 .large: 70% 宽度 .xlarge: 95% 宽度 .full: 100% 宽度和高度 注意: 在平板、笔记本、PC 电脑上默认为 80% 宽度，在小屏幕设备上是 100% 宽度。 。。。。。。。。。。 内嵌模态框 你可以在模态框内嵌入模态框，可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id 第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时，不关闭第一个模态框。可以在第二个模态框上添加 data-options="multiple_opened:true;" 属性 ::::::::::::::::::::::::::::::::::::::::::::::::::: Foundation Joyride Joyride 是一个功能向导的 JavaScript 效果 最后，Joyride 需要使用 JavaScript 初始化它，代码为： $(document).foundation('joyride', 'start') :::::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 均衡器(Equalizer) 我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。 注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS 。。。。。。。。。 不同屏幕的均衡器 在均衡器上通过添加 data-equalizer-mq="value" 属性为不同屏幕尺寸设置相同高度。值可以是以下之一： 值 描述 medium-up 默认。创建相同高度的容器，宽度大于 40.063em large-up 创建相同高度的容器，宽度大于 64.063em xlarge-up 创建相同高度的容器，宽度大于 90.063em xxlarge-up 创建相同高度的容器，宽度大于 120.063em 。。。。。。。。 嵌套内容，为 data-equalizer 和 data-equalizer-watch 属性添加相同的值。这会一起连接到均衡器容器。重复多次嵌套均衡器，确保他们是匹配的 ::::::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 网格系统 Foundation 网格系统为 12 列。 如果你不需要 12 列，你可以合并一些列，创建一些更大宽度的列。 Foundation 的网格系统是响应式的。列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上，可能是三列，小屏幕尺寸就可能是三个单列，按顺序排列。 。。。。。 网格列 Foundation 网格系统有三个列： .small (手机端) .medium (平板设备) .large (电脑设备：笔记本，台式机) 以上类可以结合使用，创建更灵活的布局 。。。。。。 .small-12, 这会创建 12 列（100%宽度）。 .small-4 的宽度为33.3% ，.small-8 的宽度为 66.6%。 (.large-3 和 .large-9)。这意味着如果在大屏幕尺寸下，列就会变为 25% (.large-3) 和 75% (.large-9)的比例。同时我们也指定了小屏幕上列的比例 33% (.small-4) 和 66% (.small-8) 。这种组合的方式对于不同屏幕显示效果是非常有帮助的。 。。。。。。。 网格选项 下面总结了 Foundation 网格系统在多个设备上的说明： 小型设备Phones (<40.0625em (640px)) 中等设备Tablets (>=40.0625em (640px)) 大设备Laptops & Desktops (>=64.0625em (1025px)) 网格行为 一直是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的 类前缀 .small-* .medium-* .large-* 类的数量 12 12 12 可内嵌 Yes Yes Yes 偏移量 Yes Yes Yes 列排序 Yes Yes Yes 。。。。。。。。 宽屏，网格最大(.row) 宽度为 62.5rem。在宽屏上，当宽度大于 62.5rem, 列不会跨越页面的宽度，即使宽度设定为 100%。但你可以通过 CSS 重新设置 max-width 如果你使用默认的 max-width, 但希望背景颜色跨越整个页面宽度，你可以使用 .row 包裹整个容器，并指定你需要的背景颜色 :::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 网格 - 水平堆叠 在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。 提示: .small|medium|large-* 类中的数字指定了跨越的列数。所以， .small-1 跨越 1 列, .small-4 跨越 4 列, .small-6 跨越 6 列 (50% 宽度) 等。 注意: 要保证数列加起来是 12 列! :::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 网格 - 小型设备 假设我们在小型设备上有一个简单的网格布局，两列，宽度比例为 25% 和 75%。 提示: 小型设备的定义是屏幕小于 40.0625em。 小型设备上我们使用 .small-* 类，网格比例为 25%/75%。 Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码： .small in them and use those"，注意: 要保证数列加起来是 12 列! 如果需要设置 33.3%/66.6% 的比例，你可以使用 .small-4 和 .small-8 ::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 网格 - 中型设备 在中型设备上我们推荐的比例为 50%/50%。 提示: 中型设备的屏幕尺寸定义在 40.0625em 到 64.0624em 之间。 中型设备上使用 .medium-* 类。 小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)。但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6) 。注意: 要保证数列加起来是 12 列! 。。。。。。。。。。 仅在中型设备上使用 .medium-6 类 (不是 .small-*)。这表明在中型或大型设备上比例为 50%/50%。但在小型设备上会水平堆叠 (100% 宽度) ::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 网格 - 大型设备 中型设备和小型设备的网格布局，小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)，但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6) 在大型设备上我们推荐的比例为 33%/66%。 提示: 大型设备的屏幕尺寸定义大于 64.0625em。 大型设备上使用 .large-* 类。 。。。。。。。。。。 小型设备两个列的比例为 25%/75% (.small-3 和 .small-9) 中型设备两个列的比例为 50%/50% (.medium-6 和 .medium-6) 大型设备两个列的比例为 33%/66% (.large-4 和 .large-8) 注意: 要保证数列加起来是 12 列! 。。。。。。。。。。 仅在大型设备上使用 .large-6 类 (不是 .medium-* 和 .small-*)。这表明在大型设备上比例为 50%/50%。但在中型或小型设备上会水平堆叠 (100% 宽度) ::::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 块状网格 块状网格用于均分页面内容：例如一行内要显示四张图片，不管什么屏幕下都需要均分宽度。 可以使用 <ul> 元素加上 .small|medium|large-block-grid-num 类来创建块状网格。num 用于指定均分是数量 。。。。。。。。。 不同尺寸屏幕显示不同数量 通过添加多个网格块类可以设置不同尺寸屏幕显示不同的块数量 ::::::::::::::::::::::::::::::::::::::::::::::::::::: Foundation 网格 以下收集了一些网格常用的实例。 。。。。。。。 三个均等列，创建三个均等列 (33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠，.medium-4 columns，.medium-4 columns，.medium-4 columns 。。。。。。。 三个不均等列，创建三个不均等列 (25%/50%/25%)，在中型和大型设备上显示三个列，在小型设备上自动堆叠，.medium-3 columns，.medium-6 columns，.medium-3 columns 。。。。。。。 两个均等列，创建两个均等列 (50%/50%)，在小型、中型和大型设备上列的比例始终为 50%/50%，.small-6 columns，.small-6 columns 。。。。。。。 两个不均等列，创建两个不均等列 (33.3%/66.6%)，在小型、中型和大型设备上列的比例始终为 33.3%/66.6%，.small-8 columns，.small-8 columns 。。。。。。。 修改列的顺序，通过使用 .small|medium|large-push-* 和 .small|medium|large-pull-* 类来修改列的顺序 。。。。。。。 混合：手机、桌面设备 Foundation 网格系统有三个列: .small-* (手机), .medium-* (平板), 和 .large-* (桌面设备)。这些类可以动态组合使用，让布局更加灵活： 提示：每个类都能放大，如果你希望小型和大型屏幕设备的宽度一样可以设置指定 .small-*。 。。。。。。。 居中列，列居中可以使用 .small-centered 类。中型和大型设备可以继承小型设备的居中，但你需要在大型设备上设置居中类.large-centered 。 。。。。。。。 列偏移量，可以使用 .large-offset-* (或 .small-offset-*) 类设置列向右移。左侧外边距的列数量使用 * 号控制 。。。。。。。 不完整列，如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动，并使用空白来填充剩下的列。 可选项 .end 类用于设置最后一列的元素向左边浮动 。。。。。。。 宽屏，网格 (.row) 最大尺寸（ max-width）为 62.5rem。在宽屏设备上尺寸可能大于 62.5rem, 这样列就无法完整填充页面，即便宽度设置为 100%。但是我们可以通过 CSS 来设置新的 max-width :::::::::::::::::::::::::::::::::::::::::::::: Foundation 图标 Foundation 提供了 283 图标，你可以使用 CSS 来渲染她们：修改大小和颜色。 图标创建语法格式如右所示： 语法中 name 部分为图标指定的名称。要使用图标，你可以将图标的样式文件放置在页面头部 <head> 部分，样式文件如下所示： <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css"> ::::::::::::::::::::::::::::::::::::::::::::::: Foundation CSS Foundation 默认设置 Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说，字体大小默认为 16px。对于移动设备的浏览器，字体默认大小为 12px。默认的字体为 "Helvetica Neue"， line-height 默认为 1.5。 这些设置是适用于 <body> 元素内的元素。 此外， 元素与底部的外边距(margin-bottom) 为 1.25rem , line-height 为 1.6。 。。。。。。。。。 文本 以下的 HTML 元素，Foundation 设置了独立的样式渲染它，不会采用浏览器默认样式。 元素 描述 <h1> - <h6> h1 - h6 标题 <a> 浅蓝色的链接，鼠标移动到链接会有下划线 浅灰色的副标题文本 <blockquote> 引用内容模块 加粗文本 斜体 <abbr> 指定单词的缩写，使用该元素文本出现虚线下划线，鼠标移动上去会有提示信息 <kbd> 接收键盘输入指令: CTRL + P <hr> 水平线 <code> 代码片段 <ul> 无序列表 <ol> 有序列表 <dl> 描述性列表 文本对齐 使用 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 尺寸屏幕两端对齐 其他 类 描述 .left 元素向左浮动 .right 元素向右浮动 .clearfix 清除浮动 - 必须添加在浮动元素的父元素上 .hide 隐藏元素 (CSS display: none) .list-inline 将所有元素设置在同一行 .lead 让 元素更突出 .subheader 设置浅色的 <h1> - <h6> 元素 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Foundation CSS 可见性 根据屏幕尺寸显示元素 以下类会根据设备(屏幕尺寸)来显示元素。 类 描述 .show-for-small-only 只在小型设备上显示元素 (屏幕宽度小于 40.0625em ) .show-for-medium-up 在中型及以上设备上显示元素 (屏幕宽度大于 40.0625em) .show-for-medium-only 只在中型设备上显示元素 (屏幕宽度在 40.0625em 到 64.0625em 之间) .show-for-large-up 在大型及以上设备上显示元素 (屏幕宽度大于 64.0625em) .show-for-large-only 只在大型设备上显示元素 (屏幕宽度在 64.0625em 到 90.0625em 之间) .show-for-xlarge-up 在更大型及以上设备上显示元素 (屏幕宽度大于 90.0625em) .show-for-xlarge-only 只在更大型及以上设备上显示元素 (屏幕宽度在 90.0625em 到 120.0625em之间) .show-for-xxlarge-up 在超大型及以上设备上显示元素 (屏幕宽度大于 120.0625em) 。。。。。。。。。。 根据屏幕尺寸隐藏元素 以下类会根据设备(屏幕尺寸)来隐藏元素。 类 描述 .hide-for-small-only 只在小型设备上隐藏元素 (屏幕宽度小于 40.0625em ) .hide-for-medium-up 在中型及以上设备上隐藏元素 (屏幕宽度大于 40.0625em) .hide-for-medium-only 只在中型设备上隐藏元素 (屏幕宽度在 40.0625em 到 64.0625em 之间) .hide-for-large-up 在大型及以上设备上隐藏元素 (屏幕宽度大于 64.0625em) .hide-for-large-only 只在大型设备上隐藏元素 (屏幕宽度在 64.0625em 到 90.0625em 之间) .hide-for-xlarge-up 在更大型及以上设备上隐藏元素 (屏幕宽度大于 90.0625em) .hide-for-xlarge-only 只在更大型及以上设备上隐藏元素 (屏幕宽度在 90.0625em 到 120.0625em之间) .hide-for-xxlarge-up 在超大型及以上设备上隐藏元素 (屏幕宽度大于 120.0625em) 。。。。。。。。。。 根据屏幕方向显示元素 我们可以设置元素在不同方向是是否显示或隐藏。笔记本等桌面设备一般是横向的，但是手机和平板设备可以是横向或纵向，我们可以根据用户手机拿的方向来设置元素隐藏与显示 以下类会根据设备(屏幕尺寸)来隐藏元素。 类 描述 .show-for-landscape 在横向时显示元素（纵向隐藏） .show-for-portrait 在纵向时显示元素（横向隐藏） 。。。。。。。。。。 触屏设备的显示与隐藏 你可以根据设备是否支持触摸来显示与隐藏元素。 类 描述 .show-for-touch 在支持触屏的设备上显示(不支持的设备上隐藏) .hide-for-touch 在支持触屏的设备上隐藏(不支持的设备上显示) 来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/31552074/viewspace-2215049/，如需转载，请注明出处，否则将追究法律责任。 </div> 转载于:http://blog.itpub.net/31552074/viewspace-2215049/ </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1719142300275257344"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835514462770130944.htm" title="斤斤计较的婚姻到底有多难？" target="_blank">斤斤计较的婚姻到底有多难？</a> 白心之岂必有为 <div>很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响</div> </li> <li><a href="/article/1835514464028422144.htm" title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a> 露露_e800 <div>今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得</div> </li> <li><a href="/article/1835514335561084928.htm" title="芦花鞋一四" target="_blank">芦花鞋一四</a> 许叶晗 <div>又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花</div> </li> <li><a href="/article/1835514307744460800.htm" title="QQ群采集助手，精准引流必备神器" target="_blank">QQ群采集助手，精准引流必备神器</a> 2401_87347160 <a class="tag" taget="_blank" href="/search/%E5%85%B6%E4%BB%96/1.htm">其他</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以</div> </li> <li><a href="/article/1835514207114719232.htm" title="关于沟通这件事，项目经理不需要每次都面对面进行" target="_blank">关于沟通这件事，项目经理不需要每次都面对面进行</a> 流程大师兄 <div>很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些</div> </li> <li><a href="/article/1835513803861749760.htm" title="机器学习与深度学习间关系与区别" target="_blank">机器学习与深度学习间关系与区别</a> ℒℴѵℯ心·动ꦿ໊ོ꫞ <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入</div> </li> <li><a href="/article/1835513701143244800.htm" title="铭刻于星（四十二）" target="_blank">铭刻于星（四十二）</a> 随风至 <div>69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但</div> </li> <li><a href="/article/1835513570171908096.htm" title="底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说" target="_blank">底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说</a> 造命者说 <div>底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡</div> </li> <li><a href="/article/1835513571501502464.htm" title="2020-01-25" target="_blank">2020-01-25</a> 晴岚85 <div>郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什</div> </li> <li><a href="/article/1835513568917811200.htm" title="随笔 | 仙一般的灵气" target="_blank">随笔 | 仙一般的灵气</a> 海思沧海 <div>仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，</div> </li> <li><a href="/article/1835513567663714304.htm" title="想家" target="_blank">想家</a> 爆米花机 <div>也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App</div> </li> <li><a href="/article/1835513551624695808.htm" title="【iOS】MVC设计模式" target="_blank">【iOS】MVC设计模式</a> Magnetic_h <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod</div> </li> <li><a href="/article/1835513551142350848.htm" title="OC语言多界面传值五大方式" target="_blank">OC语言多界面传值五大方式</a> Magnetic_h <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt</div> </li> <li><a href="/article/1835513440525971456.htm" title="一百九十四章. 自相矛盾" target="_blank">一百九十四章. 自相矛盾</a> 巨木擎天 <div>唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也</div> </li> <li><a href="/article/1835513424734416896.htm" title="UI学习——cell的复用和自定义cell" target="_blank">UI学习——cell的复用和自定义cell</a> Magnetic_h <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添</div> </li> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> 软件技术NINI <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835512809883004928.htm" title="10月|愿你的青春不负梦想-读书笔记-01" target="_blank">10月|愿你的青春不负梦想-读书笔记-01</a> Tracy的小书斋 <div>本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便</div> </li> <li><a href="/article/1835512542735200256.htm" title="C语言宏函数" target="_blank">C语言宏函数</a> 南林yan <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<<c<<endl;//800return0;}二、为什么要使用宏函数使用宏函数</div> </li> <li><a href="/article/1835512305320816640.htm" title="地推话术，如何应对地推过程中家长的拒绝" target="_blank">地推话术，如何应对地推过程中家长的拒绝</a> 校师学 <div>相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业</div> </li> <li><a href="/article/1835512178023690240.htm" title="谢谢你们，爱你们！" target="_blank">谢谢你们，爱你们！</a> 鹿游儿 <div>昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得</div> </li> <li><a href="/article/1835511911769272320.htm" title="C语言如何定义宏函数？" target="_blank">C语言如何定义宏函数？</a> 小九格物 <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参</div> </li> <li><a href="/article/1835511912192897024.htm" title="微服务下功能权限与数据权限的设计与实现" target="_blank">微服务下功能权限与数据权限的设计与实现</a> nbsaas-boot <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：</div> </li> <li><a href="/article/1835511912843014144.htm" title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a> 范范0825 <a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico</div> </li> <li><a href="/article/1835511669476913152.htm" title="小丽成长记（四十三）" target="_blank">小丽成长记（四十三）</a> 玲玲54321 <div>小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习</div> </li> <li><a href="/article/1835511542284644352.htm" title="学点心理知识，呵护孩子健康" target="_blank">学点心理知识，呵护孩子健康</a> 静候花开_7090 <div>昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果</div> </li> <li><a href="/article/1835511163450912768.htm" title="2021年12月19日，春蕾教育集团团建活动感受——黄晓丹" target="_blank">2021年12月19日，春蕾教育集团团建活动感受——黄晓丹</a> 黄错错加油 <div>感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们</div> </li> <li><a href="/article/1835511036317364224.htm" title="Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断" target="_blank">Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断</a> 尐尐呅 <div>结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序</div> </li> <li><a href="/article/1835511030260789248.htm" title="c++ 的iostream 和 c++的stdio的区别和联系" target="_blank">c++ 的iostream 和 c++的stdio的区别和联系</a> 黄卷青灯77 <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/iostream/1.htm">iostream</a><a class="tag" taget="_blank" href="/search/stdio/1.htm">stdio</a> <div>在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in</div> </li> <li><a href="/article/1835510909070569472.htm" title="瑶池防线" target="_blank">瑶池防线</a> 谜影梦蝶 <div>冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而</div> </li> <li><a href="/article/1835510656011431936.htm" title="爬山后遗症" target="_blank">爬山后遗症</a> 璃绛 <div>爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！</div> </li> <li><a href="/article/35.htm" title="JVM StackMapTable 属性的作用及理解" target="_blank">JVM StackMapTable 属性的作用及理解</a> lijingyao8206 <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E7%A0%81/1.htm">字节码</a><a class="tag" taget="_blank" href="/search/Class%E6%96%87%E4%BB%B6/1.htm">Class文件</a><a class="tag" taget="_blank" href="/search/StackMapTable/1.htm">StackMapTable</a> <div> 在Java 6版本之后JVM引入了栈图(Stack Map Table)概念。为了提高验证过程的效率，在字节码规范中添加了Stack Map Table属性，以下简称栈图，其方法的code属性中存储了局部变量和操作数的类型验证以及字节码的偏移量。也就是一个method需要且仅对应一个Stack Map Table。在Java 7版</div> </li> <li><a href="/article/162.htm" title="回调函数调用方法" target="_blank">回调函数调用方法</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>最近在看大神写的代码时,.发现其中使用了很多的回调 ,以前只是在学习的时候经常用到 ,现在写个笔记记录一下代码很简单: MainDemo :调用方法得到方法的返回结果 </div> </li> <li><a href="/article/289.htm" title="[时间机器]制造时间机器需要一些材料" target="_blank">[时间机器]制造时间机器需要一些材料</a> comsci <a class="tag" taget="_blank" href="/search/%E5%88%B6%E9%80%A0/1.htm">制造</a> <div> 根据我的计算和推测,要完全实现制造一台时间机器,需要某些我们这个世界不存在的物质和材料... 甚至可以这样说,这种材料和物质,我们在反应堆中也无法获得...... </div> </li> <li><a href="/article/416.htm" title="开口埋怨不如闭口做事" target="_blank">开口埋怨不如闭口做事</a> 邓集海 <a class="tag" taget="_blank" href="/search/%E9%82%93%E9%9B%86%E6%B5%B7+%E5%81%9A%E4%BA%BA+%E5%81%9A%E4%BA%8B+%E5%B7%A5%E4%BD%9C/1.htm">邓集海做人做事工作</a> <div>“开口埋怨，不如闭口做事。”不是名人名言，而是一个普通父亲对儿子的训导。但是，因为这句训导，这位普通父亲却造就了一个名人儿子。这位普通父亲造就的名人儿子，叫张明正。　　　　张明正出身贫寒，读书时成绩差，常挨老师批评。高中毕业，张明正连普通大学的分数线都没上。高考成绩出来后，平时开口怨这怨那的张明正，不从自身找原因，而是不停地埋怨自己家庭条件不好、埋怨父母没有给他创造良好的学习环境。　　　　</div> </li> <li><a href="/article/543.htm" title="jQuery插件开发全解析，类级别与对象级别开发" target="_blank">jQuery插件开发全解析，类级别与对象级别开发</a> IT独行者 <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91/1.htm">开发</a><a class="tag" taget="_blank" href="/search/%E6%8F%92%E4%BB%B6%E3%80%80/1.htm">插件　</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a> <div>jQuery插件的开发包括两种：一种是类级别的插件开发，即给 jQuery添加新的全局函数，相当于给 jQuery类本身添加方法。 jQuery的全局函数就是属于 jQuery命名空间的函数，另一种是对象级别的插件开发，即给 jQuery对象添加方法。下面就两种函数的开发做详细的说明。 1 、类级别的插件开发类级别的插件开发最直接的理解就是给jQuer</div> </li> <li><a href="/article/670.htm" title="Rome解析Rss" target="_blank">Rome解析Rss</a> 413277409 <a class="tag" taget="_blank" href="/search/Rome%E8%A7%A3%E6%9E%90Rss/1.htm">Rome解析Rss</a> <div>import java.net.URL; import java.util.List; import org.junit.Test; import com.sun.syndication.feed.synd.SyndCategory; import com.sun.syndication.feed.synd.S</div> </li> <li><a href="/article/797.htm" title="RSA加密解密" target="_blank">RSA加密解密</a> 无量 <a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%AF%86/1.htm">加密</a><a class="tag" taget="_blank" href="/search/%E8%A7%A3%E5%AF%86/1.htm">解密</a><a class="tag" taget="_blank" href="/search/rsa/1.htm">rsa</a> <div>RSA加密解密代码代码有待整理 package com.tongbanjie.commons.util; import java.security.Key; import java.security.KeyFactory; import java.security.KeyPair; import java.security.KeyPairGenerat</div> </li> <li><a href="/article/924.htm" title="linux 软件安装遇到的问题" target="_blank">linux 软件安装遇到的问题</a> aichenglong <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/1.htm">遇到的问题</a><a class="tag" taget="_blank" href="/search/ftp/1.htm">ftp</a> <div>1 ftp配置中遇到的问题 500 OOPS: cannot change directory 出现该问题的原因:是SELinux安装机制的问题.只要disable SELinux就可以了修改方法:1 修改/etc/selinux/config 中SELINUX=disabled 2 source /etc</div> </li> <li><a href="/article/1051.htm" title="面试心得" target="_blank">面试心得</a> alafqq <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>最近面试了好几家公司。记录下；支付宝，面试我的人胖胖的，看着人挺好的；博彦外包的职位，面试失败；阿里金融，面试官人也挺和善，只不过我让他吐血了。。。由于印象比较深，记录下； 1，自我介绍 2，说下八种基本类型；（算上string。楼主才答了3种，哈哈，string其实不是基本类型，是引用类型） 3，什么是包装类，包装类的优点； 4，平时看过什么书？NND，什么书都没看过。。照样</div> </li> <li><a href="/article/1178.htm" title="java的多态性探讨" target="_blank">java的多态性探讨</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>java的多态性是指main方法在调用属性的时候类可以对这一属性做出反应的情况 //package 1; class A{ public void test(){ System.out.println("A"); } } class D extends A{ public void test(){ S</div> </li> <li><a href="/article/1305.htm" title="网络编程基础篇之JavaScript-学习笔记" target="_blank">网络编程基础篇之JavaScript-学习笔记</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>1.documentWrite <html> <head> <script language="JavaScript"> document.write("这是电脑网络学校"); document.close(); </script> </h</div> </li> <li><a href="/article/1432.htm" title="探索JUnit4扩展：深入Rule" target="_blank">探索JUnit4扩展：深入Rule</a> bijian1013 <a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/Rule/1.htm">Rule</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div> 本文将进一步探究Rule的应用，展示如何使用Rule来替代@BeforeClass，@AfterClass，@Before和@After的功能。在上一篇中提到，可以使用Rule替代现有的大部分Runner扩展，而且也不提倡对Runner中的withBefores()，withAfte</div> </li> <li><a href="/article/1559.htm" title="[CSS]CSS浮动十五条规则" target="_blank">[CSS]CSS浮动十五条规则</a> bit1129 <a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。 1. 所有的页面元素都可以浮动 2. 一个元素浮动后，会成为块级元素，比如,a, strong等都会变成块级元素 3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了</div> </li> <li><a href="/article/1686.htm" title="【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景" target="_blank">【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景</a> bit1129 <a class="tag" taget="_blank" href="/search/partition/1.htm">partition</a> <div>0.Kafka服务器配置 3个broker 1个topic，6个partition，副本因子是2 2个consumer，每个consumer三个线程并发读取 1. Producer package kafka.examples.multibrokers.producers; import java.util.Properties; import java.util.</div> </li> <li><a href="/article/1813.htm" title="zabbix_agentd.conf配置文件详解" target="_blank">zabbix_agentd.conf配置文件详解</a> ronin47 <a class="tag" taget="_blank" href="/search/zabbix+%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6/1.htm">zabbix 配置文件</a> <div>Aliaskey的别名，例如 Alias=ttlsa.userid:vfs.file.regexp[/etc/passwd,^ttlsa:.:([0-9]+),,,,\1]，或者ttlsa的用户ID。你可以使用key：vfs.file.regexp[/etc/passwd,^ttlsa:.: ([0-9]+),,,,\1]，也可以使用ttlsa.userid。备注: 别名不能重复，但是可以有多个</div> </li> <li><a href="/article/1940.htm" title="java--19.用矩阵求Fibonacci数列的第N项" target="_blank">java--19.用矩阵求Fibonacci数列的第N项</a> bylijinnan <a class="tag" taget="_blank" href="/search/fibonacci/1.htm">fibonacci</a> <div>参考了网上的思路，写了个Java版的： public class Fibonacci { final static int[] A={1,1,1,0}; public static void main(String[] args) { int n=7; for(int i=0;i<=n;i++){ int f=fibonac</div> </li> <li><a href="/article/2067.htm" title="Netty源码学习-LengthFieldBasedFrameDecoder" target="_blank">Netty源码学习-LengthFieldBasedFrameDecoder</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>先看看LengthFieldBasedFrameDecoder的官方API http://docs.jboss.org/netty/3.1/api/org/jboss/netty/handler/codec/frame/LengthFieldBasedFrameDecoder.html API举例说明了LengthFieldBasedFrameDecoder的解析机制，如下：实</div> </li> <li><a href="/article/2194.htm" title="AES加密解密" target="_blank">AES加密解密</a> chicony <a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%AF%86%E8%A7%A3%E5%AF%86/1.htm">加密解密</a> <div>AES加解密算法，使用Base64做转码以及辅助加密： package com.wintv.common; import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import sun.misc.BASE64Decod</div> </li> <li><a href="/article/2321.htm" title="文件编码格式转换" target="_blank">文件编码格式转换</a> ctrain <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81%E6%A0%BC%E5%BC%8F/1.htm">编码格式</a> <div> package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; </div> </li> <li><a href="/article/2448.htm" title="mysql 在linux客户端插入数据中文乱码" target="_blank">mysql 在linux客户端插入数据中文乱码</a> daizj <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">中文乱码</a> <div>1、查看系统客户端，数据库，连接层的编码查看方法： http://daizj.iteye.com/blog/2174993 进入mysql，通过如下命令查看数据库编码方式： mysql> show variables like 'character_set_%'; +--------------------------+------</div> </li> <li><a href="/article/2575.htm" title="好代码是廉价的代码" target="_blank">好代码是廉价的代码</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6/1.htm">读书</a> <div> 长久以来我一直主张：好代码是廉价的代码。当我跟做开发的同事说出这话时，他们的第一反应是一种惊愕，然后是将近一个星期的嘲笑，把它当作一个笑话来讲。当他们走近看我的表情、知道我是认真的时，才收敛一点。当最初的惊愕消退后，他们会用一些这样的话来反驳： “好代码不廉价，好代码是采用经过数十年计算机科学研究和积累得出的最佳实践设计模式和方法论建立起来的精心制作的程序代码。” 我只</div> </li> <li><a href="/article/2702.htm" title="Android网络请求库——android-async-http" target="_blank">Android网络请求库——android-async-http</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>在iOS开发中有大名鼎鼎的ASIHttpRequest库，用来处理网络请求操作，今天要介绍的是一个在Android上同样强大的网络请求库android-async-http，目前非常火的应用Instagram和Pinterest的Android版就是用的这个网络请求库。这个网络请求库是基于Apache HttpClient库之上的一个异步网络请求处理库，网络处理均基于Android的非UI线程，通</div> </li> <li><a href="/article/2829.htm" title="ORACLE 复习笔记之SQL语句的优化" target="_blank">ORACLE 复习笔记之SQL语句的优化</a> eksliang <a class="tag" taget="_blank" href="/search/SQL%E4%BC%98%E5%8C%96/1.htm">SQL优化</a><a class="tag" taget="_blank" href="/search/Oracle+sql%E8%AF%AD%E5%8F%A5%E4%BC%98%E5%8C%96/1.htm">Oracle sql语句优化</a><a class="tag" taget="_blank" href="/search/SQL%E8%AF%AD%E5%8F%A5%E7%9A%84%E4%BC%98%E5%8C%96/1.htm">SQL语句的优化</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2097999 SQL语句的优化总结如下 sql语句的优化可以按照如下六个步骤进行：合理使用索引避免或者简化排序消除对大表的扫描避免复杂的通配符匹配调整子查询的性能 EXISTS和IN运算符下面我就按照上面这六个步骤分别进行总结： </div> </li> <li><a href="/article/2956.htm" title="浅析：Android 嵌套滑动机制（NestedScrolling）" target="_blank">浅析：Android 嵌套滑动机制（NestedScrolling）</a> gg163 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/%E6%BB%91%E5%8A%A8%E6%9C%BA%E5%88%B6/1.htm">滑动机制</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%A5%97/1.htm">嵌套</a> <div>谷歌在发布安卓 Lollipop版本之后，为了更好的用户体验，Google为Android的滑动机制提供了NestedScrolling特性 NestedScrolling的特性可以体现在哪里呢？ 比如你使用了Toolbar，下面一个ScrollView，向上滚</div> </li> <li><a href="/article/3083.htm" title="使用hovertree菜单作为后台导航" target="_blank">使用hovertree菜单作为后台导航</a> hvt <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a> <div> hovertree是一个jquery菜单插件，官方网址：http://keleyi.com/jq/hovertree/ ，可以登录该网址体验效果。 0.1.3版本：http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm hovertree插件包含文件： http://keleyi.com/jq/hovertree/css</div> </li> <li><a href="/article/3210.htm" title="SVG 教程（二）矩形" target="_blank">SVG 教程（二）矩形</a> 天梯梦 <a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a> <div>SVG <rect> SVG Shapes SVG有一些预定义的形状元素，可被开发者使用和操作：矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> </div> </li> <li><a href="/article/3337.htm" title="一个简单的队列" target="_blank">一个简单的队列</a> luyulong <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E9%98%9F%E5%88%97/1.htm">队列</a> <div> public class MyQueue { private long[] arr; private int front; private int end; // 有效数据的大小 private int elements; public MyQueue() { arr = new long[10]; elements = 0; front </div> </li> <li><a href="/article/3464.htm" title="基础数据结构和算法九：Binary Search Tree" target="_blank">基础数据结构和算法九：Binary Search Tree</a> sunwinner <a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div> A binary search tree (BST) is a binary tree where each node has a Comparable key (and an associated value) and satisfies the restriction that the key in any node is larger than the keys in all</div> </li> <li><a href="/article/3591.htm" title="项目出现的一些问题和体会" target="_blank">项目出现的一些问题和体会</a> Steven-Walker <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div> 第一篇博客不知道要写点什么，就先来点近阶段的感悟吧。这几天学了servlet和数据库等知识，就参照老方的视频写了一个简单的增删改查的，完成了最简单的一些功能，使用了三层架构。 dao层完成的是对数据库具体的功能实现，service层调用了dao层的实现方法，具体对servlet提供支持。 &</div> </li> <li><a href="/article/3718.htm" title="高手问答：Java老A带你全面提升Java单兵作战能力！" target="_blank">高手问答：Java老A带你全面提升Java单兵作战能力！</a> ITeye管理员 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>本期特邀《Java特种兵》作者：谢宇，CSDN论坛ID: xieyuooo 针对JAVA问题给予大家解答，欢迎网友积极提问，与专家一起讨论! 作者简介：淘宝网资深Java工程师，CSDN超人气博主，人称“胖哥”。 CSDN博客地址： http://blog.csdn.net/xieyuooo 作者在进入大学前是一个不折不扣的计算机白痴，曾经被人笑话过不懂鼠标是什么，</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架

-

Foundation 渲染的 HTML 标题 (

到

Pulpit Rock