<![CDATA[Kison's blog]]> http://www.kison.cn/index.php zh-cn http://www.kison.cn/post/504/ <![CDATA[IE版FireBug Internet Explorer Developer Toolbar中（汉化）英文官方下载]]> 小琦 <lrain@126.com> Fri, 27 Apr 2012 09:17:37 +0000 http://www.kison.cn/post/504/
引用
檢視並修改網頁上的 DOM
用點選的方式在瀏覽器上面選擇任何一個 元件 ( Element ) 並且察看他的屬性。
關掉網頁上面的 Script / All Css 來進行測試
檢視網頁上元件名稱以及詳細資訊，例如連結路徑、快速鍵 等等，讓你可以觀看與學習別人網頁的寫法。
可顯示各式 Outline ，包括表格、元件、影像等等。
關掉與顯示與影像相關的尺寸、檔案大小、路徑資料、替換文字等等。
可設定 cache, cookies，甚至是 Cookies 的內容
工具裡含有尺規、顏色挑選器，更可以更改瀏覽器之尺寸大小來看看網頁的呈現效果。
最後更可以檢驗 HTML、CSS、FEED 以及 LINK 是否合乎規範


EN文官方下载地址
华军汉化版下载地址
Tags - , , , , ]]> http://www.kison.cn/post/503/ <![CDATA[css网页设计中float浮动导致父元素未设置高度时无法闭合的解决方法]]> 小琦 <lrain@126.com> Thu, 12 Apr 2012 08:51:10 +0000 http://www.kison.cn/post/503/
当几个并列div元素使用float属性时，由于父容器没有定义实际高度(height)，在IE中显示出现问题，无法显示父容器的背景颜色或背景图片

做了如下设置实验情况：
1、不正常显示的设置
子容器：使用float
父容器：不定义height
2、在测试中发现，父容器在不定义高度时，取消float属性，背景颜色显示正常
子容器：不使用float
父容器：不定义height
3、而给父容器定义了高度后，子容器再使用float则一切正常
子容器：使用float
父容器：定义height

原因及解决方法
如果您没有闭合(清除)浮动元素，它将造成的后果是-----div的高度不能自动增加。
外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见。见W3C的解释：


引用
       In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.


　　目前用来清除“闭合(清除)浮动”的方法，主要是一下四种：

　　1. 额外标签法

　　这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。
<div style="clear:both;"></div>

或者使用
<br style="clear:both;" />

　　2. 使用after伪类
　　这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。

　　这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。
　　#outer:after{
　　 content:".";
　　 height:0;
　　 visibility:hidden;
　　 display:block;
　　 clear:both;
　　}

　　3.设置overflow为hidden或者auto
　　这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.
　　不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面
使用这句：
overflow:auto; zoom:1;

即可
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决，即：
    overflow: auto;
    _height: 1%;


个人认为这种方法最简单，无需添加多余的代码
　　4.浮动外部元素，
float-in-float

　　这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。
Tags - , , , ]]> http://www.kison.cn/post/502/ <![CDATA[Js之返回上一步代码搜集]]> 小琦 <lrain@126.com> Thu, 29 Mar 2012 03:41:25 +0000 http://www.kison.cn/post/502/
<INPUT name="pclog" type="button" value="GO" onClick="location.href='http://www.kison.cn/'">


链接式：
<a href="javascript:history.go(-1)">返回上一步</a>

<a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一步</a>


直接跳转式：
<script>window.location.href='http://www.kison.cn';</script>


开新窗口：
<a href="javascript:" onClick="window.open('http://www.kison.cn/guestbook.asp','','height=500,width=611,scrollbars=yes,status=yes')"& gt;Ding'Blog</a>


JS跳转页面参考代码
第一种：

<script language="javascript" type="text/javascript">
window.location.href="login.jsp?backurl="+window.location.href;
</script>


第二种：
<script language="javascript">
alert("返回");
window.history.back(-1);
</script>


第三种：

<script language="javascript">
window.navigate("top.jsp");
</script>


第四种：

<script language="JavaScript">
self.location=’top.htm’;
</script>


第五种：

<script language="javascript">
alert("非法访问！");
top.location=’xx.jsp’;
</script>


＝＝＝＝＝javascript中弹出选择框跳转到其他页面＝＝＝＝＝

<script language="javascript">
<!--
function logout()...{
if (confirm("你确定要注销身份吗？是－选择确定，否-选择取消"))...{
window.location.href="logout.asp?act=logout"
}
}
-->
</script>

Tags - , , , ]]> http://www.kison.cn/post/501/ <![CDATA[span宽度无法控制的解决方法]]> 小琦 <lrain@126.com> Wed, 28 Mar 2012 09:29:08 +0000 http://www.kison.cn/post/501/
曾经有几位朋友问过我：“为什么给span定义高度和宽度后，它的宽度和高度仍然没有变化，仿佛失效了一样”？

其实这个问题很简单——那就是因为span属于内联元素，而内联元素是忽略宽度和高度的，解决的办法也很简单，就是利用css将span变为盒装元素即可。
............

Tags - , , , ]]> http://www.kison.cn/post/500/ <![CDATA[你知道HTML标签设计的本意吗？把HTML标签用到该用的地方去]]> 小琦 <lrain@126.com> Mon, 19 Mar 2012 07:13:36 +0000 http://www.kison.cn/post/500/
搜索引擎的的发展让互联网业诞生了一个职业“SEO”，因为要做“关键字”，所以几乎所有的“SEO”都把“技术核心”放在研究关键字上，除了让标题，keywords,description及整个文档布满可能被搜索引擎感兴趣的关键字外。甚至于图片的alt属性，文字容器的title属性都是“关键字”，这样看似完美的“SEO技术”往往忽略了2个重要的地方：1、HTML标签的定义。2、页面的精简。前者让搜索引擎对整个页面各处的“含义”有所“了解”，后者提高了访问速度，降低了服务器负载。可惜的是“SEO”们往往不懂HTML及负载为何物，写代码的人往往又不懂“SEO技术”，这可能造成了相当大的职业瓶颈，而急功近利的心态驱使又使得这两种职业互不学习、各行其是。

我的开发经历中，曾经遇到过通篇HTML标签全DIV的，貌似除了<head>之上及<body>之外，其它全是<div>（我的理解是：整个HTML是一万个毫不相干的内容拼装起来）;也曾遇到过通篇是<div><ul><li>结构的（我的理解是：这个页面所有元素全是列表）。事实上这两种情况还相当普遍，因为曲解了“DIV+CSS”的真实含义，也许根本就不应该有这个说法，因为一个完整页面几乎不可能仅仅DIV+CSS就能完成；这个名词的本义可能是“以DIV进行分割的HTML + CSS呈现”，我相信如果说“HTML+CSS”更加靠谱，但这样说又不能体现“流布局”的“普及程度”...真是伤透脑筋。

HTML标签有50多种，详见http://www.w3.org/TR/html5/spec.html#contents第4章节，我们常用的HTML标签（除了表单标签）主要有以下一些：div,ul,ol,li,dl,dt,dd,p,span,h1-h6,label,em,strong,img,a,u,b,i,s...

我觉得有必要说出它们的定义，之后给它们分分组，w3c的分组比我这科学，但没我这好懂：

引用
div：division(分开, 分割, 区分,分配, 分界线),标签可以把文档分割为独立的、不同的部分。作为块级元素的代表，因为没有固定的格式表现，目前滥用情况最严重。
ul:Unordered List（无序列表）与li元素组合成团体。
ol:ordered list （有序列表）与li元素组合成团体。
li:list item（列表的项目）"必须"在父级ul或ol容器之内，这个必须是我自己加的。我在其前面加了个must，以表示此问题的严峻性。
dl:definition list（定义列表）与dt（definition term定义的项目）及dd（definition description定义的描述）组合成一个团体。
p:paragraph（段落）用于存放文章的一段。
span：Span（范围）标签是被用来组合文档中的小节内容。作为内联元素，也因其没有固定的格式表现，目前滥用也比较多。
h1-h6：Head（标题1到标题6），请注意这里的Head表示其含义，不同于<head>标签，也不要认为与<title>有任何关系。这里仅仅是突出文档内容的标题。注意，搜索引擎如果发现页面中存在h标签，会认为其中的内容比较重要，重要程度从1到6逐渐降低。
label:Label（针对表单控件的标签），它的名字就叫标签，只不过在这里，w3c给的定义是，用作表单的描述，例如我们喜欢在input标签前或后加上它。
em:Emphasized（加重，强调），为强调其包含的文本。默认样式是斜体。其展示效果与<i>标签相似，但搜索引擎不认为它们是相同的，因为搜索引擎往往尊重w3c给出的定义，而忽略你的展示效果。
strong:Strong（加强加重，重点强调），为重点强调其包含的文本。默认样式是粗体。其强调效果比em还要强一点。虽然<b>标签也能起到加粗的展示效果，但搜索引擎同样不认为它们是相同的，理由同上。
img:Image（图片，图像）；
a:Anchor（锚）创造超级链接中的基本的链。
u：UnderLine（文本下划线），即将淘汰。
s/strike：Strikethrough（删除线），在文字上拦腰划一条线。


按显示样式分：

块级元素或块状元素，（默认样式为block）的标签有：div,ul,ol,li,p,dl,dt,dd，h1-h6...它们在默认情况下，会独占一行。除非你用样式改变它们。

内联元素，（默认样式为inline，不过我觉得称之为“行内元素”更易于理解）的标签有：span,label,em,strong,img,a,u,b,i,s...

它们在默认情况下，会老老实实和其它元素并存于一行，当给它们加上一些特定的样式，例如：display:block，它们也会霸道地占用一行。但这里要提前说明的是，并非所有display:block就一定占一行，如果有宽度，又有float作推手把它们往前面赶，这样它们也会乖乖和其它元素挤在一行里。

需要作一些说明的地方：

1、内联元素，它们本身没有被“框”起来，也就是它们本身的大小受其内容控制，在它没有变成块级元素之前，你对它的width和height进行控制都是徒劳的。变成块级元素的途径：一、display:block（直接霸占整行）二、float不会霸占整行，但是你可以控制其width或height了。

2、一些不能包含或嵌套的元素（从w3c抄来的）：

引用
a：不能包含其它a标签。must not contain other a elements.
pre：（Preformatted 预定义格式（文本 ））不能包含img, object, big, small, sub, 或 sup 元素。must not contain the img, object, big, small, sub, or sup elements.
button 按钮，不能包含input, select, textarea, label, button, form, fieldset, iframe 或 isindex 元素。must not contain the input, select, textarea, label, button, form, fieldset, iframe or isindex elements.
label 不能包含其它的label元素。must not contain other label elements.
form 不能包含其它的form元素。must not contain other form elements.

Tags - , , ]]> http://www.kison.cn/post/499/ <![CDATA[DIV+CSS常见各种浏览器兼容小摘]]> 小琦 <lrain@126.com> Thu, 15 Mar 2012 08:51:18 +0000 http://www.kison.cn/post/499/
background:orange;*background:blue;

区别IE6与IE7：
background:green !important;background:blue;

区别IE7与FF：
background:orange; *background:green;


区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;

IE7,IE8兼容:  
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />



HEAD

1. CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义


!important    可被FireFox和IE7识别
*                   可被IE6、IE7识别
_                   可被IE6识别
*+                 可被IE7识别


2. IE专用的条件注释

<!--其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及一下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->


3.几个浏览器对实际像素的解释
IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

4.鼠标手势问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer

5. FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单位。如 Obj.Style.Height = imgObj.Style.Height + ‘px’;

6. FireFox无法解析简写的padding属性设置，如padding 5px 4px 3px 1px；必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0；

7. 消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效

8. CSS控制透明：
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
FireFox：opacity:0.6;


9. CSS控制圆角：IE：不支持圆角；
FireFox: -moz-border-radius:4px;

或
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;


10.CSS双线凹凸边框：IE：border:2px outset;
FireFox：
-moz-border-top-colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;


11.IE支持CSS方法cursor:url()自定义光标样式文件和滚动条颜色风格；FireFox对以上两者均不支持

12.IE有Select控件永远处于最上层的bug,且所有CSS对Select控件都不起作用

13.IE支持Form中的Label标签，包括图片和文字内容；FireFox不支持包含图片的Label，点击图片不能让标记 label for 的Radio或CheckBox产生效果

14.FireFox中的TextArea不支持onScroll事件

15.FireFox不支持display的inline和block

16.FireFox对Div设置margin-left, margin-right为auto时已经居中, IE中不行

17.FireFox对Body设置text-align时, Div需要设置margin: auto(主要是margin-left margin-right) 方可居中

18.对超链接的CSS样式设置最好遵从这样的顺序：L-V-H-A。即

<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>

这样可以避免一些访问过后的超链接就不具备hover和active样式了

19.IE中设置长段落自动换行在CSS中设置word-wrap:break-word；FireFox中使用JS插入 的方法来实现，具体代码如下：
<script type="text/javascript">
/* <![CDATA[ */
function toBreakWord(el, intLen){
var obj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("div_id", 37);
/* ]]> */
</script>


20.在子容器加了浮动属性后,该容器将不能自动撑开
解决方法：在标签结束后下一个标签中加上一个清除浮动的CSS clear:both;

21.浮动后IE6解释外边距为实际边距的双倍
解决办法：加上display:inline

22.IE6下图片下方会有空隙
解决办法：为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom

23.IE6下两个层中间有空隙
解决办法：设置右侧div也同样浮动float:left或者相对IE6定义 margin-right:-3px;

24.LI中内容超过长度后以省略号的显示方法

<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>


25.将元素的高度和行高设为相同值，即可垂直居中文本
<style type="text/css">
<!--
div {
height:30px;
line-height:30px;
}
-->
</style>


26.对齐文本与文本输入框，须在CSS中增加vertical-align:middle;属性设置

<style type="text/css">
<!--
… …
vertical-align:middle;
}
-->
</style>


27.支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height，为了兼容不支持min-height的IE6可以这样定义：

{
height:auto!important;
height:200px;
min-height:200px;
}


28.web标准中IE无法设置滚动条颜色

解决办法：在CSS中对body的设置改为对html的


<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>


29.IE6由于默认行高问题无法定义1px左右高度的容器，
解决办法：在CSS中对容器设置如：overflow:hidden | zoom:0.08 | line-height:1px

30.给Flash设置透明属性可使层显示在Flash之上

<param name="wmode" value="transparent" />         <!-- 解决IE上的问题 //>
<embed wmode="transparent" …… >                     <!-- 解决FireFox上的问题 //>


31.FireFox设置Padding属性后会相应的增加Width和Height属性值，IE不会
解决办法：用!important方法多定义一套Height和Width

32.FireFox对div与div之间的空格是忽略的，但IE是处理的；因此尽量在两个相连的div之间不要有空格和回车，否则可能会造成不同浏览器之间格式不正确，比如著名的3px偏差；而且原因很难查明

33.形如如下格式

<div id="parent">
<div id="content"> </div>
</div>

当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展；解决办法在层的最下方产生一个高度为1的空格,代码如下

<div id="parent">
<div id="content"> </div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>


34.IE和FireFox对字体small的尺寸解释不同，FireFox为13px,IE中为16px

35.IE和FireFox对空格的尺寸解释不同，FireFox为4px,IE中为8px
首先，关于CSS hack的方法网上有很多介绍，种类繁多，初学者常常感到很困惑。这类的CSS hack的方法，有的是针对某一个非常特殊的情况的方法，有的则是相对于比较通用的一些方法。
对于后者我们在平常的学习工作中，可以多留心收集一些，前者则不需要太关注，只是遇到的时候到网上搜索一下，寻找解决方法即可。
这里举一个比较通用的hack方法，比如对于CSS中的某一个属性，我们希望针对不同的浏览器，设置不同的值。例如，某一个div，我们希望在Firefox中宽度为50像素，在IE中宽度为60像素。那么怎么实现呢？请看如下代码：


#demo div{
width:50px; /* FireFox 有效 */
+width:60px; /* IE 有效 */
}


在上面的代码中, 第2行的width:50px这是普通的样式，下一行中，在width属性前面加一个加号，这条样式在Firefox中被认为无效，但是在IE中这个加号 会被忽略掉，因此仍然被理解为width属性，从而覆盖上一条的设置，这样就可以区分Firefox浏览器和IE浏览器了。
那么如果希望进一步区分IE 6和IE 7呢？请看如下代码：

#demo div{
width:50px; /* FireFox 有效 */
+width:60px; /* IE 7 有效 */
_width:70px; /* IE 6 有效 */
}

上面代码就可以实现对三种浏览器的区分了。在IE7中，属性前加一个加号，这个加号会被忽略，而如果在属性前加一个下划线这整条样式会被忽略，从而实现了对这三种主流浏览器的区分。
到这里，我们自然会想到，什么情况下会用的这种方法来区分浏览器呢？我们要制作的页面，通常会有两种情况，一种是彻底从头开始做，另一种是基于一个已经存在的网页进行修改或者修补。
对于第一种情况来说，我们对网页的每一个细节都十分清楚，因此并不经常遇到非常Firefox和IE的兼容性问题，即使遇到了，一般也可以找到其他 方法解决。而对于第二种情况来说，则复杂的多了，因为一个网页可能非常复杂，层叠关系也很复杂，对于后接手的人，很难搞清楚某一个的属性上面有多少层设置 会对他产生影响，因此往往只能采用“贴膏药”的方式进行修补。
比如说，如下的一个页面的最终效果，在制作圆角框的时候，在IE中，圆角对整齐之后，在firefox中却出现如图所示的错位，而如果按照Firefox调整好，在IE中又会出现错位。

点击在新窗口中浏览此图片

而页面的内容层层嵌套，在并不知道细节的情况下，很难找到问题的根源。因此这里使用修补的方法就很方便（尽管不是最优雅完善的方法），例如对于控制圆角图像位置的属性使用上面的方法，分别控制即可。
总上所述，对任何属性都可以使用加号或者下划线方法，来实现针对不同浏览器的各自设置。当然，最后还是要指出，任何hack方法都要慎重使用，最好还是能够按照标准、优雅的CSS来进行设计，这样的代码可读性、维护性都要好很多，也是我们追求的目标。  
为什么div+css在ie6没问题,在firfox有问题，严重走样，什么原因，谢谢

IE和FF的比较大的区别是1。在1024的分辨率下 IE最多显示1002PX FF显示1005PX2。IE容错性超级强 也就是说 你代码写错了 少写了 也有可能显示正确 FF就不行~~~`一般新手常常出现的问题：没有清除浮动~~~~.clear{ clear:both; height:1px; top:-1px; overflow:hidden}在每一个浮动后面都加上一个
<div class="clear"><div>

Tags - , , , ]]> http://www.kison.cn/post/498/ <![CDATA[经济学人：智能手机正在奴役用户]]> 小琦 <lrain@126.com> Thu, 15 Mar 2012 01:50:07 +0000 http://www.kison.cn/post/498/ 点击在新窗口中浏览此图片
............

Tags - , , , ]]> http://www.kison.cn/post/497/ <![CDATA[【HTML】插入普通下拉菜单的方法]]> 小琦 <lrain@126.com> Mon, 12 Mar 2012 03:43:35 +0000 http://www.kison.cn/post/497/
首先，我们要记住
<select>、<option>
这两个标签。如果我们要制作一个有三个选项的下拉菜单，我们需要在
<body      >
里输入以下代码：


<select>
    <option selected>
    电子信息工程10-1
    </option>
    <option>
    电子信息工程10-2
    </option>
    <option>
    电子信息工程10-3
    </option>
</select>


从上面的代码可以看出，一个
<option>
标签代表着一个选项，你想要设几个选项，就输入几个
<option>
标签。

保存后按F12跳转到浏览器预览，效果如下图所示：

点击在新窗口中浏览此图片

点击下拉效果

点击在新窗口中浏览此图片
Tags - , , , , ]]> http://www.kison.cn/post/496/ <![CDATA[Dreamweaver CS4 许可证已过期激活工具及Dreamweaver CS4激活码]]> 小琦 <lrain@126.com> Fri, 09 Mar 2012 09:37:34 +0000 http://www.kison.cn/post/496/
amtlib.dll文件下载 覆盖Dreamweaver CS4目录下amtlib.dll文件 比如我的目录是 D:\Program Files\adobe\Adobe Dreamweaver CS4

C:\Windows\System32\drivers\etc目录下的hosts文件，选择用记事本打开，在最后添加一行 127.0.0.1 activate.adobe.com

Dreamweaver CS4激活码1192-1413-8739-4724-1366-4303 ，1193-1117-4659-6225-5403-2674



下载地址：点击这里下载文件
Tags - , , , , ]]> http://www.kison.cn/post/495/ <![CDATA[网站编码的基础知识]]> 小琦 <lrain@126.com> Thu, 08 Mar 2012 06:31:19 +0000 http://www.kison.cn/post/495/
一 .什么是网站编码.
网站编码其实就是文字显示的编码
   如果在中文网页中用西欧编码(ISO-8859-1)就会出现乱码, 反之也会出 现乱码。一个网站要统一的网站编码,中文一般采用UTF-8或GB2312  要想查看更多编码不防用鼠标右键点击浏览器选择编码，里面会有很多的。

二.如何设置网站编码首先登陆后台管理,然后点击基本设置.

1.在"网站编码"处填写您想使用的编码,如:gb2312.(默认编码为utf-8).

2.用记事本打开网站根目录的 web.config找到

3.将里面的utf-8修改为您想使用的编码.然后保存就可以了.如:< globalization requestEncoding="gb2312" responseEncoding="gb2312"/>


三. 常用的一些编码方案：
1、在中国，大陆最常用的就是GBK18030编码，除此之外还有GBK，GB2312，这几个编码的关系是这样的。最早制定的汉字编码是GB2312，包括6763个汉字和682个其它符号
95年重新修订了编码，命名GBK1.0，共收录了21886个符号。
之后又推出了GBK18030编码，共收录了27484个汉字，同时还收录了藏文、蒙文、维吾尔文等主要的少数民族文字，现在WINDOWS平台必需要支持GBK18030编码。
按照GBK18030、GBK、GB2312的顺序，3种编码是向下兼容，同一个汉字在三个编码方案中是相同的编码。

2、台湾，香港等地使用的是BIG5编码。
3、日本：SJIS编码。　
如果把各种文字编码形容为各地的方言，那么Unicode就是世界各国合作开发的一种语言。　　
在这种语言环境下，不会再有语言的编码冲突，在同屏下，可以显示任何语言的内容，这就是Unicode的最大好处。　　
那么Unicode是如何编码的呢？其实非常简单。
就是将世界上所有的文字用２个字节统一进行编码。可能你会问，２个字节最多能够表示65536个编码，够用吗？
韩国和日本的大部分汉字都是从中国传播过去的，字型是完全一样的。
比如：“文”字，GBK和SJIS中都是同一个汉字，只是编码不同而已。


4. Unicode
那样，像这样统一编码，2个字节就已经足够容纳世界上所有的语言的大部分文字了
Unicode的学名是"Universal Multiple-Octet Coded Character Set"，简称为UCS。
现在用的是UCS-2，即2个字节编码，而UCS-4是为了防止将来2个字节不够用才开发的。UCS-2也称为基本多文种平面。
UCS-2转换到UCS-4只是简单的在前面加2个字节0。


Tags - , , ]]> http://www.kison.cn/post/494/ <![CDATA[CSS常用浏览器兼容调整小结]]> 小琦 <lrain@126.com> Thu, 08 Mar 2012 05:42:00 +0000 http://www.kison.cn/post/494/ 怎么办？用CSS HACK 来改写CSS代码

改写前：
xxx. yyy:{width:600px;}
(当设为IE7和Firefox下显示正常的600px时，IE6下会错位，改为590px，则IE6下正常，IE7和Firefox下显示不完美)
改写后：
xxx. yyy{width:600px;*width:600px;_ width:590px;}

（Firefox不认识*和_，而IE都认识*，IE7不支持_，IE6支持_）顺序千万不要乱，因为当出现重复定义时，浏览器默认按最后一下渲染，所以一定要先正常，再*，最后_。
这样Firefox读取时只看到了正常的定义，而IE都能看到第二个*的定义，于是忽略第一个正常的定义，而IE中因为IE7不再支持_，所以按照第一个带*号的执行，IE6支持_，所 以认为带*后的也是重复定义，予以忽略，执行最后一个定义。

有人喜欢用!important来进行CSS HACK，但我觉得!important写起来太长了，不如*和_简单直观。只要记住IE7=*，IE6=_，然后按照先Firefox后IE7，最后IE6的顺序进行编写， 一般就可以保证大部分用户浏览正常了。
IE下很多地方可以省略一些层定义的浮动属性,但是FF不行,必须每个个层都写清楚,几个DIV层水平排列的时候,IE6中必须要加display:inline;,不然前端会出现双倍间距,而FF中则加不加display都显示正常.这些都是由浏览器默认值的不同而引起的,你看到那些大站的布局在各浏览 器中都显示正常,是因为他们把这些默认有区别的地方都定义清楚了.

下面的兼容要点引自互联网

CSS对浏览器的兼容性具有很高的要求，通常情况下IE和Firefox(简称FF)存在很大的解析差异， 这里介绍一下兼容要点。

常见的兼容问题：

1.DOCTYPE影响CSS处理

2.FireFox火狐:div设置margin-left,margin-right为auto时已经居中,IE不行

3.FireFox火狐:body设置text-align时,div需要设置margin:auto(主要是margin-left,margin-right)方可居中

4.FireFox火狐:设置padding后,div会增加height和width,但IE不会,故需要用!important多设一 个height和width

5.FireFox火狐:支持!important,IE则忽略,可用!important为FireFox火狐特别设置样式

6.div的垂直居中问题:vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行

7.cursor:pointer可以同时在IEFireFox火狐中显示游标手指状，hand仅IE可以

8.FireFox火狐:链接加边框和背景色，需设置display:block,同时设置float:left保证不换行。

参照menubar,给a和menubar设置高度是为了避免底边显示错位,若不设height,可以在menubar中插入一个空格。

9.在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的

浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

10.IE5和IE6的BOX解释不一致
IE5下

div{width:300px;margin:0 10px 0 10px;}
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其

他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如

下修改

div{width:300px !important;width/**/:340px;margin:0 10px 0 10px}
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持

11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}
就能解决大部分问题


Tags - , , , ]]> http://www.kison.cn/post/493/ <![CDATA[使用DIV控制最小高度和自适高度]]> 小琦 <lrain@126.com> Wed, 07 Mar 2012 11:10:39 +0000 http://www.kison.cn/post/493/
引用
这里向大家描述一下如何DIV控制最小高度和自适高度，我们在用DIV布局的时候经常会遇到这样的一种情况：我们需要设置一个DIV高度，当里面的东西超过这个高度时，让这个容器自动被撑开，也就是自适应高度。


    你对DIV控制最小高度又自适高度的方法是否熟悉，这里和大家分享一下，如果我们需要设置一个DIV高度，当里面的信息很少时候，我们就设置它一个最小的固定高度，相信本文介绍一定会让你有所收获。

DIV控制最小高度又自适高度
    我们在用DIV布局的时候经常会遇到这样的一种情况：我们需要设置一个DIV高度，当里面的东西超过这个高度时，让这个容器自动被撑开，也就是自适应高度。当里面的信息很少时候，我们就设置它一个最小的固定高度。

    我们知道，在IE6中，如果子容器的高度超过父容器的时候，父容器会被子容器撑开，所以我们可以直接设置一个height的高度值即可。但是在IE7和firefox就不行了，它不会自动撑开。

    如果要使用DIV控制自适应高度，我们可以采用height:auto;这个属性；不过这个属性IE6又不支持了。是不是很头痛？其实解决这个问题不难，而且方法也不少，这里推荐一种：(假设我们需要控制的这个DIV的最小高度是100px，超过时就让里面的信息自动撑开)：


.DIV{   height:auto!important;   height:100px;   min-height:100px   }  


    注释：因为!important在IE7和Firefox都可以读到，而且权重高于后面的height:100px；所以当在IE7和Firefox显示的时候，就会用了前面的height:auto!important;而IE6识别不了!important，auto对它也不管用，因此会应用了后面的height:100px的样式；而min-height:100px表示最小高度为100px；此属性在IE7和firefox都可以识别。

    这样一个完美的即可以使用DIV控制最小高度，又可以自适应高度的css样式就出来了，同时兼容了IE6、IE7和firefox！


Tags - , , , ]]> http://www.kison.cn/post/492/ <![CDATA[jQuery流畅的tab切换代码]]> 小琦 <lrain@126.com> Sun, 04 Mar 2012 06:36:47 +0000 http://www.kison.cn/post/492/ 点击在新窗口中浏览此图片


演示地址：
http://www.cool80.com/Demonstrate/254/



下载地址：
点击这里下载文件
Provenance：http://www.ndoherty.com/demos/coda-slider/1.1.1/


Tags - , , ]]> http://www.kison.cn/post/491/ <![CDATA[adobe cs4 产品许可证已停止工作解决方法附破解补丁下载]]> 小琦 <lrain@126.com> Fri, 10 Feb 2012 01:22:19 +0000 http://www.kison.cn/post/491/ 点击在新窗口中浏览此图片
............

Tags - , , , , ]]> http://www.kison.cn/post/490/ <![CDATA[关于旅行与梦想的那些眼泪]]> 小琦 <lrain@126.com> Thu, 09 Feb 2012 10:42:21 +0000 http://www.kison.cn/post/490/ 点击在新窗口中浏览此图片
............

Tags - , , ]]> http://www.kison.cn/post/489/ <![CDATA[标准网页的宽度、字体、字号等的设计原则 ]]> 小琦 <lrain@126.com> Wed, 08 Feb 2012 07:26:33 +0000 http://www.kison.cn/post/489/ 标准字体字号：　　中文网页一般文字正文都采用宋体12号（12px）字体，因为这个字体是系统对于浏览器特别优化过的字体。虽然12px-20px的宋体字都还能看，但是宋体12px是最漂亮的，也是最普遍应用的。
　　黑体一边是14号，因为一般很少用黑体做正文，主要都是标题或者是关键字。黑体14px是优化过的字体。
　　英文网页一般用11px字号，个人最喜欢的字体是tahoma与verdana这两种！特别是verdana，是最经典，最好用的字体！

网页标准宽度：　　1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003；800宽-21=779。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
　　2、在Firefox下，宽度的分率辨减19。比如 1024的宽度-19就变成1005
　　3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成 1001
　　（注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。）
　　所以如果是1024的分辨率，你的网页不如设成1000安全一点。
　　如果是800的分辨率一般都设成770。
　　这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化 所以800的分辨率一般设定760左右,1024的设定990左右。

在这个显示器百花齐放的时代，网页设计师往往需要考虑不同客户端的浏览体验。

文字大小，是用户体验中的一个重要部分。不同的分辨率，不同的显示器尺寸，不同的DPI，乃至不同的浏览器设置，都会对最终展现的文字大小带来影响。虽然现在很多浏览器已经可以方便地缩放页面，但用户每次光临都要重新缩放，总归麻烦，何况还有许多用户不知道如何缩放页面。最好还是根据用户的分辨率给用户一个比较体贴的默认字号，那这个字号多大合适呢？

12px？14px？15px？16px？ 还是压根就不应该使用px这个单位呢？

问题的根源，在于屏幕上的一切字号单位（px，pt，em）都是相对单位，单凭它们并不能确定文字的实际大小。何况人对文字大小的根本感知在于眼睛的视角，这不仅取决于文字的物理尺寸，还取决于它到人眼的距离。

物理尺寸

首先假定一个我们希望达到的文字物理尺寸，例如设定为17寸1280 * 1024显示器上的16px，计算可得它的高度约是4.32mm，我们计划让网页文字在大部分显示器上都比较接近这个大小，那么在不同分辨率下应该显示成多大的字号呢？

第一步：统计用户主要的分辨率和对应的屏幕大小。

要在物理尺寸和分辨率之间换算，首先要统计分辨率和对应的屏幕尺寸。用户分辨率的分布情况可以从网站的统计日志里获得。由于每个分辨率设置可能对应好几个不同尺寸的屏幕，而屏幕尺寸又无法通过网页获得，只好对现在的显示器市场进行统计分析：针对某一分辨率，统计可能的屏幕尺寸范围，从最小到最大，相对主流的是多大（或使用该范围的中间值作为主流尺寸）。如下图所示——

点击在新窗口中浏览此图片

电脑显示器市场（产品种类繁多，难免挂一漏万，数据仅供参考）

第二步：计算每个分辨率主流屏幕尺寸的物理宽度

现在的显示器长宽比不仅有4：3的标准屏，16：10的宽屏，还有更多不规则比例，为了在不同长宽比的显示器之间进行比较，统一使用横向分辨率来统计。用主流尺寸和长宽比（假设像素的长和宽相同）计算出屏幕宽度（英寸），再换算成公制（毫米），将其一一对应就可看出屏幕大小的趋势。再结合各分辨率的用户分布，结果如下图所示（图片中每个点对应一个分辨率，横轴为屏幕横向的像素数，纵轴为该屏幕的物理宽度，气泡大小表示使用该分辨率的用户人数。其中蓝色气泡表示标准屏，紫色表示宽屏）：最大的三个气泡分别是1024*768，1280*1024，1280*800。

点击在新窗口中浏览此图片

第三步：计算不同显示器上的字号大小

用屏幕的物理宽度除以像素宽度，就可以得到每个像素的宽度。然后用指定的文字物理大小除以这个数，就可以得到在不同分辨率下所需的字号。例如要显示4.32mm见方的文字，各分辨率下分别需要如下的字号（对笔记本和台式机分别统计）：

点击在新窗口中浏览此图片

不同分辨率下需要的字号

可以看出笔记本和台式机的尺寸相差很大，为方便使用，使用各分辨率的主流尺寸或平均尺寸计算出指定字号在每个分辨率下所需的字号。（下图去掉了基本只用在笔记本上的那些分辨率），以4.32mm、3.77mm、3.25mm为例（17寸1280*1024分辨率下的16、14和12号字）：

点击在新窗口中浏览此图片

为保持固定物理尺寸，各主流显示器下所需字号与分辨率的关系

由于在未开启cleartype的情况下，一些中文字体在非偶数字号下的显示效果欠佳，所以一般建议使用12、14、16、18、22px等偶数字号。也就是对某个分辨率选择离它最近的偶数字号。例如：屏幕横向分辨率在1100以下的采用14px，1100到1500采用16px，1500以上采用 18px，依此类推。

到人眼的距离

虽然笔记本的字号远小于台式机，可是实际并没有给我们带来那么大的不便，这是因为：一般使用笔记本时人眼到屏幕的距离比使用台式机时要近一些。当上网本越来越小时（极端的例子就是手机），人们使用的时候可能会拿的更近，这样视角更大。反之，当显示器越来越大时（24寸甚至更大），出于整体视角等方面考虑，人们也可能离屏幕远些，从而减小了视角。

定量来说：由于文字大小h（4~5mm）相对人眼到文字的距离d（30~60cm）非常小，可近似认为视角θ正比于h，并与d成反比（θ≈tgθ=h/d）。也就是说，同样大小的文字，距离二尺时看到的只有距离一尺时的一半大小。

也就是说，显示器只能传达一个大概的尺寸，每个用户在具体操作时仍会通过不自觉地调节到屏幕的距离来调整所看到的实际效果。面对越来越多的笔记本用户（请参照上一篇：笔记本电脑的市场份额），前端设计师们只能给出一个针对笔记本和台式机平均尺寸的页面效果，具体就靠用户去自我调整了。

用JS实现不同分辨率下自动调整字号

例如网页正文所在div的id为content——

注：为保证各浏览器下文字均可缩放，字号单位使用em而不是px，一般来说，浏览器默认1em=16px，0.875em\1em\1.125em即为14\16\18px。

使用字号缩放时请注意：对该div内的标题等字号单位最好使用百分比，而不是固定字号，以便随正文同步缩放。

附：本文图表所引用的主要数据

点击在新窗口中浏览此图片
Tags - , , , ]]> http://www.kison.cn/post/488/ <![CDATA[水珠动感线面矢量图下载]]> 小琦 <lrain@126.com> Mon, 30 Jan 2012 09:38:50 +0000 http://www.kison.cn/post/488/ 点击在新窗口中浏览此图片
............

Tags - , , , , ]]> http://www.kison.cn/post/487/ <![CDATA[点击按钮后 文本框变为Select下拉列表框]]> 小琦 <lrain@126.com> Tue, 10 Jan 2012 06:33:47 +0000 http://www.kison.cn/post/487/ 点击在新窗口中浏览此图片

............

Tags - , , , ]]> http://www.kison.cn/post/486/ <![CDATA[131个Photoshop经典Web 2.0样式下载]]> 小琦 <lrain@126.com> Thu, 05 Jan 2012 01:52:59 +0000 http://www.kison.cn/post/486/ 点击在新窗口中浏览此图片

以下是一些样例：
点击在新窗口中浏览此图片

点击在新窗口中浏览此图片

在PS预设管理器加载样式。

点击在新窗口中浏览此图片

样式下载：

点击这里下载文件
Tags - , , ]]> http://www.kison.cn/post/485/ <![CDATA[12首圣诞摇滚之声]]> 小琦 <lrain@126.com> Thu, 15 Dec 2011 08:17:22 +0000 http://www.kison.cn/post/485/ 1.Jimi Hendrix, “Little Drummer Boy/Silent Night/Auld Lang Syne”

唱片Merry Christmas and Happy New Year收录了Jimi Hendrix在1969年Fillmore演出排练时和吉普赛乐队即兴时的作品，包括圣诞旋律的混合。



2.The Pretenders, “Blue Christmas”

The Pretenders乐队在2008年的Break Up The Concrete的录音过程中录制了这首热门单曲Blue Christmas。如今只保留有数字版本，在歌曲的开头Chrissie Hynde用如同猫王般富有磁性的嗓音，歌曲过半歌曲突然加快到如同性手枪一般的快速直到结束。

3.Trans-Siberian Orchestra, “Christmas Canon Rock”


歌曲在开头采用了Pachelbel的D调卡农的慢板旋律，然后快速进入吉他箫叫般的演奏

4.The Kinks, “Father Christmas”

1977年The Kinks在Santa Claus百货商店第一次进行了这首歌的演唱。之后被数只乐队翻唱，其中包括Gigolo Aunts和Green Day。

5.The Killers, “A Great Big Sled”

首次发布于2006年，拉斯瓦尔加斯摇滚乐队在当年的在非洲的艾滋病慈善义演中演出了这首A Great Big Sled，人声部分由Curve乐队的Toni Halliday担任，在MV中乐队穿着圣诞老人和他的精灵们的衣服。


6.The Dickies, “Silent Night,”


来自亚特兰大的朋克乐队The Dickies以自己的方式演绎了这首Silent Night。

7.Steve Lukather and Eddie Van Halen, “Joy to the World”

EVH与TOTO的Steve Lukather的演奏贯穿于Joy to the World中，这首歌曲也成了Lukther在2005假期推出的SantaMental专辑中的亮点。


Lukather是这样评价参与这首歌的Van Halen的；“由于在此之前Eddie已经退休很久了。所以弹不了很好，那天他进来跟我说：‘你想怎么做？杀了我吗？我已经很久不弹了，’我们都笑了，我让录音棚里的人都出去，Eddie坐下只一会他就完成了录制，他弹琴就像火中的锯子一样。”

8.Gary Hoey, “Deck the Halls”

Deck the Halls收录于Gray Hoey的专辑The Ho! Ho! Hoey! The Complete Collection，是所有吉他迷必须必备曲目。

9.Dean Martin, “Baby It’s Cold Outside”


以一位合作者的角度来说，没有人能比Dean Martin更适合这首歌，这点毫无疑问。经典能够随着时间变得更好听。

10.The Ventures, “Santa Claus is Coming to Town”

就像大多数圣诞专辑中的歌曲一样，the Ventures乐队将60年代流行的Woolly Buully调子加入了这首歌。

11.John Lennon, “Happy Xmas (War is Over)"

尽管这是一首反对越南战争的歌曲，而且上了全世界11个国家的的排行榜，这是来自列侬和洋子的圣诞祝贺，从此列侬也于圣诞紧密地联系起来。现在你可以在网上看到这首歌的各种版本。


12.Twisted Sister, “Heavy Metal Christmas (The Twelve Days of Christmas)”

收录于乐队的Twisted Little Christmas专辑，长发金属乐队Twisted Sister带给你金属版本的The Twelve Days of Christmas


Tags - , , , ]]>