对于喜欢自己设计博客样式的朋友来说，挑选出一个好的网页配色是非常重要的。可惜不是每个人都是设计师，常常花了很多时间也无法让自己满意。
·
ColorJack球是ColorJack网站新推出的一个功能，可以帮助大家选择配色方案，不仅简单，而且还很有意思。
2007年2月25日
新手学SEO需要注意的问题
相信很多信任学习SEO都会非常困扰，先学什么？该怎么学？怎么把学到的知识付诸于实践都是非常棘手的问题。
学前应该需要了解SEO到底是什么，对于新手学习SEO，我觉得先应该了解几个问题和我的建议：
SEO不是spam链接，spam排名那并没太多的技术含量。
学前应该需要了解SEO到底是什么，对于新手学习SEO，我觉得先应该了解几个问题和我的建议：
SEO不是spam链接，spam排名那并没太多的技术含量。
Tags:
发布:尘世 | 分类:热门文章 | 评论:0 | 引用:0 | 浏览:
2007年2月22日
你应该知道的CSS的十八个技巧( 1 )
一、使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。
二、明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三、区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四、取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：
Tags: 热门文章
发布:尘世 | 分类:网站建设 | 评论:0 | 引用:0 | 浏览:
2007年2月20日
你应该知道的CSS的十八个技巧 (2)
八、多重class定义
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中，我们可以这样调用
这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。
九、使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：
Tags: 热门文章
发布:尘世 | 分类:网站建设 | 评论:0 | 引用:0 | 浏览:
2007年2月18日
你应该知道的CSS的十八个技巧(3)
十一、组选择器(Group selectors)
当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
例如：定义所有标题的字体、颜色和margin，你可以这样写：
h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：
h1 { font-size:2em; }
h2 { font-size:1.6em; }
十二、用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是"LVHA"，你可以记忆成"LoVe HAte"(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。
如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。
Tags: 热门文章
发布:尘世 | 分类:网站建设 | 评论:0 | 引用:0 | 浏览:
2007年2月11日
你应该知道的CSS的十八个技巧(4)
十六、针对IE的优化
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。
1、注释的方法
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
/* 定义内容 */
}
(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}
(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧：
/* \*/
* html p {
declarations
}
/* */
2、条件注释(conditional comments)的方法
另外一种方法，我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：
十七、调试技巧：层有多大？
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。
另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。
十八、CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：
Tags: 热门文章
发布:尘世 | 分类:网站建设 | 评论:0 | 引用:0 | 浏览:
2007年2月6日
Javascript设计漫天雪花
原代码插入到<body>下面:<script language="JavaScript">
<!--
N = 40;
Y = new Array();
X = new Array();
S = new Array();
A = new Array();
B = new Array();
M = new Array();
V = (document.layers)?1:0; iH=(document.layers)?window.innerHeight:window.document.body.clientHeight;
iW=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < N; i++){
Y[i]=Math.round(Math.random()*iH);
X[i]=Math.round(Math.random()*iW);
S[i]=Math.round(Math.random()*5+2);
A[i]=0;
B[i]=Math.random()*0.1+0.1;
M[i]=Math.round(Math.random()*1+1);
}
if (V){
for (i = 0; i < N; i++)
{document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,"+M[i]+","+M[i]+"'></LAYER>")}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < N; i++)
{document.write('<div id="si" style="position:absolute;top:0;left:0;width:'+M[i]+';height:'+M[i]+';background:#fffff0;font-size:'+M[i]+'"></div>')}
document.write('</div></div>');
}
function snow(){
var H=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var W=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var T=(document.layers)?window.pageYOffset:document.body.scrollTop;
var L=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < N; i++){
sy=S[i]*Math.sin(90*Math.PI/180);
sx=S[i]*Math.cos(A[i]);
Y[i]+=sy;
X[i]+=sx;
if (Y[i] > H){
Y[i]=-10;
X[i]=Math.round(Math.random()*W);
M[i]=Math.round(Math.random()*1+1);
S[i]=Math.round(Math.random()*5+2);
}
if (V){document.layers['sn'+i].left=X[i];document.layers['sn'+i].top=Y[i]+T}
else{si[i].style.pixelLeft=X[i];si[i].style.pixelTop=Y[i]+T}
A[i]+=B[i];
}
setTimeout('snow()',10);
}
//-->
</script>
把<body>中的内容改为：
<body bgcolor=#ffffff onLoad="snow()">
<!--
N = 40;
Y = new Array();
X = new Array();
S = new Array();
A = new Array();
B = new Array();
M = new Array();
V = (document.layers)?1:0; iH=(document.layers)?window.innerHeight:window.document.body.clientHeight;
iW=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < N; i++){
Y[i]=Math.round(Math.random()*iH);
X[i]=Math.round(Math.random()*iW);
S[i]=Math.round(Math.random()*5+2);
A[i]=0;
B[i]=Math.random()*0.1+0.1;
M[i]=Math.round(Math.random()*1+1);
}
if (V){
for (i = 0; i < N; i++)
{document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,"+M[i]+","+M[i]+"'></LAYER>")}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < N; i++)
{document.write('<div id="si" style="position:absolute;top:0;left:0;width:'+M[i]+';height:'+M[i]+';background:#fffff0;font-size:'+M[i]+'"></div>')}
document.write('</div></div>');
}
function snow(){
var H=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var W=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var T=(document.layers)?window.pageYOffset:document.body.scrollTop;
var L=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < N; i++){
sy=S[i]*Math.sin(90*Math.PI/180);
sx=S[i]*Math.cos(A[i]);
Y[i]+=sy;
X[i]+=sx;
if (Y[i] > H){
Y[i]=-10;
X[i]=Math.round(Math.random()*W);
M[i]=Math.round(Math.random()*1+1);
S[i]=Math.round(Math.random()*5+2);
}
if (V){document.layers['sn'+i].left=X[i];document.layers['sn'+i].top=Y[i]+T}
else{si[i].style.pixelLeft=X[i];si[i].style.pixelTop=Y[i]+T}
A[i]+=B[i];
}
setTimeout('snow()',10);
}
//-->
</script>
把<body>中的内容改为：
<body bgcolor=#ffffff onLoad="snow()">
Tags: 计算机应用
发布:尘世 | 分类:网站建设 | 评论:0 | 引用:0 | 浏览:
Tags
- 热门文章 (61)
- 东西南北风 (47)
- 博客新手必看 (39)
- css/html 技巧 (33)
- 诛仙oL (26)
- 如何获得更多利益 (24)
- 博客工具 (23)
- 博客利益 (22)
- 博客技巧精华 (21)
- 新手指南 (20)
- 博客内容建议 (20)
- 计算机应用 (20)
- 完美世界国际版 (19)
- 女性 (18)
- 博客外观设计 (16)
- 如何增加博客流量 (12)
- 明星负面消息 (12)
- 网络游戏 (11)
- 新闻！博客！ (9)
- 魔域 (9)
- google技巧 (9)
- 神泣 (8)
- 黑客软件 (7)
- 完转百度空间CSS (7)
- ps设计事例教程 (5)
- SE0技巧 (5)
- 惊天动地 (5)
- Dreawaver (4)
- 征途 (4)
- QQ幻想 (4)
- 天地online (4)
- 更多利益途径 (2)
- 天龙八部 (2)
- QQ自由幻想 (2)
- 口袋西游 (2)
- 武林外传 (1)
- QQ表情 (1)
- seoblog (1)
日历
文章归档
- 2008 December (1)
- 2008 November (13)
- 2008 October (12)
- 2008 September (10)
- 2008 August (7)
- 2008 July (7)
- 2008 June (13)
- 2008 May (13)
- 2008 March (5)
- 2008 February (2)
- 2007 August (3)
- 2007 July (22)
- 2007 June (161)
- 2007 May (85)
- 2007 April (7)
- 2007 March (7)
- 2007 February (7)
- 2006 December (9)
- 2006 November (2)
- 2006 October (5)
- 2006 April (1)