前端"三板斧"

HTML

超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(Head)、和“主体”部分(Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

JavaScript

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

  1. 第一步

    这是网页的骨架

    点击这里了解更多

    点击"Next"进入下一步, 点击"X"退出提示.

  2. 第二步

    这是网页的皮肤

    点击这里了解更多

    点击"Next"进入下一步, 点击"X"退出提示.

  3. 第三步

    这是网页的肌肉

    点击这里了解更多

    点击"Next"进入下一步, 点击"X"退出提示.

  4. 更多信息

    请访问我的博客


Foundation 测试板

──── By Mike 201611  
第一节: Foundation 网格系统测试

Blink

Blink是一个由Google和Opera Software开发的浏览器排版引擎,Google将这个渲染引擎作为Chromium计划的一部分, 这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支,并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex浏览器中使用。

Trident

Trident(IE内核):该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到IE11。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。

Webkit

Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软件,在GPL条约下授权。

Trident

Presto(Opera前内核) (已废弃): Opera12.17及更早版本曾经采用的内核,现已停止开发并废弃,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,然而代价是牺牲了网页的兼容性。这很大程度上限制了Presto的发展。

第二节1: Foundation 标题样式

h1文字大小

h2文字大小

h3文字大小

h4文字大小

h5文字大小
h6文字大小
第二节2: Foundation 副标题样式

h1副标题文字大小

h2副标题文字大小

h3副标题文字大小

h4副标题文字大小

h5副标题文字大小
h6副标题文字大小
第二节3: Foundation a标签链接样式

点击此处链接, 访问Mike的个人博客

第二节4: Foundation .abbr标签缩写样式

前端三大基础包括HTML, CSS, 以及 JavaScript.


第二节5: Foundation blockquote, cite样式

以下为引用内容

早发白帝城
李白
朝辞白帝彩云间, 千里江陵一日还.
两岸猿声啼不住, 轻舟已过万重山.
第二节6: Foundation ol li标签列表样式

常见水果

  1. 苹果 Apple
  2. 橘子 Orange
  3. 香蕉 Banana
  4. 葡萄 Grape
  5. 梨子 Pear

第二节7: Foundation code标签样式

HTML至少包含 html, head, body 等部分.

第二节8: Foundation kbd键盘符样式

PS反选选区快捷键: CTRL + SHIFT + I



第三节 Foundation table标签表格样式
First Name Last Name Age Gender Country City Language Job Hobby Email
John Smith 35 Male USA New York English IT Computer john@gmail.com
Lucy Green 26 Female UK London English Teacher Speech lucy@hotmail.com
Bojorn Schmid 52 Male FR Paris French Importer Hiking bojorn@outlook.com

第四节1 Foundation button标签按钮样式
第四节2 Foundation button标签按钮大小

第五节 Foundation按钮组

Dropdown Button
Dropdown Button
Dropdown Button

第六节 Foundation Icon 图标

HOME ICON Defalut:

HOME ICON Link:

HOME ICON Styled:

HOME ICON Button Default:

HOME ICON Button in Red:

HOME ICON Button in Orange and Blue:


第七节 Foundation Label 标签

Label h3

Label h4

Label h5

Label h3 success

Label h3 warning

Label h3 alert


Label h3 default

Label h3 radius

Label h3 round


Label h3 default

Label h3 15px

Label h3 25px


第七节 Foundation Alert-box 提醒框
This is a default alert box.
This is an alert box usually defined for success status.
This is an alert box usually defined for warning status.
This is a default alert box with close button. ×

第八节 Foundation Progress Meter 进度条

第九节 Foundation Img Th 响应式图片及弹窗

第十节 Foundation Unordered List 无序列表

普通无序

圆圈无序

方块无序

无标无序

水平无标无序


第十一节 Foundation Accordion Navigation 可折叠列表

第十二节 Foundation Tabs Navigation 选项卡
这里是主页内容
这里是菜单一内容
这里是菜单二内容

第十三节 Foundation Pagination 分页

第十四节 Foundation Breadcrumbs 面包屑导航

第十五节 Foundation Pricing Table 价格表

第十六节 Foundation Top Bar 顶部导航

第十七节 Foundation Off Canvas 侧边导航

Content of Link One

....


第十八节 Foundation Table 表单
用户注册

第十九节 Foundation PowerBtn 开关

 

 

 


第二十节 Foundation Tooltip 提示框
鼠标移到我上面
鼠标移到我上面
鼠标移到我上面
鼠标移到我上面
鼠标移到我上面
鼠标移到我上面

第二十一节 Foundation Reveal Modal 模态框

我是一个模态框

我是模态框内容

×

我是一个模态框

我是模态框内容

×

我是一个模态框

我是模态框内容

×

我是一个模态框

我是模态框内容

×

我是一个模态框

我是模态框内容

×

我是第二个模态框

我是第二个模态框内容

×

我是一个模态框

我是模态框内容

×

我是第二个模态框

我是第二个模态框内容

×

第二十二节 Foundation Equalizer 均衡器统一高度

这是第一个主面板

我们可以在容器元素添加 data-equalizer 属性,并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。

这是第二个主面板

这是第二个主面板内部第一个分面板

在均衡器上通过添加 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 属性添加相同的值。 这会一起连接到均衡器容器。 重复多次嵌套均衡器,确保他们是匹配的.