Angel_女王心的个人资料

css 边框/轮廓/外边距/内边距 CSS边框：边框样式 border-style 属性 solid实心 dotted虚线 none dotted点线单独一边设置边框样式 border-top-style border-style可以设置1-4属性分别是top right bottom left 边框颜色 border-color 简写 border：粗细 solid 颜色 css轮廓轮廓的宽度不计算元素尺寸，不能单独设置单边轮廓 outline-style outline-width outline-color 轮廓简写：outline：宽度样式颜色 Css margin 边距属性 margin有四属性分别对应的上有下左有两属性分别对应的上下相同左右相同 1属性为上下左右边距都为属性值可以单独改变可设置auto length（px em）百分比填充： padding：内边距被背景颜色填充，属性值可以固定像素，也可以百分比填充属性值为4个值得话，为上右下左填充 3个值，为上（左右）下 2个值（上下）（左右） Css 尺寸（dismension）可以设置最大尺寸，最小尺寸 (min-width min-height)( max-width max-height) 常规尺寸行高：line-height 属性：number 数字 length（如16px）百分比

CSS3和HTML5css3中3D转换 translate3d(x,y,z) 定义 3D 转化。 translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。 translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。 translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。 scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。 scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿 X 轴的 3D 旋转。 rotateY(angle) 定义沿 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿 Z 轴的 3D 旋转。 perspective(n) 定义 3D 转换元素的透视视图。

css3中的多列布局我们通过column-count给div进行多列布局注意不同浏览器之间的内核适配问题多列布局的间隙我们用 column-gap来控制多列布局分列栏我们使用 column-rule：宽度样式颜色如 colunn-rule：4px outset blue

bootstrap教程(一)——强调内容本次内容我们介绍bootstrap当中强调内容的标签首先small标签代表将文字内容缩小。 <small>我是缩小的文字效果</small> 为标准文字的85%大小这之中还有倾斜的效果 cite标签表示倾斜 <cite>我是倾斜的文字内容</cite> 在样式当中设置了文字倾斜的样式 cite{ font-style: normal;}以及strong标签，加粗 <strong>我是加粗的文字</strong> 在样式当中使用了文字家粗的属性 strong{ font-weight: bold;} 本文为H5EDU机构官方的HTML5培训教程 bootstrap教程(一)

CSS3和HTML5 第13-15课背景属性 css3中背景属性：背景图片的添加方法，之前学过：background-image：url（）；首先background-size属性属性值有 cover（覆盖），图片铺满，但是图片不全 contain（包含）还是就是 n%，n%就是将背景图片拉伸到与父类成一定比例，100%表示与父类相同 background-origin：属性值有：content-box，从内容开始；padding-box 从填充开始 border-box从外边距开始 css3中可以添加多张背景图片，具体表现形式 background-image：url（），url（）；也可以简写 background：url（） no-repeat, url（），repeat；理论上可以无限添加背景图片

CSS3和HTML5 第28课 css3中3D转换 translate3d(x,y,z) 定义 3D 转化。 translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。 translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。 translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。 scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。 scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿 X 轴的 3D 旋转。 rotateY(angle) 定义沿 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿 Z 轴的 3D 旋转。 perspective(n) 定义 3D 转换元素的透视视图。

JavaScript强化教程 -- cocosjs场景切换场景切换在main.js,将StartScene作为我们初始化运行的场景，代码如下： cc.LoaderScene.preload(g_resources, function () { cc.director.runScene(new PlayScene()); }, this); 在StartScene的开始菜单按钮的响应函数中加入场景切换代码。点击开始按钮切换场景进入到我们的PlayScene。代码如下： var startItem = new cc.MenuItemImage( res.Start_N_png, res.Start_S_png, function () { cc.log("Menu is clicked!"); cc.director.replaceScene( cc.TransitionPageTurn(1, new PlayScene(), false) ); }, this); cc.director用来获取导演单例实体，cc.TransitionPageTurn创建了一个翻页效果的场景切换动画，当然你也可以不使用转场动画。直接传入new SecondScene()。 Cocos2d-JS中场景之间通过TransitionScene系列类来实现过渡跳转的效果。 TransitionScene继承于Scene，该系列类主要是与场景切换特效相关的一些使用类。如TransitionFadeDown、TransitionPageTurn、TransitionJumpZoom等等。注意：转场动画需要小心浏览器的兼容性。比如翻页效果就在浏览器上不支持本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：JavaScript强化教程 —— cocosjs场景切换

CSS3和HTML5 第5-6课 DIV＋CSS以及使使用传统的div+css布局，主要讲我所需要的内容放在不同的div中，然后通过设置宽高来实现，以及float属性来对网站进行整体布局 html5中，我们使用scetion article header footer aside来实现，其实可以理解为他们也是使用div，但是将div赋予了不同的classname，作用更加专注

h5edu学习笔记_王枫_第2周_39-42课四种组合选择器后代选择器：后代选取器匹配所有值得元素的后代元素用空格分隔元素如 div空格p{} 子元素选择器：子元素选择器，只能选择作为某元素子元素的元素如 div>p 相邻兄弟选择器：相邻兄弟选择器，只能在相邻的下方并且二者有相同的父元素。相邻兄弟选择器用“+”分隔元素。如 div+p 普通兄弟选择器：可以选取所有指定元素的兄弟元素（注意只能出现在下方）如div~p

【 H5EDU干货】H5EDU毕业学员学习及就业心得——张晓峰 1、刚从校园出来，零编程经验的我是如何找到工作的我刚从大学的校园毕业，这所烂学校只教了我基本知识。一个星期后，我有两个面试。面试后的两个星期之后，我等待的只有沉默，我一个朋友介绍我去送快递，月薪能达到4000以上，但是我的爱好却是做游戏，于是就冒着风险辞掉了原先那个安稳但毫无前途的工作，我的实际编码经验为零。但是，我在后面四个月的时间里，成功地从一个没有出路的工作转为了前端工程师，工资就不说多少啦。下面就是我转变的过程跟大家分享：首先放下恐惧，然后，一往无前地去追求自己的梦想。背着学费债务去上学固然会令人望而却步，但并不是我最大的恐惧。我最大的恐惧是即使我顺利地完成了学业，到时候要是找不到工作那就完蛋了。如果我担心的事情成为了现实，我该如何去面对我的家人?如果我学不会编程又该怎么办?也许我应该放弃这些梦想。不要放弃! 正是这些消极的想法侵蚀了你的梦想和志向。所以不要再磨蹭了。拒绝生活中那些尽散播负能量的人。下定决心是否要去追寻梦想。花一点时间明确需要克服的障碍和困难。我大概花了一个草图之后，就冒着风险辞掉了原先那个安稳但毫无前途的工作，毅然决然地进入学校进修。对此，我要感谢我的女朋友，是她鼓励了我，让我有信心坚持下去。刚来到培训学校的时候，我也充满了各种的不安，毕竟从熟悉的环境到陌生的环境是需要勇气的，过的真快，从H5EDU学习出来半年多了。。记得2015年7月12号，我和几个老乡从河南一块决定来北京H5EDU培训，之前我们都没见过面，在网上认识的，然后一块约了个时间，还记得那天晚上在郑州火车站，我出去吃了一决定来北京H5EDU我是思考了很长时间的，多长时间呢，有1年，之前我把沈大海的HTML5课程基本看了一遍，但是自学的效果始终不好，所以才决定来北京H5EDU培训。这是一天阳光明媚的下午，我来到H5EDU位于北京昌平区的总校区，到楼下的时候因为找不到地方，老师来接的我，看到校区墙上挂满的就业榜，心里顿时有了底，老师带我们参观了教室（空调，电脑，黑板，桌子，当时阳光明媚，看到这样的环境感觉像回到了校园）和宿舍（有热水器，空调，独立卫生间）环境还是相当满意的，大家要知道北京的房子很贵的，而且环境好价格肯定高，住这边学校的房子每个月只需300元，我打听过了北京其他的机构房子都需要自己找，对比下可谓是省时省力又省心，过了会沈老师来讲课了，旁边一个同学告诉我沈老师是大牛，他还百度过沈老师。在这里我记得学习了一周做了个小项目，叫做《不正常的像素鸟》，去学习的同学应该可以看到。首先，我对HUEDU还是有一种亲切感的，有时间的真的很想回去看一下，看一下我们的老师和上课的教室，我不知道别的培训机构怎么样，我对H5EDU打分的话，我会打95分 H5EDU的学习任务还是很合理的，起码我没有编程基础，不觉得会掉队，这种上课节奏估计大部分人是可以接受的，所以我还是想说，如果你喜欢编程，对编程有自己的认识和理解，我建议你可以培训一下。通过4个月的学习，我也成功的找到了理想的工作，身边的几个朋友听说了我的工资，都想去看看，已经推荐了4个朋友过去学习了，也希望H5EDU越来越好帮助更多的人。下面就我工作的一些经验跟大家分享。了解构建产品和编写代码之间的差异你需要以产品为导向来写代码。如果以降低用户体验的代价来修复bug，那还能为公司带来什么价值?你需要从客户的角度来看问题，看看自己的行为是否能为产品提升价值。如果答案是否定的，那就换其他方法。提高软技能底线：不要做一天和尚撞一天钟。软技能非常重要，千万不要小看它。具体请看《对程序员非常重要的 24 个软技能》这篇文章，文章中详细说明了软件工程师需要掌握的软技能。熟悉行业工具成为所有编程语言或工具的专家是不现实的。然而，你愿意学习新语言的态度和意愿，可能比那个高级的但已经不愿意学习新东西的程序员，更容易得到这份工作。下面这些技术都是你应该熟悉的。你不必全部下载或全部熟练掌握。但是，你懂得越多，你就越能在面试中完美地分析和回答问题。结束语不要害怕，在计算风险之后，做一个明智的冒险，然后努力做到最好。这不会是一条康庄大道，但如果你有毅力有决心有上进心，并且努力工作的话，那么你一定可以面试到你想要的工作。我很庆幸当初我选择了H5EDU，并且希望你能够像我一样，勇敢地去追寻自己的梦想。加油!

bootstrap教程（一）——斑马线表格本次内容我们介绍加载表格上面的修饰，斑马线表格，那么我们直接在table标签当中加入类名即可使用。 <h1>斑马线表格</h1> <table class="table table-striped"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> </table> 记住，使用样式的时候一定要先加入表格基础类 table。然后再加入修饰类table-striped 本文为H5EDU机构官方的HTML5培训教程 bootstrap教程（一）。

h5edu学习笔记_王枫_第2周_43-46课 css伪类伪类语法 selector:pseudo-class {property:value;}1.anchor类添加一些选择器的特殊效果 a：link a：visited a：hover a：active 注意顺序 2.css类使用伪类选择器.类名：伪类{样式}如 a.(mingcheng):hover{},也可去掉a 3. first-child first-child伪类来选择元素的第一个子元素如 p：first-child{} 4.lang伪类选择器：lang（名称）{} 但下方必然有<div lang="名称">

JavaScript强化教程——jQuery Callback 函数 Callback 函数在当前动画 100% 完成之后执行。 jQuery 动画的问题许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。例子：$("p").hide("slow") speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。实例[size=14]$("button").click(function(){$("p").hide(1000);});[/size] 由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，您可以以参数的形式添加 Callback 函数。 jQuery Callback 函数当动画 100% 完成后，即调用 Callback 函数。典型的语法：[size=14]$(selector).hide(speed,callback) [/size] callback 参数是一个在 hide 操作完成后被执行的函数。错误（没有 callback）[size=14]$("p").hide(1000);alert("The paragraph is now hidden");[/size]正确（有 callback）[size=14]$("p").hide(1000,function(){alert("The paragraph is now hidden");});[/size]本文为 H5EDU 机构官方 HTML5培训HTML5培训教程，主要介绍：JavaScript强化教程 —— jQuery Callback 函数 Callback 函数在当前动画 100% 完成之后执行。 jQuery 动画的问题许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。例子：$("p").hide("slow") speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。实例[size=14]$("button").click(function(){$("p").hide(1000);});[/size] 由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，您可以以参数的形式添加 Callback 函数。 jQuery Callback 函数当动画 100% 完成后，即调用 Callback 函数。典型的语法：[size=14]$(selector).hide(speed,callback) [/size]callback 参数是一个在 hide 操作完成后被执行的函数。错误（没有 callback）[size=14]$("p").hide(1000);alert("The paragraph is now hidden");[/size]正确（有 callback）[size=14]$("p").hide(1000,function(){alert("The paragraph is now hidden");});[/size] 本文为 H5EDU 机构官方 HTML5培训HTML5培训教程，主要介绍：JavaScript强化教程 —— jQuery Callback 函数

【 H5EDU干货】H5EDU毕业学员学习及就业心得——张晓峰 1、刚从校园出来，零编程经验的我是如何找到工作的我刚从大学的校园毕业，这所烂学校只教了我基本知识。一个星期后，我有两个面试。面试后的两个星期之后，我等待的只有沉默，我一个朋友介绍我去送快递，月薪能达到4000以上，但是我的爱好却是做游戏，于是就冒着风险辞掉了原先那个安稳但毫无前途的工作，我的实际编码经验为零。但是，我在后面四个月的时间里，成功地从一个没有出路的工作转为了前端工程师，工资就不说多少啦。下面就是我转变的过程跟大家分享：首先放下恐惧，然后，一往无前地去追求自己的梦想。背着学费债务去上学固然会令人望而却步，但并不是我最大的恐惧。我最大的恐惧是即使我顺利地完成了学业，到时候要是找不到工作那就完蛋了。如果我担心的事情成为了现实，我该如何去面对我的家人?如果我学不会编程又该怎么办?也许我应该放弃这些梦想。不要放弃! 正是这些消极的想法侵蚀了你的梦想和志向。所以不要再磨蹭了。拒绝生活中那些尽散播负能量的人。下定决心是否要去追寻梦想。花一点时间明确需要克服的障碍和困难。我大概花了一个草图之后，就冒着风险辞掉了原先那个安稳但毫无前途的工作，毅然决然地进入学校进修。对此，我要感谢我的女朋友，是她鼓励了我，让我有信心坚持下去。刚来到培训学校的时候，我也充满了各种的不安，毕竟从熟悉的环境到陌生的环境是需要勇气的，过的真快，从H5EDU学习出来半年多了。。记得2015年7月12号，我和几个老乡从河南一块决定来北京H5EDU培训，之前我们都没见过面，在网上认识的，然后一块约了个时间，还记得那天晚上在郑州火车站，我出去吃了一决定来北京H5EDU我是思考了很长时间的，多长时间呢，有1年，之前我把沈大海的HTML5课程基本看了一遍，但是自学的效果始终不好，所以才决定来北京H5EDU培训。这是一天阳光明媚的下午，我来到H5EDU位于北京昌平区的总校区，到楼下的时候因为找不到地方，老师来接的我，看到校区墙上挂满的就业榜，心里顿时有了底，老师带我们参观了教室（空调，电脑，黑板，桌子，当时阳光明媚，看到这样的环境感觉像回到了校园）和宿舍（有热水器，空调，独立卫生间）环境还是相当满意的，大家要知道北京的房子很贵的，而且环境好价格肯定高，住这边学校的房子每个月只需300元，我打听过了北京其他的机构房子都需要自己找，对比下可谓是省时省力又省心，过了会沈老师来讲课了，旁边一个同学告诉我沈老师是大牛，他还百度过沈老师。在这里我记得学习了一周做了个小项目，叫做《不正常的像素鸟》，去学习的同学应该可以看到。首先，我对HUEDU还是有一种亲切感的，有时间的真的很想回去看一下，看一下我们的老师和上课的教室，我不知道别的培训机构怎么样，我对H5EDU打分的话，我会打95分 H5EDU的学习任务还是很合理的，起码我没有编程基础，不觉得会掉队，这种上课节奏估计大部分人是可以接受的，所以我还是想说，如果你喜欢编程，对编程有自己的认识和理解，我建议你可以培训一下。通过4个月的学习，我也成功的找到了理想的工作，身边的几个朋友听说了我的工资，都想去看看，已经推荐了4个朋友过去学习了，也希望H5EDU越来越好帮助更多的人。下面就我工作的一些经验跟大家分享。了解构建产品和编写代码之间的差异你需要以产品为导向来写代码。如果以降低用户体验的代价来修复bug ，那还能为公司带来什么价值?你需要从客户的角度来看问题，看看自己的行为是否能为产品提升价值。如果答案是否定的，那就换其他方法。提高软技能底线：不要做一天和尚撞一天钟。软技能非常重要，千万不要小看它。具体请看《对程序员非常重要的 24 个软技能》这篇文章，文章中详细说明了软件工程师需要掌握的软技能。熟悉行业工具成为所有编程语言或工具的专家是不现实的。然而，你愿意学习新语言的态度和意愿，可能比那个高级的但已经不愿意学习新东西的程序员，更容易得到这份工作。下面这些技术都是你应该熟悉的。你不必全部下载或全部熟练掌握。但是，你懂得越多，你就越能在面试中完美地分析和回答问题。结束语不要害怕，在计算风险之后，做一个明智的冒险，然后努力做到最好。这不会是一条康庄大道，但如果你有毅力有决心有上进心，并且努力工作的话，那么你一定可以面试到你想要的工作。我很庆幸当初我选择了H5EDU，并且希望你能够像我一样，勇敢地去追寻自己的梦想。加油!

JavaScript强化教程——jQuery动画本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：JavaScript强化教程 —— jQuery动画 jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。语法：$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：实例$("button").click(function(){ $("div").animate({left:'250px'}); }); <!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}); });});</script> </head> <body><button>开始动画</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>

CSS3和HTML5倒影效果倒影：box-reflect 属性值：below above left right 分别为下上左右倒影可以在后面添加数值，来确定倒影和对象之间的距离需要注意的一点是不管文字倒影还是图片倒影，给倒影添加渐变属性，不能加；，可以理解为渐变为倒影样式的一个附加属性值

【 H5EDU干货】JavaScript强化教程——jQuery UI API 类别主要介绍：JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能。jQuery UI 支持颜色动画和 Class 转换，同时也提供了一些额外的 Easings。另外，提供了一套完整的定制特效，供显示和隐藏元素时或者只是添加一些视觉显示时使用。API 描述也属于类别.addClass() 当动画样式改变时，为匹配的元素集合内的每个元素添加指定的 Class。特效核心（Effects Core） | 方法重载（Method Overrides）百叶窗特效（Blind Effect）百叶窗特效（Blind Effect）通过将元素包裹在一个容器内，采用"拉百叶窗"效果来隐藏或显示元素。反弹特效（Bounce Effect）反弹特效（Bounce Effect）反弹一个元素。当与隐藏或显示一起使用时，最后一次或第一次反弹会呈现淡入/淡出效果。剪辑特效（Clip Effect）剪辑特效（Clip Effect）通过垂直或水平方向夹剪元素来隐藏或显示一个元素。颜色动画（Color Animation）使用 .animate() 实现颜色动画效果。降落特效（Drop Effect）降落特效（Drop Effect）通过单个方向滑动的淡入淡出来隐藏或显示一个元素。 Easings Easing 函数指定动画在不同点上的行进速度。 .effect() 对一个元素应用动画特效。特效核心（Effects Core） | 方法（Method）爆炸特效（Explode Effect）爆炸特效（Explode Effect）通过把元素裂成碎片来隐藏或显示一个元素。淡入淡出特效（Fade Effect）淡入淡出特效（Fade Effect）通过淡入淡出元素来隐藏或显示一个元素。折叠特效（Fold Effect）折叠特效（Fold Effect）通过折叠元素来隐藏或显示一个元素。 .hide() 使用自定义效果来隐藏匹配的元素。特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method）突出特效（Highlight Effect）突出特效（Highlight Effect）通过首先改变背景颜色来隐藏或显示一个元素。膨胀特效（Puff Effect）通过在缩放元素的同时隐藏元素来创建膨胀特效（Puff Effect）。跳动特效（Pulsate Effect）跳动特效（Pulsate Effect）通过跳动来隐藏或显示一个元素。 .removeClass() 当动画样式改变时，为匹配的元素集合内的每个元素移除指定的 Class。特效核心（Effects Core） | 方法重载（Method Overrides）缩放特效（Scale Effect）按照某个百分比缩放元素。震动特效（Shake Effect）垂直或水平方向多次震动元素。 .show() 使用自定义效果来显示匹配的元素。特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method）尺寸特效（Size Effect）调整元素尺寸到指定宽度和高度。滑动特效（Slide Effect）把元素滑动出视区。 .switchClass() 当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的 Class。特效核心（Effects Core）.toggle() 使用自定义效果来显示或隐藏匹配的元素。特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method）.toggleClass() 当动画样式改变时，根据 Class 是否存在以及 switch 参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个 Class。特效核心（Effects Core） | 方法重载（Method Overrides）转移特效（Transfer Effect）把一个元素的轮廓转移到另一个元素。本文为 H5EDU 机构官方 HTML5培训教程

bootstrap教程（二）——导航条导航（标签形tab导航）标签形导航，也称为选项卡导航。特别是在很多内容分块显示的时，使用这种选项卡来分组十分适合。标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名，如： Home CSS3 Sass jQuery Responsive 实现原理非常的简单，将菜单项（li）按块显示，并且让他们在同一水平上排列，然后定义非高亮菜单的样式和鼠标悬浮效果。代码如下： /*源码请查阅bootstrap.css文件第3494行～第3509行*/ .nav-tabs {border-bottom: 1px solid #ddd;} .nav-tabs > li {float: left;margin-bottom: -1px;} .nav-tabs > li > a {margin-right: 2px;line-height: 1.42857143;border: 1px solid transparent;border-radius: 4px 4px 0 0;} .nav-tabs > li >a:hover {border-color: #eee #eee #ddd;} 其实上例的效果和我们平时看到的选项卡效果并不一致。一般情况之下，选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项，只需要在其标签上添加类名“class="active"”即可： Home … 对应样式代码如下：/*源码请查阅bootstrap.css文件第3510行～第3518行*/ .nav-tabs >li.active> a, .nav-tabs >li.active>a:hover, .nav-tabs >li.active>a:focus { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; } 除了当前项之外，有的选项卡还带有禁用状态，实现这样的效果，只需要在标签项上添加 “class="disabled"”即可： Home … Responsive 实现这个效果的样式，在默认样式“.nav”中就带有： /*源码请查看bootstrap.css文件第3469行～第3478行*/ .nav>li.disabled> a { color: #999;} .nav>li.disabled>a:hover, .nav>li.disabled>a:focus { color: #999; text-decoration: none; cursor: not-allowed; background-color: transparent;} 注意：我们看到的选项卡效果，点击菜单项就可以切换内容，如果要实现这样的效果需要配合js插件，这部分将在后面的教程中会介绍。本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：bootstrap教程（二） —— 导航条

JQ编程25课 jq中的scroll函数 1offset（）获取元素相对于当前窗口的偏移 ;left .top可以获取到具体的值 2.position（）获取元素相对于父元素的偏移 ;left .top可以获取到具体的值 3.scroll() scrollTop/Left滚动条偏移 $("body").scrollTop($(window).height()) 滚动到屏幕底部

bootstrap教程（一）——表单本文为H5EDU机构官方的HTML5培训教程 bootstrap教程（一）。本次内容介绍bootstrap当中的表单。 bootstrap当中还有许多应用在表单组件上的样式。 <form role="form"> <div class="form-group"> <label for='input1'>邮箱：</label> <input id='input1' class="form-control" placeholder="请输入邮箱" type="email"> </div> <div class="form-group"> <label for='input2'>密码：</label> <input id='input2' class="form-control" placeholder='请输入密码' type="password"> </div> <input type='checkbox'>记住密码 <button class="btn btn-default">登录邮箱</button> </form> 像之上的代码我们可以试试引用框架文件和不加框架文件的效果对比一下

swiper的使用（一）这里是H5EDU HTML5培训 swiper系列教程001：swiper教程 swiper是一个移动端的页面滑动框架，我们可以使用这个框架来编写自己的简历。 swiper当中除了页面滑动意外，还提供了其他各种各样的功能组件，供我们使用。以及方法和回调函数。我们先实现一个基本的swiper页面，只有翻页功能的页面。首先我们要先引用框架文件。swiper.css 和 swiper.js <link rel="stylesheet" href="swiper.css"> <script src="swiper.js"></script> 再建立一个外部容器。swiper-cotainer <div class="swiper-container"> 然后在外部容器当中添加一个内部容器。swiper-wrapper <div class="swiper-wrapper"> 在内部容器当中添加每一个翻页页面 <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> </div> </div> 然后在js当中进行初始化 <script> var swiper = new Swiper('.swiper-container'); </script>

JavaScript强化教程——使用误区本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：JavaScript强化教程 —— 使用误区 JavaScript 使用误区本章节我们将讨论 JavaScript 的使用误区。赋值运算符应用错误在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。if 条件语句返回 false (是我们预期的)因为 x 不等于 10:var x = 0;if (x == 10) if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true: var x = 0; if (x = 10) if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0，0 为 false: var x = 0; if (x = 0) Note赋值语句返回变量的值。比较运算符常见错误在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true： var x = 10; var y = "10"; if (x == y) 在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false： var x = 10; var y = "10"; if (x === y) 这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较:以下实例会执行 alert 弹窗： var x = 10; switch(x) { case 10: alert("Hello"); } 以下实例由于类型不一致不会执行 alert 弹窗： var x = 10;switch(x) { case "10": alert("Hello"); } 加法与连接注意事项加法是两个数字相加。连接是两个字符串连接。 JavaScript 的加法和连接都使用 + 运算符。接下来我们可以通过实例查看两个数字相加及数字与字符串连接的区别： var x = 10 + 5; // x 的结果为 15 var x = 10 + "5"; // x 的结果为 "105" 使用变量相加结果也不一致: var x = 10; var y = 5; var z = x + y; // z 的结果为 15 var x = 10; var y = "5"; var z = x + y; // z 的结果为 "105"

CSS基础教程——纯CSS开发的气泡式提示框本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：CSS基础教程 —— 纯CSS开发的气泡式提示框作为前端开发人员，我们都熟悉使用CSS来生成页面上丰富的样式，对于边框border属性来说，也是我们最熟悉不过的CSS属性，今天我们这里将介绍如何使用纯CSS来生成一个气泡式样的提示框，希望大家喜欢！在这篇文章中我们将使用:after伪标签来生成提示框的指示箭头。首先我们定义提示框相关属性，我们添加了box阴影和文字阴影效果，这样让提示框更加漂亮： /* bubble */ .tip-bubble { position: relative; background-color: #202020; width: 100px; padding: 20px; color: #CCC; text-align: center; border-radius: 10px; margin: 50px; border: 1px solid #111; box-shadow: 1px 1px 2px #202020; -moz-box-shadow: 1px 1px 2px #202020; -webkit-border-shadow: 1px 1px 2px #202020; text-shadow: 0px 0px 15px #fff; }复制代码接下来我们处理:after伪标签： .tip-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 15px solid; }复制代码最后我们定义提示框的箭头方向： .tip-bubble-top:after { border-bottom-color: #202020; left: 50%; bottom: 100%; margin-left: -15px; }