一、什么是BFC
BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念， 从样式上看，具有 BFC 的元素与普通的容器没有什么区别，但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性,它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
二、如何触发 BFC
上面介绍了 BFC 的定义，那么如何触发 BFC 呢？
满足下面任一条件的元素，会触发为 BFC ：
1、浮动元素，float 除 none 以外的值
2、绝对定位元素，position（absolute，fixed）
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions
4、overflow 除了 visible 以外的值（hidden，auto，scroll）
三、BFC布局与普通文档流布局区别
普通文档流布局规则
1.浮动的元素是不会被父级计算高度
2.非浮动元素会覆盖浮动元素的位置
3.margin会传递给父级
4.两个相邻元素上下margin会重叠
BFC布局规则
1.浮动的元素会被父级计算高度（父级触发了BFC）
2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
3.margin不会传递给父级（父级触发了BFC）
4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）
下面来说一下BFC的实际使用场景
场景1：解决子盒子都浮动时 父盒子高度不参与计算问题
<style>
.far {
border: 10px solid pink;
width: 300px;
}
.child {
border: 10px solid yellowgreen;
width:100px;
height: 100px;
float: left;
}
.far{
overflow: hidden;
}
</style>
<body>
<div class="far">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
根据overflow 除了 visible 以外的值（hidden，auto，scroll）就会触发BFC的原则 计算BFC高度时 ，floatbox也参与其中。
场景2：box垂直方向的距离 会由margin来决定 相邻两个盒子之间margin会重叠 ，这就是margin上下间值合并的原因
<style>
p {
color: pink;
background: #fcc;
width: 200px;
height:100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p></p>
<p></p>
</body>
要解决这个问题我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了,解决代码如下。
<style>
.box {
overflow: hidden;
}
p {
background: green;
width: 200px;
height: 200px;
margin: 100px;
}
</style>
<body>
<p></p>
<div class="box">
<p></p>
</div>
</body>
场景3：实现左侧固定右侧自适应等类似布局
<style>
.out{
border: 1px solid red;
height: 200px;
}
.left{
width: 200px;
height: 150px;
background-color: green;
float: left;
}
.right{
background-color: pink;
height: 250px;
overflow: hidden;
}
</style>
<body>
<div class="out">
<div class="left"></div>
<div class="right"></div>
</div>
本文转自，头条号的人人都是产品经理，的一个大神。
2018年5月9日凌晨1点，Google开发者大会上对 Material Design做了更新的讲解，其中令我印象深刻的是Google对图形语言单独拿出来做一个模块来解释，如下图我标红的地方。
OLD NEW
对！就是这个SHAPE的单词，为什么我会如此看重，大家应该知道构成设计语言的四大基础原子是：字体／颜色／网格系统／图形。
这里的图形包括图标和一些辅助图形，它有什么不同呢？
大家看之前以往的版本，材质设计语言里面没有单独去说形状这一元素，当然也有做的比较好的产品，比如：韩国的 29cm 和 11街，国内天猫／网易蜗牛读书等等。
图形语言对我们产品影响极其大，之前网上也有这样的文章，比如：提取logo上面视觉基因，然后运用到图标里面。对，这个没错，但是我觉得不够好，不全。
今天和大家一起来分析下Google是如何做的。
图形无处不在，人眼对图形的识别能力远远高于字体，图形便于记忆、传播，这就是为何每次做LOGO时候都需要去考虑图形延展呢？
目的为了传播品牌，在用户心中打造产品形象，比如：可口可乐弧线、阿迪达斯、苹果logo这些国际性大牌子的logo都是易于记忆与传播的。
那么在产品设计中如何体现呢？
我们常用在图标里面去展现一些品牌元素，比如：天猫猫头直接和图标融合，这是一个很成功的例子。还有韩国的Genie音乐产品，也是直接logo和图标集合。
那么仅仅只是这些吗？
当然不够，如果我们想传达我们产品的品牌理念，深入到用户心中，只在图标里运用是不够的。
比如：可口可乐每年做产品运营推广，不断大量的重复它logo弧线元素，这样能长期在用户心中形成记忆点。
Google这次让我们打开眼界，下面Google的原话：
形状可以引导注意力，让用户易于识别组件，沟通状态和品牌语言传达。
对次有了一些更深刻的认识，形状其实运用不止我们平常所理解的。我之前写过一篇文章，就是形状对布局的影响，里面就是讲了形状的一些基础作用。
下图是来自材质语言的截图：
图片来自google
Google的想法非常大胆：一个方形的变化，延伸出不同的形状，当然并不是单独一个产品设计里面放这么多形状，而是运用到不同产品，运用不同的图形，传达其特殊品牌调性、大统一，局部战略调整。
比如：上图凹槽图形用在主TAB上，形成视觉焦点，容易吸引用户区关注它，一般核心功能会如此设计。
Google已提到了可以用于区分不同组件，这观点我很赞同，之前我对爱奇艺做了视觉分析，发现它们一级导航和二级导航样式一样，那么这样用户如何区分呢？
图形可以用于表达某一正在交互的状态，比如：选中状态，当然并不是单独去使用。Google特定强调了：需要和其他视觉元素集合起来使用，比如：颜色。
其实这一观点以前就有啦！比如：咱们的check box控件，选中前后状态不一样。
不过Google这个是否略显夸张些？
最后重点来啦！比如：可以用于表达品牌语言，那么图形来自哪里？用在哪里？
如：上图是一个Crane的应用，他们logo是中间一个图形加外带椭圆底，这里Google提取了椭圆作为视觉DNA，并沿用到产品的每一个控件。
同一产品多终端统一符号语言。
如下图提取LOGO关键特殊符号：
下图Shrine提取菱形棱角图形运用到产品设计细节里面。
看完你想说什么？我只想冷静三分钟！！！
其实说实话，对于品牌DNA的延续早在年初的时候就思考过，如何去把品牌语言在产品设计里面体现？
我当时理解是：首先要了解我们的品牌核心是什么？
我们的品牌理念是啥？品牌solgan，我们要给用户传达一种什么样的情怀？然后如何去巧妙提取产品logo里面的视觉基因，比如：某一图形元素；比如：线条／点／某一特殊图形符号，这图形一定是易于延展，拓展性强的。
然后运用到产品的每一个细节里面，比如：图标、按钮、异常状态、启动页、运营banner、情感化设计等等，如今大佬Google 已经去这样做了，而且做得很系统，包括动效都有引子。
当时也有一些产品已经这样做了，比如：韩国29cm，设计细节非常好，图形运用非常到位。国内天猫猫头运用也是渗透到产品里面去了。
Google这次又给我我们一些大胆的思考，能运用这么广的范围？
Google举了几个反面例子，我们在提取图形或者使用时需要注意的几点，如下：
注意图形的指向性和触摸大小，千万别影响用户正常使用。
同一含义的组建样式必须一致。
别使用形状来暗示其他含义， 这个对话框的形状表明它与它背后的卡片相关。
Google的本次材质设计语言的更新，我相信后续会有一些产品为了打造一些品牌调性，也会慢慢去融入更多的品牌符号语言进去。
当然我们一定要克制与统一，这是最难做的一部分，Google虽然此次系统性的解释图形的意义及延伸使用，但是某些地方稍微有些过了，所以我们在设计提取DNA时候需要克制与统一。
那么我们可以从中取学习了解如何才能让我们产品更加差异化？在同质化的今天，你是如何打造个性化与具有调性的产品呢？
如今AI已来临，机器人对设计影响极其大，从Google本次更新迭代中就大量提到了AI对产品的影响，以及如何去学习用户的习惯，然后预测用户的下一步需求。
我们以后产品会越来越智能，越来越了解人性，除了硬件的升级，研发能力加强，我们也要多去思考下：如何打造独具匠心的产品？如何打造一个无缝体验、多平台、跨语言产品视觉统一体验？
这方面跨平台多终端体验，苹果已经做得很不错了，当然还有spotify 音乐产品无缝跨平台，听歌／切歌／选歌体验。相信这只是一个开始，后续会有更多精彩
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作者 Echo
基于业务需求（常见于B端产品），有时候用户在操作过程中，不可避免的需要填写很多表单。针对于移动端长表单，我们应该如何去正确的设计呢？
1.三种主方案
2.主方案1的设计讨论
3.主方案2的设计讨论
4.主方案3的设计讨论
5.总结
针对长表单的设计，按照设计思路的不同，可以分为三种主方案，如下所示：
PS:图中的举例的关键字段仅仅为举例需要。
主方案1：我们常见的设计形式，一个界面将所有表单信息展示出来。
主方案2：将不同的分组表单放在不同的下一级界面，用户填写之后返回。
主方案3：分步操作，一个界面完成一组表单内容，点击下一步进入下一组表单。
优点：一个界面将所有表单信息展示出来，如果想查找某些填写的信息也变得更容易，相对于主方案2和3，减少了页面跳转操作和查看。
缺点：基于移动端界面承载能力较弱，一个界面将表单所有展示出来，用户一次性浏览和操作起来压力较大，容易使操作流程失败，导致成功率大大降低。
针对于主方案1，用户完成表单完成后，提交按钮有三种主要的设计方法，一种是提交按钮放在表单最后，一种是提交按钮放在导航栏上。另一种是，提交按钮底部悬浮。如下图所示：
方案1.0，如果提交按钮放在表单之后，那么用户的视觉流和操作感觉是一致的，流畅而自然。但是会出现一个问题，用户在输入信息时，键盘调用会遮挡到提交按钮。Android手机上的输入法都可以点击输入法上的按钮将键盘推下去。而iOS 原生输入法在输入法中没办法推下去，只能点击其他非编辑区域才能推下键盘。这样就显得很麻烦，用户可能会忽略掉提交按钮。
方案1.1解决了提交按钮会被键盘挡住的缺陷，但是视觉流和操作行为错乱，用户在屏幕底部输入完成之后，视觉和手指要返回到顶部操作。
方案1.2提交按钮底部悬浮，解决了方案1.1的视觉流和操作紊乱的问题，解决了方案1.0提交按钮被隐藏的问题，但是当输入文本，调出键盘时，依旧会被挡住。
使用底部悬浮按钮的场景是操作按钮非常重要，例如手机淘宝的立即购买和加入购物车。
同时底部悬浮按钮不适用于文本操作类。例如文章说的长表单文本输入。当输入文本，调出键盘时，依旧会被挡住。
底部悬浮按钮适用于非文本输入的使用场景。从手机淘宝、新浪微博可以看出，适用于在界面中非文本输入、提供一个功能入口或者是界面非文本输入的选择信息的确认。
优点：与主方案3相比不同分组表单之前切换查看信息方便快捷。申请流程的首页简洁，填写信息全部隐藏到下一级界面。
缺点：来回跳转，操作负荷较大，会把用户绕晕。
在方案2.0中用户填写完成的分组和未分组填写分组区分不开，将方案2.0进行优化，例如填写完成后，会出现已完成的标签，提示用户已完成和未完成不同的状态（如方案2.1）
Facebook曾针对分步注册与非分步注册做过A/B Test，其结论指出分步注册的转化率远高于非分步注册。由此可见，非分步注册强行减少注册页面，不如适当拉长战线，给用户轻负荷的操作，让用户在不知不觉中完成注册流程。
优点：流程分步操作，相对于主方案1，用户操作成功率大幅度提高。
缺点：如果用户操作到了第三步，需要返回第一步确认填写信息的准确性，那么用户需要两次返回。
用户填写的信息做保存（缓存），用户返回上一步，填写的数据做保留。H5依旧适用，用户填写的数据保存在数据库，用户返回上一步时，同时刷新载入数据库记录的数据。
对于方案3.0和3.1 。下一步按钮不同。究竟采取哪种？方案3.0视觉流和操作流是正常情况，且不存在按钮被键盘挡住，所以方案3.0最佳。
主方案1、2和3，都有各自不同的优缺点。
一个交互流程的好坏，一个最重要的标准之一是让用户顺利完成操作流程，保证操作流程的成功率，才能完成用户的目标。以此标准来看，主方案3是最好的。
接下来探讨一个细节问题，就是提交按钮是放在顶部导航栏、信息内容区内还是底部悬浮？
情况1：内容区加上操作按钮不被键盘覆盖，建议按钮放在内容区内。
情况2：必填的内容未被键盘覆盖，非必填被覆盖，建议操作按钮放在导航栏上，例如朋友圈、QQ空间和新浪微博。
情况3：必填的表单超过一屏，建议按钮放在内容区。不建议放在导航栏上的原因有两个：
a.视觉流错误，从上往下，信息量很大，用户滑动浏览时，会忽略且很难联想点击导航栏上的操作，行业常见放在导航栏上是因为必填的不超过一屏。
b.当必填项过多时，要滑动屏幕才能填完。 把按钮放在右上角的导航栏，当用户还没填写完成，那么在按钮放在导航栏上很容易去点击，容易引导用户犯错。
情况4：必填超过一屏，且无非文本输入，建议可使用底部悬浮。
/一/
行业的发展变化
国内UI 行业2007年萌芽，至今经历以下几个阶段：
随着2007年第一代 iPhone面世，国内进入界面设计时代。iPhone等智能手机的兴起，令各个行业迎来移动界面设计的业务和挑战，不同类型的设计公司承接了相关零散业务。后因为业务量不断增加，出现了专注于界面设计的工作室，就正式进入了界面设计时代，这一时期持续到2012年左右。
到了2012、2013年，移动互联网的普及加速了界面设计行业的升温。业务形态多元化，业务内容不断增多，UI 设计师岗位供不应求。市场上涌现大量的相关培训，UI 设计师一度成为掘金岗位。短短两年内，快餐式培训培养出大批量UI设计师。
同时，2012到2013年也被称为交互设计时代的开端。需求方开始从注重界面美观度转向更注重产品使用的流畅度，这一时期萌生了交互设计师这一岗位。但由于市场需求大，准入门槛低，行业内怪象丛生。大小设计公司/工作室之间价格战严重，各种压价，甚至聘请资历尚浅的实习生负责项目，出品质量参差不齐。
直到2016年，移动互联网创业热潮冷却，行业归于平静，进入理性探索期。建立规范，沉淀、收获，行业发生裂变。加之外部大环境，例如移动互联网、国家政策、整体经济形势等多方面的变化，使得行业走势不明朗。
在这个时候，对于设计师而言，唯有不断提升自身能力，找准行业内定位，才能去追赶甚至走在行业变化的前列。
/二/
设计师价值的演变
设计师在企业内的角色一直在变化。从以往纯粹的业务协同，到今天逐渐能够通过设计来提升产品和品牌的价值。未来设计师将更加深入业务体系，以设计驱动商业创新，实现业务价值放大。
在这个过程中，设计师的职能、视野会不断往上下游延伸，设计师自身要参与到更多的业务体系，对产品和品牌的商业模式有更清晰的认知，与业务部门的同事一起发现问题，将问题转化为设计问题，进而提出设计策略。
行业趋势不断变化，对设计师综合能力的要求不断提高。据此，我们梳理出各阶段设计师能力价值的模型，将设计师按初级、中级、高级、专家级等四个层级划分，展现不同的能力需求。
设计师个人的知识体系建立，则需要围绕着这个过程进行。
设计师构建个人知识管理体系的第一步，是有意识培养收集、整理、思考的习惯。
在项目早期有意识地收集各类头脑风暴的资料，包括照片、资料等；
在项目完成后，对各个时期迭代的设计素材、稿件进行归纳整理，总结；
每隔一个季度，调阅以前的项目进行研究和重新设计。
通过这些习惯的训练和不断重复，培养自己的思维，以期在未来的某个时间点量变达到质变。
个人知识管理是一套解决问题的技巧，本身不创造价值。它的意义在于融入你关注的业务领域当中，帮助你获得分析和解决问题的能力。它是催化剂，必须依附于行业。
知识的进阶应与个人价值模型相匹配。
初级设计师的定位是协助执行。初级者主要配合切图、延展类的工作，专注于输出，依赖于各类资料和参考素材，创新成分10%-30%。而对于很多初级设计师来讲，建设素材库可能是一个无序的过程，需要有意识地通过一些方法、借助一些工具使这个过程有序起来。
中级设计师要能快速进行设计延展，他们专注于推动设计任务，创新成分30%-40%。中级者需要更注重设计规范的建立和应用，使之成为潜意思里的常识。
高级设计师的定位是拥有自己的设计风格，能够独立完成提案，创新的成分50%以上。他们能够将此前所累积的经验，内化为自己的方法理论，并重复利用这套方法理论，完成高质量的设计作品，除此之外还能够善于总结和分享。本阶段的重点在于设计创新和反复打磨方法论。
专家级设计师的定位在于具有独创性的设计趋势和概念，能够引领行业发展，创新成分80%以上。他们已经完成底层思维的构建，多数是研究者的角色，专注于探索某个行业的未来走向，找出设计能参与并发挥最大价值的节点。他们的研究成果、设计观点和理念将会对行业产生积极影响并发挥推动作用，甚至引领一个时代。
知识的进阶需要和设计师价值模型相匹配，同样需要找到对应的个人知识管理步骤。“资源”对应“浏览、储存”，“常识”对应“整理、分类”，“方法”对应“课题、分享”，“思维”对应“利用、探索”，一共4个步骤。
但这不意味我们提倡在对应阶段只做对应的事。正相反，即使是一名初级设计师，我们也会建议他尽可能多加练习，争取能够完整地完成这4个步骤并不断重复。只有不断刻意练习，你才能实现向上一层的跃迁。差别只在于，不同阶段不同步骤所花费的时间精力占比不同。
对于设计师相对熟悉的前两个步骤（浏览、储存），这里就不一一说明。重点讲解后面的步骤。
关于整理和分类，我们提倡尝试多维度分类。这样能够快速调用资源，应对不同的设计需求及问题。
分享前的梳理和复习是巩固已有知识的大好机会。分享时则是深层次思考的过程，能够开阔思路，发现问题。当然，分享之后获得的成就感也是不言而喻的，这种尊重感一方面会驱动自我不断帮助他人，另一方面激励自己不断学习，形成良性循环.
从利己角度来讲，分享可以把你的【隐性知识】变为【显性知识】，从而实现【让别人知道你知道】的目的，创建个人品牌，提升核心竞争力。
个人知识管理是一个从【海绵式】到【淘金式】的过程。无序浏览、收集、分类整理是海绵期，需要如海绵吸水般发散式学习；分享、实践运用、独立探索属于淘金期，需要总结和找到适合自己的方法、理论，而不是一味地吸收。
中间是转化期也是转折点。这个时候选择比努力更重要。只有找到合适的环境，才能去独立探索、实践应用。
九品也尽力为全员创造更加开放的探索环境。几周前我们举办了关于“如何快速了解一个新领域，并找到设计策略”的研讨会，讨论了设计师在接触全新领域及客户时，该如何快速学习，从哪些维度、用哪些方法和资源去学习；以及，如何找到与客户的共鸣、发现潜在问题、找到设计策略……
研讨会的热烈程度超乎每一个人的想象。会议中大家纷纷分享自己的相关经历和看法，会后也将讨论成果带入到项目中进行实践和修正。
未来我们会持续探索新经济时代下设计师在各个领域的角色定位和价值范围，优化、深化客户服务体系，专精、专进地提供服务。
-end-
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们都知道，three.js库里面内置了很多着色器通道对象供我们渲染场景，本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现：
1.RenderPass这个通道会在当前场景（scene）和摄像机（camera）的基础上渲染出一个新场景，新建：
2.FilmPass这个通道通过扫描线和失真模拟电视屏幕效果，实现的效果超有时代感，新建：
3.EffectComposer可以理解为着色器通道容器，着色器通道按照先后顺序添加进来并执行，新建：
本文实现的demo基于three.js_r86(请自行下载)，代码所用js文件和图片都在下载的那个包里面，请读者自行引用。
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
实现效果：
代码：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
[html] view plain copy
单选框和复选框在网页表单中应用十分广泛，但是浏览器默认自带的单选框和复选框样式不仅不统一，而且大多都比较简单丑陋。本文给大家介绍了一些基于CSS3的个性化单选框和复选框，一些选中动画是基于jQuery的，你可以挑选喜欢的单选框和复选框应用到自己的网页中去，非常方便。
1、jQuery超级个性化的单线框和复选框
今天要分享的也是一个非常个性化的单选框和复选框插件，颜色你可以自己定义。
2、CSS3漂亮的自定义Checkbox复选框 9款迷人样式
今天我们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。
3、CSS3自定义美化复选框Checkbox组合
今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox，每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果，非常不错的CSS3自定义美化checkbox组合。
4、jQuery实现美化版的单选框和复选框
今天这款是利用jQuery实现的美化版单选框和复选框，样式风格非常简洁清爽，是一款很不错的jQuery按钮插件。
5、纯CSS3 3D按钮 按钮酷似牛奶般剔透
CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。
6、HTML5/CSS3开关按钮 立体3D按钮
今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的，代码非常简单，3D效果也还可以。
7、CSS3自定义发光Radiobox单选框
今天我们要来分享一款CSS3实现的自定义发光radiobox单选框插件，该radiobox选中时也有滑块的动画。
8、CSS3实现自定义Checkbox动画
今天我们要再来分享一款CSS3自定义checkbox，而且这款checkbox还带有动画效果，当你选中checkbox的时候，会以动画的方式打上一个大大的勾。
以上就是8个非常个性化的CSS3单/复选框，希望对你有所帮助。
本文链接：http://www.codeceo.com/article/10-personal-css3-radiobox-checkbox.html
最近身边的一些小伙伴，总会遇见B端设计工作，对于这种偏后台设计的B端设计，总会有大量的表单设计需要做，结合以前自己也有过不少表单设计的工作，在这里给大家分享一下自己对于PC端表单设计的研究，聊一聊表单在PC端中的运用。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
include指令标记用于把JSP文件，HTML网文文件等文件静态嵌入当前JSP网页中，语法如下:
静态嵌入就是“先包含后处理”在编译阶段完成对文件嵌入，即先将当前JSP页面与被嵌入文件合并成一个新的JSP页面
eg：
动态嵌入就是“先处理后包含”在运行阶段完成对文件嵌入，即在把JSP页面转译为JAVA文件时，并不合并两个页面。
eg：
运行结果：
总结：静态嵌入中嵌入页面与原页面合并了，动态嵌入则还没有。
动态嵌入与静态嵌入相比较，动态嵌入执行速度稍慢，但是灵活性较高。
一.include指令标记
[html] view plain copy
[html] view plain copy
运行结果如下：
[html] view plain copy
二.include动作标记：
动作标记是将JSP等文件动态嵌入当前JSP网页中，语法如下：
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
收集了一些比较常用的JavaScript函数。
1、字符串长度截取函数
function cutstr(str,len){
var temp,icount = 0,patrn = /[^x00-\xff]/,strre=" ";
for(var i= 0;i<str.length;i++) {
if (icount<len-1){
temp =str.substr(i,1);
if (patrn.exec(temp)==null){
icount =icount+1
}else {
icount =icount+2
}
strre+=temp
} else {
break;
}
}
returen strre+"...";
}
2、替换全部
String.prototype.replaceAll = function(s1,s2) {
return this.replace(new RegExp(s1,"gm"),s2);
}
3、清除空格
function trim = function() {
var reExtraSpace = /^\s*(.*?)\s+$/;
return this.replace(reExtraSpace,"$1");
}
4、清除左空格/右空格
function ltrim(s){
return s.replace(/^(\s*| *)/,"");
}
function rtrim(s) {
return s.replace(/(\s*| *)$/,"");
}
5、判断是否以某个字符串开头
String.prototype.startWith = function(s) {
return this.indexOf(s)==0;
}
6、判断是否以某个字符串结束
String.prototype.endWith = function(s) {
var d = this.length - s.length;
return (d >= 0 && this.lastIndexOf(s)==d);
}
7、转义HTML标签
function HtmlEncode(text) {
return text.replace(/&/g,'&').replace(/\"/g,' " ').replace(/</g,'<').replace(/>/g,'>');
}
8、时间日期格式转换
Date.prototype.Format = function(formatStr){
var str = formatStr;
var week =['日','一','二','三','四','五','六']；
str = str.replace(/yyyy|YYYY/,this.getFullYear());
str = str.replace(/yy|YY,(this.getYear()%100)>9?(this.getYear()%100).toString():'0'+(this.getYear()%100));
str = str.replace(/MM/,(this.getMonth()+1)>9?(this.getMonth()+1).toString():'0'+this.getMonth()+1));
str = str.replace(/w|W/g,week[(this.getDay()];
str = str.replace(/dd|DD/,(this.getDate()>9?this.getDate().toString():'0'+this.getDate());
str = str.replace(/d|D/g,this.getDate());
str = str.replace(/hh|HH/,this.getHours()>9?(this.getHours().toString():'0'+this.getHours());
str = str.replace(/h|H/g,this.getHours());
str = str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0'+this.getMinutes());
str = str.replace(/m/g,this.getMinutes());
str = str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0'+this.getgetSeconds());
str = str.replace(/s|S/g,this.getSeconds());
return str;
}
9、判断是否为数字类型
function isDigit (value){
var patrn = /^[0-9]*$/;
if (patrn.exec(value) == null || value=="" ) {
return false;
} else {
return true;
}
}
10、设置cookie
function setCookie(name,value,Hours){
var d =new Date();
var offset =8;
var utc = d.getTime()+(d.getTimezoneOffset()*60000);
var nd = utc+(3600000*offset);
var exp = new Date(nd);
exp.setTime(exp.getTime()+Hours*60*60*1000);
document.cookie = name+"="+escape(value)+";domain=360doc.com;"
}
获取cookie值
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if (arr!=null){
return unescape(arr[2]);
}else {
return null;
}
}
11、加入收藏夹
function AddFavorite(sURL,sTitle) {
try{
window.external.addFavorite(sURL,sTitle);
}catch(e){
try{
window.sidebar.addPanel(sTitle,sURL,"");
}catch(e){
alert("加入收藏夹失败，请使用Ctrl+D进行添加");
}
}
}
12、设为首页
function setHomepage(){
if(document.all){
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://w3cboy.com')
}else if (window.sidebar){
if(window.netscape){
try{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")
}catch(e){
alert("该操作被浏览器拒绝，如果想启用该功能，请在地址栏内输入about:config，然后将
项 signed.applets.codebase_principal_support 值该为true");
}
}
var prefs = Components.classes['@mozilla.org/preferences- service;1'].getService(Components.interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage', 'http://w3cboy.com');
}
}
13、加载样式文件
function LoadStyle(url) {
try {
document.createStyleSheet(url);
}
catch(e) {
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
cssLink.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(cssLink);
}
}
14、返回脚本内容
function evalscript(s) {
if(s.indexOf('<script') == -1) return s;
var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;
var arr = [];
while(arr = p.exec(s)) {
var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
var arr1 = [];
arr1 = p1.exec(arr[0]);
if(arr1) {
appendscript(arr1[1], '', arr1[2], arr1[3]);
} else {
p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;
arr1 = p1.exec(arr[0]);
appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
}
}
return s;
}
15、清除脚本内容
function stripscript(s) {
return s.replace(/<script.*?>.*?<\/script>/ig, '');
}
16、动态加载脚本文件
function appendscript(src, text, reload, charset) {
var id = hash(src + text);
if(!reload && in_array(id, evalscripts)) return;
if(reload && $(id)) { $(id).parentNode.removeChild($(id));
}
evalscripts.push(id);
var scriptNode = document.createElement("script");
scriptNode.type = "text/javascript";
scriptNode.id = id;
scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset);
try {
if(src) {
scriptNode.src = src;
scriptNode.onloadDone = false;
scriptNode.onload = function () {
scriptNode.onloadDone = true;
JSLOADED[src] = 1;
};
scriptNode.onreadystatechange = function () {
if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) {
scriptNode.onloadDone = true; JSLOADED[src] = 1;
}
};
} else if(text){
scriptNode.text = text;
}
document.getElementsByTagName('head')[0].appendChild(scriptNode);
} catch(e) {}
}
17、返回按ID检索的元素对象
function $(id) {
return !id ? null : document.getElementById(id);
}
18、跨浏览器绑定事件
function addEventSamp(obj,evt,fn){
if(!oTarget){
return;
} if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}else{
oTarget["on" + sEvtType] = fn;
}
}
19、跨浏览器删除事件
function delEvt(obj,evt,fn){ if(!obj){
return;
} if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(oTarget.attachEvent){
obj.attachEvent("on" + evt,fn);
}else{
obj["on" + evt] = fn;
}
}
20、元素添加on方法
Element.prototype.on = Element.prototype.addEventListener;
NodeList.prototype.on = function (event, fn) {、
[]['forEach'].call(this, function (el) {
el.on(event, fn);
});
return this;
};
在生活中，不管是浏览网页还是使用APP，我们都能看到色彩是其中重要的设计元素。每一年我们都能看到很多“流行趋势预测”之类的文章，而这些流行趋势里无一不包含色彩。
随着时间的推移，设计师们在色彩的使用上更加大胆，更加有策略。有时，色彩用来突出某个元素，有时用来讲好一个故事，有时用来强化品牌的输出。今天我们就来举几个例子。
几年前有一个很流行的趋势是采用大胆的背景，现在还是能看到很多例子。在一个好的设计里，丰富多彩的背景能够让某一区域成功吸引注意力。不管你认为流行趋势是什么，不可否认的是，好的背景色能让一个部分脱颖而出。
下面这个设计来自Root工作室，使用黄色背景来突出切斯特动物园的案例研究。黄色背景设定了这个案例研究的基调。当然了，并不是所有的案例都使用像切斯特动物园黄色这样鲜艳的颜色，因为这个案例的设计是极简风格，并没有需要特别突出的内容，所以鲜艳背景恰到好处。
接下来这个例子是Mambo Mambo，它使用色彩来突出组合的不同部分。有些部分是霓虹黄色，有些是深蓝，有些甚至是黑色。在截图中，我们可以看到，霓虹黄色与绿色搭配，蓝色和肤色搭配，看起来非常和谐。
在整个页面中，正是这些背景色的使用使不同部分都变得独特而有趣。同时呢，也起到了品牌宣传的效果。
颜色运用得当可以更好地突出想要突出的部分。让我们从优步手语登录页面开始，橙色的渐变背景肯定会吸引用户的注意力。这是一个很棒的设计策略，因为这个页面的目的就是教人们基本的手语，很大程度上是依赖视觉线索实现的。
接下来是Kickpush 设计工作室的页面。看图上的文字我们就知道，Kickpush希望展示自己与众不同的个性。这个配色方案的选择就很有目的性，将Kickpush的个性快速直观地表达出来了。
色彩有助于讲好一个故事，Bloom的主页就是个很好的例子。在整个设计中，他们使用的是同样的电子蓝。相同的配色与其他视觉元素一起，帮助用户从页眉滚动到页脚。如果所有不同的部分都有不同的主色，那么故事的完整性就会被打破了。
对于Adobe的营销云登录页面，效果也是差不多的。整个设计是一个很大的版面，每个部分都有自己的配色方案，从最顶部的浅蓝色一直到最底部的深紫色。我们可以看到，整个配色不仅仅是纯的UI颜色，照片选用的色调也与每一种背景色相配。
因为这个设计是一个很长的页面，颜色有助于讲述每个部分的故事。
有时，颜色是专门用来给设计增添趣味性的。为了更有效的使用色彩，有时大胆的颜色并不一定要在设计的前面和中心。
例如，Designmodo自己的Qards着陆页面使用了各种各样的小色块，从而使得登陆页看起来更令人愉快。
强化品牌，我认为这是色彩最有力的作用了，当然了，我不是指上文中Kickpush 或是Bloom那种使用大块背景色的方式，而是批判性的、策略性的使用颜色。
我们很多人都见证了Asana的改版，在新版本中加入了不少颜色。在网站的某些部分，颜色被大量地使用，而在其他部分则不是那么多，这是为了在总体上实现平衡。Asana选用的颜色多变而充满活力，搭配的也非常好。现在，Asana的品牌色彩由亮粉色，橙色和紫色组成，充满活力。可以说，颜色策略似乎是Asana品牌定位的关键。
Stripe公司的策略也差不多，使用相邻颜色之间的渐变，比如蓝色和绿色，这可能是这种颜色使用的一个大趋势。品牌整体上是蓝色，同时也包含绿色、粉色、紫色和橙色。这么多颜色共同配合，增强了Stripe公司的品牌影响力。
最后一个例子是Goulburn山谷的网站。他们的品牌使用了一些不同寻常的颜色，不过整个设计看起来不错。
登录页面中使用的颜色和照片中的截图是一样的：绿色略带橙色。由于照片中色彩的协调，整个着陆页都很流畅。
总结
无论是Asana，用颜色创造更好的品牌；还是Kickpush，使用明亮的红色背景突出内容，让用户意识到它的与众不同，我们看到了颜色在网站中的战略性意义。
最重要的是，颜色有助于塑造个性，尤其是品牌形象。当网页设计趋势发生变化时，网页设计中色彩的使用只会变得越来越好。
蓝蓝设计的小编 http://www.lanlanwork.com
