hicss迁移
hicss搬家终于还是下决心把 wordpress 迁移到了 hexo,书写使用 markdown 比 wordpress 写方便许多。
引导用户创建心理模型
在网上看见了这篇文章,作者以轻松的语言比喻了java的23种模式,有很好的启发作用。创建型模式 1、FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory 工厂模式:客户类和工厂类分开。消费者任何时候需要某种产品,只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时,工厂类也要做相应的修改。如:如何创建及如何向客户端提供。 2、BUILDER—MM最爱听的就是“我爱你”这句话了,见到不同地方的MM,要能够用她们的方言跟她说这句话哦,我有一个多种语言翻译机,上面每种语言都有一个按键,见到MM我只要按对应的键,它就能够用相应的语言说出“我爱你”这句话了,国外的MM也可以轻松搞掂,这就是我的“我爱你” builder。(这一定比美军在伊拉克用的翻译机好卖) 建造模式:将产品的内部表象和产品的生成过程分割开来,从而使一个建造过程生成具有不同的内部表象的产品对象。建造模式使得产品内部表象可以独立的变化,客户不必知道 ...
CSS实战——纯图片圆角Box的实现技巧
终于要开始写实战系列了,本站的口号可是理论为辅,实战为主哦。对,你没有看错,就是“纯图片”,不是纯代码实现而是利用图片来实现的圆角。你或许会不以为然,可是我想告诉你的是即使将来CSS3圆角实现全浏览器兼容,但在当下图片圆角依旧是主流,丰富的图片效果(渐变、阴影、透明度、圆角、浏览器兼容、开发维护效率)这些是用代码实现远远不可比拟的。所以说图片圆角在实战中的重要性是有目共睹的,掌握图片圆角的技巧为日常开发打下坚实的基础。下面开始剖析各个图片圆角的实现技巧,你会发现原来用图片实现的圆角也会那么的丰富多彩!
全部浮动法
如果一个CSS初学者写图片圆角效果,那么推荐使用全部浮动法,简单且容易上手。其原理就是左圆角左浮动,主体也左浮动,右圆角右浮动,外包div 平铺背景图片。很直观的就实现出图片圆角效果。缺点是之后会需要清除浮动,且因背景图片全部平铺,所以左右俩个圆角必须左右覆盖背景上不能让圆角留白处透明出下方的图片。
HTML代码如下:
<div class="floatMethod">
<div class="left">& ...
不要告诉我你懂margin
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?……
写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理。
Margin是什么
CSS 边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School
边界,元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南
我比较喜欢使用“外边距”这个词来解释margin(同理padding可以称之为“内边距”,但是我又恰恰喜欢称呼padding为“补白”或者“留白”),我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上 ...
引爆你的Javascript代码进化
方才在程序里看到一段JS代码,写法极为高明,私心想着若是其按照规范来写,定可培养对这门语言的理解,对JS编程能力提高必是极好的。说人话:丫代码写的太乱,看的窝火!
最近闲暇无事,准备对自己JS学习做一个总结。众所周知,JS是一种语法极其灵活的语言,一千个人会有一千种JS书写方式。这造成的结果往往就是给项目日后的开发及维护留下一个不小的隐患,也对你和团队再次开发及阅读代码造成一定困难,个人认为良好的书写规范是应该首当其冲的。所以参考一些优秀前端开发团队的代码规范后,总结了几点,希望能让你的Javascript代码上升一个台阶。
变量命名:
变量名包括全局变量,局部变量,类变量,函数参数等等,他们都属于这一类。
变量命名都以类型前缀+有意义的单词组成,用驼峰式命名法增加变量和函式的可读性。例如:sUserName,nCount。
前缀规范:
每个局部变量都需要有一个类型前缀,按照类型可以分为:
s:表示字符串。例如:sName,sHtml;n:表示数字。例如:nPage,nTotal;b:表示逻辑。例如:bChecked,bHasLogin;a:表示数组。例如:aList,aGroup; ...
Javascript的循环优化探究
前几天又温习了一番JS的基础知识,发现JS循环同其他语言的循环大有不同,随后再继续翻了俩本JS的权威教程,写下这篇文章。
平时我们书写循环大致是这个样子的:
function(){
//一般循环的书写方式
for(var i=0; i<values.length; i++){
...
}
}
优化变量声明
上面这个写法在一开始学习JS的时候是没有错的,甚至对于绝大多数的面向对象语言这么写都是正确的书写方式,但JS不同与其他面向对象的语言,他没有块及作用域,有的仅仅是函数作用域,所以说,上面的写法并不是很规范,在某些情况下还会发生Bug ,当你使用了一个变量,然后不久在函数中又重新声明的话,就可能产生逻辑错误。对于JavaScript,只要你的变量是在同一个作用域中(同一函数),它都被当做是声明的,即使是它在var声明前使用的时候。合理的写法即把变量声明在函数的开始,而不是在循环内部才开始定义变量。
function func(){
//优化JS的变量定义,变量定义在开始位置,避免产 ...
引导用户创建心理模型
在IE7中新添加了一项重要的功能--页面缩放。在窗口的右下角以一个下拉菜单显示百分比。此功能的快捷操作是按住ctrl键,然后滚动鼠标滚轮,滚轮向上滚则放大页面,向下滚则缩小页面。在IE6的windows版中,只提供了“文字大小”功能,用来改变页面中相对字号的大小。快捷操作是按住 ctrl键,向下滚动鼠标滚轮则文字放大,向上滚动滚轮则文字减小。在IE7中,这个快捷操作让给了“页面缩放”功能。不过,鼠标滚轮的滚动方向却是相反的。
在IE6中,当向下滚动滚轮时,则页面被“拖拽”长了。用户会很容易记住滚轮滚动方向与页面变化之间的关系。在IE7中,当用户向下拖滚轮的时候,页面的显示比例变小,页面向上运动,缩小了。即使不考虑老IE用户的使用习惯,这个操作至少也不容易让用户正确的记住滚轮滚动方向与页面变化的对应关系。
一个构造复杂的工具,没有必要向用户完全解释清楚内部的工作原理,而用户在使用过程中却往往需要在某种程度上理解这个工具,以便更好的驾驭。此时,用户往往会以自己的方式来理解这个产品。有可能用户的理解与产品实际的工作原理完全不符,但用户却可以通过自己的理解正确预测产品的使用效果。我父亲称这种做 ...
拿什么来拯救你,我的table
table曾经在网页开发中占据着举重若轻的地位——布局,即使到了Web2.0我们依旧可以看到其布局的身影。然而技术是不断进步的Div+Css组合方式终究敲开了老式布局的大门刮起了新的一轮布局浪潮。之后而来的就是新仇旧恨,许许多多无论是对table有意见亦或没意见的人也开始了对table笔诛口伐——臃肿的代码、无语义标签、繁杂的书写方式等等。记住,table被创造之初并非是用于布局,而是显示数据。舍弃table布局,并非舍弃table本身。拿什么来拯救你,我的table。
何为table:
table者Html表格也,数据之载体。
下面是一个比较标准的table代码写法:
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr> ...
我知道你不知道的负Margin
现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在。个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负margin技术进行实现。
负margin理论:
在说明什么是负margin之前,你得清楚margin是个啥么玩意,如果还不清楚可以先阅读本人的前一篇文章《不要告诉我你懂margin》,预补下知识,回头再读这篇文章,相信俩篇文章都能给你带来不少的收获。
为了形象、易懂的解释负margin,我们将引入W3C上没有的参考线的说法。何谓参考线?参考线就是 margin移动的基准点,此基准点相对于box(自身)是静止的。而margin的数值,就是box相对于参考线的位移量。
一个完整的margin属性是这么写的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。在margin属性中一共有两类参考线,top和left的参考线属于一类,right和bottom的参考线属于另一类。top和left是以外元素为参考,right和bottom ...