Css教程

　　首先将包容对象#holdit设置成相对定位(确保等下img绝对定位以它左上角为原点)

　　接着把#holdit里面img设成绝对定位且z-index高度为1这样img就脱离文档流了

　　将em标签设置左浮动高度和pling-height要样再根据图片图案分别设置每个em宽度(记得要用clear来清除浮动)

　　最后把P设置成相对定位且z-index高度设置大于img数值

　　其实我们也可以直接将图片作为为#holdit背景这样就不需要专门为img来设置CSS了

以上第个思路方法.

下面讨论也许对您有用:

在代码A中A内容很长其他div都浮在A左边但如果B内容很长话想让其他div浮在B右边
也就是说不管哪个div内容长其他div总是能自动浮动在左右而不会出现代码B问题

代码看下面

代码 A

[html]

这里是 A
1

2

3

4

1

2

3

4

这里是 B

这里是 C

这里是 D

这里是 E

[/html]

代码 B
[html]

这里是 A

这里是 B
1

2

3

4

1

2

3

4

这里是 C

这里是 D

这里是 E

[/html]
yaohaixiao2006-8-16 01:20 可能我技术水平有限

你如果只用CSSfloat是达不到你要效果
Drter2006-8-16 02:38 继续请教 :)
morose9992006-8-16 03:05 试了下,觉得只有把想要在同列内容放在个Div里面
[html]

这里是 A

这里是 B

这里是 C

这里是 D

这里是 E

[/html]
Drter2006-8-16 04:19 好像还是不行:(
和代码B显示效果样
morose9992006-8-16 04:45 你是不是要我发那种效果?
Drter2006-8-16 04:57 不是呀我意思是不管哪个div内容多其他都回环绕着它
比如在代码A里面 A内容多其他div在都集中在右边了如果B内容多希望其他div环绕到左边

但样式表不变情况代码B中B内容多其他在B的后div只能在B最下面了希望紧跟着A

呵呵
Drter2006-8-16 08:13 继续请教呀这个问题不解决没法继续了:(
Drter2006-8-17 00:02 在顶次大家帮忙呀
winliuxq2006-8-17 00:05 是不是该项要使用IF.....END语句呀..
gartional2006-8-17 04:15 够戗··
Torix2006-8-17 04:45 用js吧看看[url=http://bbs.blueidea.com/thread-2667496-1-1.html]这帖[/url]对你有没有启发

(遍历各div高度然后用绝对定位排列div)
Drter2006-8-21 08:35 在前台制作和脚本专栏发了个请教帖子
[url=http://bbs.blueidea.com/thread-2667761-1-1.html]http://bbs.blueidea.com/thread-2667761-1-1.html[/url]
clovey2006-8-21 09:02 我是这样写感觉效果也许达到了lz所说？或者我不是很明白
不过我定义了两个区别浮动div所以不是自动呈现对齐但是效果是这样就是如果以后要改话有点麻烦

这里是 A

这里是 B
1

2

3

4

1

2

3

4

这里是 C

这里是 D

这里是 E

clovey2006-8-21 09:05 不知道是不是楼主想要效果？
呵呵我也是菜鸟试试不知道理解正确吗？

[html]

这里是 A

这里是 B
1

2

3

4

1

2

3

4

这里是 C

这里是 D

这里是 E

[/html]

[[i] 本帖最后由 clovey 于 2006-8-21 17:07 编辑 [/i]]
luckyvv2006-8-21 09:48 楼上这位蛮有意思还以为光靠CSS本身做不到看来是思路有问题了呵呵～～～

楼上思路我看懂了在这外面套个大DIV约束WIDTH自动呢A,C,D,E是float:left;B是float:right当A高到定值时没有height就把下面 3个“挤”到右边了哇DIV是可以“挤”！！～这样就实现了那么个效果！～　不错哇～～～　PF～～～
clovey2006-8-21 09:50 我是菜鸟也是刚刚才开始学习网页制作～～

[[i] 本帖最后由 clovey 于 2006-8-21 21:20 编辑 [/i]]
Drter2006-8-21 15:39 就是说展开哪个div就给让他等于divC用js如何改变呢？
clovey2006-8-22 02:58 我解决思路方法其实算是“挤”根据div性质它是不允许旁边有东西所以用float来控制它漂移和其它div空间
divC是用于右边格式如果是左边还是divB

js俺完全不懂～～
zbm2001z2006-8-22 05:48 有关IE浮动元素margin尺寸BUG就不细说了简单解决下:
a内容多高度比b高:
[html]

这里是 A

这里是 B

这里是 C

这里是 D

这里是 E

[/html]

b内容多高度比a高:
[html]

这里是 A

这里是 B

这里是 C

这里是 D

这里是 E

[/html]

[[i] 本帖最后由 zbm2001z 于 2006-8-22 14:21 编辑 [/i]]
zbm2001z2006-8-22 06:32 编辑了下通过ie和firefox浏览测试除了底部margin尺寸差别(a内容高时底部margin10px被忽略iebug)其他已完全致

[[i] 本帖最后由 zbm2001z 于 2006-8-22 14:35 编辑 [/i]]
zgwam2006-8-22 15:01 学习下

————————————————————————————————————————————————————
设计信息BLOG:[url]www.grambow.org.cn[/url]
marvellous2006-8-22 16:41 test
[html]

死生契阔和子相悦

在暗蓝色海上海水在欢快地泼溅

我们心是自由我们思想无边

这全是我们帝国它权力到处通行

我们旗帜就是王笏谁碰到都得服从

我们过着粗犷生涯在风暴动荡里

从劳作到休息什么样日子都有乐趣

噢谁能体会出？可不是你娇养奴仆

可不只有“无路的路”游荡者才能知道？

在红色酒杯中旋起我们记忆

当胜利伙伴们终于把财物平分

谁不落泪当回忆暗淡了每人前额:

现在那倒下勇士该会怎样地欢欣！

我心巴凉巴凉啊！

有个人来想念何尝不是种幸福

做最好自己学最好设计

[/html]

[查看PDF电子文档]

css圆角表格:html+css做圆角表格

2009-02-12

div#nty{margin:0;background:#9BD1FA}
p {padding:10px}
div.rtop {display:block;background:#fff}
div.rtop div {display:block;height:1px;overflow:hidden;background:#9BD1FA}
div.r1{margin:0 5px}
div.r2{margin:0 3px}
div.r3{margin:0 2px}
div.rtop div.r4 {margin:0 1px;height:2px}

div + CSS 圆角矩形

[查看PDF电子文档]

图片翻转效果:翻转图片菜单效果

2009-02-12

具体例子可以看
550)this.style.width=550; (this.height>550)this.style.width=(this.width*550)/this.height;\">screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt=\'在新窗口浏览图像\';}\" _disibledevent=>
图片上总共有 8种样式我们只是用其中 4种

先统定义 a :

代码:
ul li a {display: block;text-decoration: none;color: #444;padding: 0px 0px 0px 28px;font-size: 12px;line-height: 23px;height: 23px;}

定义 display 为 “block” 原因和昨天例子样是为了让链接占据整个 li 空间左边有修饰所以填充 28px 定义行高和块高度均为 23px 正好是图片上每种样式高度同时这个是为了让文字垂直居中对齐

现在分别定义 4种链接状态记住它们顺序 love & hate (爱恨规律):

代码:
ul li a:link {background: url(localnav_btn.g) no-repeat 0px 0px;}ul li a:visited {background: url(localnav_btn.g) no-repeat 0px -69px;}ul li a:hover {background: url(localnav_btn.g) no-repeat 0px -92px;}ul li a:active {background: url(localnav_btn.g) no-repeat 0px -23px;}

这里需要注意是网页中定位都是将有上角设置为原点所以 Y 通常都是负值上面 background 也可以明确写作 background-image0px 0px 表示该样式定义原点和背景图片 0px 0px 点重合其它类似这样就运用了图片 4个区别部分来作为 4种链接状态背景图片

至此这个效果介绍基本完成需要介绍说明是我是在 Firefox 1.0 / Win 和 IE 6 / Win 下面测试没什么问题不过 IE 5 据说是很难对付款浏览器效果如何我就不知道如果出现什么问题请告诉我

还需要介绍说明是 Mozilla 和 IE 对待链接 4种状态处理是不样第个链接我写是 # IE 种默认为当前页所以处于已经访问过状态所以背景同其它 3个区别但是在 Firefox 下面却是样另外 active 状态就比较难体现出来了所以很多时候我们定义链接样式只定义两种 a 和 a:hover [查看PDF电子文档]

css隐藏文字:用css实现文字的自动隐藏

2009-02-12

语法:

overflow : visible | auto | hidden | scroll

参数:

visible : 　不剪切内容也不添加滚动条假如显式声明此默认值对象将被剪切为包含对象window或frame大小并且clip属性设置将失效
auto : 　此为body对象和textarea默认值在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象尺寸内容
scroll : 　总是显示滚动条

介绍说明:

检索或设置当对象内容超过其指定高度及宽度时如何管理内容
设置textarea对象为hidden值将隐藏其滚动条
对于table来说假如table-layout属性设置为fixed则td对象支持带有默认值为hiddenoverflow属性如果设为 hiddenscroll或者auto那么超出td尺寸内容将被剪切如果设为visible将导致额外文本溢出到右边或左边(视 direction属性设置而定)单元格
自IE5开始此属性在MAC平台上可用
对应脚本特性为overflow
举例:

body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }

text-overflow版本:IE6+专有属性　继承性:无

语法:

text-overflow : clip | ellipsis

参数:

clip : 　不显示省略标记(...)而是简单裁切
ellipsis : 　当对象内文本溢出时显示省略标记(...)

介绍说明:

设置或检索是否使用个省略标记(...)标示对象内文本溢出
对应脚本特性为textOverflow请参阅我编写其他书目

举例:

div { text-overflow : clip; }

代码:
\"http://www.w3.org/TR/html4/loose.dtd\">

无标题文档

s	asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here
d	asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here

[查看PDF电子文档]

字体css切换:css切换网页变脸

2009-02-12

文档来自天极

CSS核心:属性重定义

先来看几个小窍门技巧:

1、给链接加上修饰

我们通常会用样式表以外元素对链接进行修饰比如使用图片、使用表格、使用其他标签其实我们可以对标签用样式表来定义为了过程简单我们直接在中使用style来定义

A:给链接加上边框

为什么要给链接加边框呢通常情况下我们在导航部分会给链接作些边框修饰如果用样式表来定义我们可以这样写:

带边框链接

当然这样边框并不好看我们还需要对其设置下内边距如下代码:

带边框链接

B:给链接加上背景颜色

其实这个效果也并没有达到美观效果我们可以为其添加背景颜色代码如下:

带边框链接

这样边框和背景色也许不是您想要您可以自己修改颜色参数

C:给链接加上文字修饰

通常情况下我们可以在标签中使用标签或标签来加粗文字链接实际上这都是多余我们只要在标签中这样定义:

带边框链接

2、重定义原始标签属性

什么叫重定义原始标签属性？举个简单例子:标签作用在于把文字显示为粗体这是浏览器对标签默认属性解释但我们可以通过样式表对其进行改写如下代码:

被重定义属性标签

这里是效果:被重定义属性标签

大家会看到上面这几个字“被重定义属性标签”显示为正常文字而非粗体这是font-weight属性被重新定义了所以在显示时候会优先解析CSS对其定义

当然我们同样可以对标签加诸如边框、背景色、上划线下划线的类修饰见以下代码:

被修饰< b>标签

这里是效果:被修饰标签

综上所述html中几乎所有尖角符号内标签都可以用来样式重新定义进而改变这些标签默认属性

简洁美:用表格和段落进行网页布局设计

通常菜鸟们会采用表格和段落来进行网页布局设计实际上这称不上网页布局设计只不过是些简单排版罢了；然而真正高手他们可以仅使用表格和段落设计出美观网页来而且绝对符合W3C标准在大多数情况下满足了各种浏览器对代码解析

首先你要明白为何要使用表格和段落进行网页设计它们的间搭配有何优势？

其实使用表格和段落来进行网页设计优势非常明显首先表格作为种布局元素在网页中使用得非常多设计者能够随心所欲地利用表格来划分网页各个部分功能但必须提是表格虽然好用但不能滥用滥用表格会使页面显得臃肿不堪网页废代码增多不仅浪费大量带宽降低网页下载速度影响用户体验同时也违反了搜索引擎所支持网页简单化要求个优秀网页设计师必须考虑这两个原因其次段落在网页排版中也大量使用个回车键就是个段落而且代码非常简洁使用起来非常方便最后个优势在于使用CSS重定义表格属性和段落属性使的获得完美视觉效果并达到简单就是美最高境界

正表格和段落在网页布局设计中各自优势我们可以充分利用两者功用让表格完成整体布局而让段落在细节上给排版给予更大支持这是这对“黄金组合”最大优势所在

变脸:灵活运用标签可定义样式

既然要设计出美观网页那么就要很好地应用颜色窍门技巧、边框窍门技巧等种比较好设计思路方法是
和采用相同颜色
背景色为白色而表格背景色采用比
以及边框颜色浅同类色彩见以下例子:

此处为被定义了边框以及背景<p>标签当然同时可以定义行高、字体大小、内边距和外边据等

此处为被定义了边框以及背景<p>标签当然同时可以定义行高、字体大小、内边距和外边据等

此处为被定义了边框以及背景<p>标签当然同时可以定义行高、字体大小、内边距和外边据等

右侧导航
右侧导航
右侧导航
右侧导航
右侧导航
右侧导航
右侧导航

底部导航|底部导航|底部导航|底部导航

我们只需要定义其中p、td以及a样式属性为:

为了保持新鲜感你可以定义几种方案并随机样式表本文采用JS来不停地改变样式属性加入如下JS代码:

(document.getElementById){
varr=Math.floor(Math.random*241);
varg=Math.floor(Math.random*241);
varb=Math.floor(Math.random*241);
varrp1,gp1,bp1,rp2,gp2,bp2,rp3,gp3,bp3;
varp1=.1;
varp2=.15;
varp3=.2;
getLighterRGBShades;
varri=Math.floor(Math.random*5);
vargi=Math.floor(Math.random*5);
varbi=Math.floor(Math.random*5);
}
functionStyleByTag(e,p,v){
varelements=document.getElementsByTagName(e);
for(vari=0;ielements.item(i).style[p]=v;
}
}

functiongetLighterRGBShades{
rp1=parseInt((r*p1)+(255-(255*p1)));
gp1=parseInt((g*p1)+(255-(255*p1)));
bp1=parseInt((b*p1)+(255-(255*p1)));
rp2=parseInt((r*p2)+(255-(255*p2)));
gp2=parseInt((g*p2)+(255-(255*p2)));
bp2=parseInt((b*p2)+(255-(255*p2)));
rp3=parseInt((r*p3)+(255-(255*p3)));
gp3=parseInt((g*p3)+(255-(255*p3)));
bp3=parseInt((b*p3)+(255-(255*p3)));
}

functionchangeLinkColor{
(!document.getElementsByTagName){false;}//unclean!unclean!
(r>239||r<1)ri=ri*-1;
(g>239||g<1)gi=gi*-1;
(b>239||b<1)bi=bi*-1;
rri;
ggi;
bbi;
StyleByTag(\'a\',\'color\',\'rgb(\'+r+\',\'+g+\',\'+b+\')\');
StyleByTag(\'p\',\'border\',\'rgb(\'+r+\',\'+g+\',\'+b+\')\');
StyleByTag(\'td\',\'border\',\'rgb(\'+r+\',\'+g+\',\'+b+\')1pxsolid\');
getLighterRGBShades;
StyleByTag(\'td\',\'background\',\'rgb(\'+rp2+\',\'+gp2+\',\'+bp2+\')\');
Timeout(\'changeLinkColor\',40);
}

functiongetLighterRGBShades{
rp1=parseInt((r*p1)+(255-(255*p1)));
gp1=parseInt((g*p1)+(255-(255*p1)));
bp1=parseInt((b*p1)+(255-(255*p1)));
rp2=parseInt((r*p2)+(255-(255*p2)));
gp2=parseInt((g*p2)+(255-(255*p2)));
bp2=parseInt((b*p2)+(255-(255*p2)));
rp3=parseInt((r*p3)+(255-(255*p3)));
gp3=parseInt((g*p3)+(255-(255*p3)));
bp3=parseInt((b*p3)+(255-(255*p3)));
}

functioninit{
changeLinkColor;
}

此处为被定义了边框以及背景<p>标签当然同时可以定义行高、字体大小、内边距和外边据等

此处为被定义了边框以及背景<p>标签当然同时可以定义行高、字体大小、内边距和外边据等

此处为被定义了边框以及背景<p>标签当然同时可以定义行高、字体大小、内边距和外边据等

右侧导航
右侧导航
右侧导航
右侧导航
右侧导航
右侧导航
右侧导航

底部导航|底部导航|底部导航|底部导航

这段代码中语句Timeout(\'changeLinkColor\',40)其中40是指变脸间隔时间当然你可以任意改变其大小这段代码并不复杂读者可以自行研究

[查看PDF电子文档]

横向下拉:一个横向下拉菜单的教程

2009-02-12

注:内容主要是意译目是介绍这种菜单制作过程

每个建立过下拉菜单人都习惯了实现菜单需要而采用大量脚本但是使用结构化 HTML 和简单 CSS 也可以创建易于编辑和升级并且视觉效果良好菜单它们可以跨浏览器使用包括 IE 更好是对于那些忌讳代码设计者不需要使用 JavaScript (实际上需要点点 JavaScript 但是你不需要去考虑这些)

建立菜单

建立菜单首要也是最重要部分是建立它结构完成这个得最好思路方法是通过无序列表每个子菜单作为父列表项内列表来呈现听起来很复杂？其实它很直观:

代码:

Home

About

History

Team

Offices

Services

Web Design

Internet Marketing

Hosting

Do Names

Broadband

Contact Us

United Kingdom

France

USA

Australia

如此简单 HTML 即可以访问也易于编辑(有些歧义明白就好smile.g)

视觉呈现

如果你已经预览上面菜单看到只是些项列表但是我可以向你保证它可以很好地呈现现在我们来加入样式

第步我们要去掉无序列表缩进和项目符号并且定义菜单项宽度:

代码:

ul { margin: 0; padding: 0; list-style: none; width: 150px; }

下面我们需要定位菜单项很幸运是默认情况下它们是垂直堆积(排列？)但是为了定位它们包含子菜单我们必须设置它定位为 relative:

代码:

ul li { position: relative; }

下步是子菜单我们希望主菜单被鼠标覆盖时候子菜单出现在它右侧

代码:

li ul { position: absolute; left: 149px; top: 0; display: none; }

使用 \'“left” 和 “top” 属性我们完全可以将每个子菜单定位在它父项中你可能注意到了我们设置 “left” 为 149px (比主菜单项宽度窄个像素)这是为了让子菜单贴近主菜单而不出现两条边框(后面你将会明白我所说)

另外我们将显示(display) 设置为 “none” 这是为了我们不希望在默认情况下让子菜单显示出来

现在我们有个基本结构但是看上去还是平板我们来为链接增加样式:

代码:

ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; }

IE5.01 滑动菜单 BUG

IE5.01 下用户会发现当覆盖其中某些项时菜单会 4处跳动通过下面代码可以很容易修缮[我没在 IE5.01 下面测试过所以对于作者说这个现象没有明确概念翻译可能也有些出入

代码:

/* Fix IE. Hide from IE Mac \\*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */

IE 6 BUG

During the development of this article, I uncovered a strange bug that I believe is _disibledevent=>HTML 代码:
下拉菜单
首页
<

[查看PDF电子文档]

divcss布局:Div 布局实现侧栏的显隐

2009-02-12

首先考虑这个功能实现思路

假设整个页面分为左右两栏通过菜单上个按钮来控制左侧栏显示和隐藏右侧主栏宽度也要根据左侧栏显隐来自动调节实现此功能无非就是通过脚本来设置左侧栏宽度同时根据页面宽度来计算右边主侧栏动态宽度

要了解页面宽度可以通过 document.body.clientWidth 来获得而各栏宽度通过 object.style.width 可以获得

同时我们要考虑另外个情况就是当用户更改窗口大小时候页面布局也应该随的改变

代码很简单全部如下:

代码:
侧栏显隐控制

[查看PDF电子文档]

组合数学的应用:CLASS组合应用

2009-02-12

我是这样来做DIV布局代码．不知道说清楚不清楚凑和看吧
我想法是未来能这样:用标准件方式来组装网页DIV布局

我把分为２种布局风格布局是骨架风格是衣服
举个例子:
比如布局中左栏
首先它属性有:是左栏宽度背景颜色字体颜色等

１．首先会定义个,比如:.layout,主要用来控制页面整个大小
.layout{width:98%;margin:0 auto;text-align:left;}

２．然后会定义3个基本布局Class(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
我把２栏布局也归类于３栏布局３栏布局中左右栏宽度分别为０时候３栏就变成了２栏．
我们写基本布局代码时候最好还是写成３栏格式．

３．对应布局Class定义需要风格Class比如宽度高度背景颜色等等这些都属于风格元素
._l{background:#ff0;margin-right: -150px;width:150px;}
._m{background:#f00;margin:0 140px 0 150px;}
._r{background:#00f;margin-left: -140px;width:140px;}

布局只有套风格可以定义很多.
比如要中栏里面在做个小２栏布局
就可以再定义个风格
.mid_l{background:#ff0;margin-right: -100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}

4.将布局和风格结合起来在代码这样引用

将２个都引用中间用空格隔开,前面是布局,后面是风格,后面还可以继续空格引用如果需要再特殊定义你可以给这个div取个id来定义.

其他些常用风格也可以写成通用比如隐含可以定义为
.hide{display:none}
然后需要时候=\"xxx hide\"来引用很方便．

代码:
<!DOCTYPEhtml PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <htmlxmlns=\"http://www.w3.org/1999/xhtml\"> <head> <metahttp-equiv=\"Content-Type\" content=\"text/html; char=gb2312\" /><title>组合CLASS</title> <style> body, html {background:#fff; color: #000; font-size:12px; margin:0;line-height:150%;padding:0px; text-align:center; }/*布局大框架,用来控制整体页面大小,尺寸由自己控制*/ #layout{width:98%;margin:0auto;text-align:left;} /*页面左,中,右布局*/ .l{float:left} .r{float:right}.m{width:auto} /*页面左,中,右布局*/.l{background:#ff0;margin-right: -150px;width:150px;}.m{background:#f00;margin:0 140px 0 150px;}.r{background:#00f;margin-left: -140px;width:140px;}.l1{background:#dd0;margin-right: -200px;width:200px;}.m1{background:#ee0;margin:0 0 0 200px;}.l2{background:#dd0;margin-right: -50px;width:50px;}.m2{background:#ee0;margin:0 0 0 50px;} </style> </head><body> <div id=\"layout\"> <div =\"l l\">Left<br /><br /><br /><br /><br /><br/><br /><br /><br /><br /><br /><br/> </div> <div =\"r r\"> <div =\"ll2\">Here</div> <div =\"m m2\">There</div> Right<br /><br /><br /><br /><br /><br/><br /><br /><br /><br /><br /></div> <div =\"m m\"> Middle <div =\"ll1\">Here1</div> <div =\"m m1\">There1</div><br /><br /><br /><br /><br /><br/><br /><br /><br /><br /> </div></div> </body> </html> [查看PDF电子文档]

css入门例子:样式覆盖

2009-02-12

Cascading Order

这个段落内嵌样式(Inline Style)覆盖(overwrite)了内部样式表(Internal Style Sheet)显示字体大小是30pt而不是12pt

[查看PDF电子文档]

css选择器:CSS 动态显示等级选择器

2009-02-12

结构代码简单不能再简单:
HTML 代码:

550)this.style.width=550; (this.height>550)this.style.width=(this.width*550)/this.height;\">

定义基本容器宽度刚好够平铺5个图片高度只显示图片上半部分未选中状态:
HTML 代码:
.star { list-style:none; position:relative; margin:0; padding:0; width:100px; height:20px;background:url(13_010531_star_rating.g) top left repeat-x;}

定义每个单元及触发显示图片下半部分选中状态注意要采用绝对定位思路方法:
HTML 代码:
.star li a { display:block; width:20px; height:20px; z-index:2; position:absolute; padding:0;}.star li a:hover { background:url(13_010531_star_rating.g) bottom left; z-index:1; left:0;}

最后就是分别定义每个单元格偏移量和链接触发可控制宽度:
HTML 代码:
.star a.one-star { left:0;}.star a.one-star:hover { width:20px;}.star a.two-stars { left:20px;}.star a.two-stars:hover { width:40px;}.star a.three-stars { left:40px;}.star a.three-stars:hover { width:60px;}.star a.four-stars { left:60px;}

[查看PDF电子文档]

css滤镜效果:css滤镜

421429448 — 2008-11-16
css滤镜
Style属性：
　　可以应用在标签中，更可用广泛应用在

等等标签中，
更重要的是，它可用在标签中。
页面切换效果：
在页面前部与之间加入""
说明：duration为页面切换的时间长度，3.000表示3秒钟，一般可以直接输
入3便可；transition为切换效果，从1-23共22种不同的切换效果，其中23
为随机效果。
滤镜效果：
Photoshop的滤镜用的多了吧，在页面中也用滤镜搞搞新意思吧！
语法:STYLE="filter:filtername(fparameter1,fparameter2...)}
(Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数)
滤镜说明：
Alpha：设置透明层次.
blur：创建高速度移动效果，即模糊效果.
Chroma：制作专用颜色透明.
DropShadow：创建对象的固定影子.
FlipH：创建水平镜像图片.
FlipV：创建垂直镜像图片.
glow：加光辉在附近对象的边外.
gray：把图片灰度化.
invert：反色.
light：创建光源在对象上.
mask：创建透明掩膜在对象上.
shadow：创建偏移固定影子.
wave：波纹效果.
Xray：使对象变的像被x光照射一样.
1.滤镜:alpha
语法:
STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,
StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
说明：
Opacity:起始值，取值为0-100,0为透明，100为原图.
FinishOpacity:目标值.
Style：1或2或3
StartX：任意值
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="40",Style="2")
2.滤镜:blur
语法:
STYLE="filter:Blur(Add=add,Direction=direction,
Strength=strength)"
说明：
Add:一般为1，或0.
Direction:角度,0-315度，步长为45度.
Strength:效果增长的数值,一般5即可.
例子：filter:Blur(Add="1",Direction="45",Strength="5")
3.滤镜:chroma
语法:
STYLE="filter:Chroma(Color=color)"
说明:
color:#rrggbb格式，任意.
例子：filter:Chroma(Color="#FFFFFF")
4.滤镜:DropShadow
语法:
STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
说明:
Color:#rrggbb格式，任意.
Offx:X轴偏离值.
Offy:Y轴偏离值.
Positive:1或0.
例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",
Positive="1")
5.滤镜:FlipH
语法:
STYLE="filter:FlipH"
例子：filter:FlipH
6.滤镜:FlipV
语法:
STYLE="filter:FlipV"
例子：filter:FlipV
7.滤镜:Glow
语法:
STYLE="filter:Glow(Color=color,Strength=strength)"
说明:
Color:发光颜色.
Strength:强度(0-100)
例子：filter:Glow(Color="#6699CC",Strength="5")
8滤镜:Gray
语法:
STYLE="filter:Gray"
例子：filter:Gray
9.滤镜:Invert
语法:
STYLE="filter:Invert"
例子：filter:Invert
10.滤镜:Mask
语法:
STYLE="filter:Mask(Color=color)"
例子：filter:Mask(Color="#FFFFE0")
11.滤镜:Shadow
语法:
filter:Shadow(Color=color,Direction=direction)
说明:
Color:#rrggbb格式.
Direction:角度,0-315度，步长为45度.
例子：filter:Shadow(Color="#6699CC",Direction="135")
12.滤镜:Wave
语法:
filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,
Strength=strength)
说明:
Add:一般为1，或0.
Freq:变形值.
LightStrength:变形百分比.
Phase:角度变形百分比.
Strength:变形强度.
例子:filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")
13.滤镜:Xray
语法:
STYLE="filter:Xray"
例子:filter:Xray
CSS滤镜基础
随着网页设计技术的发展，人们已经不满足于原有的一些HTML标记，而是希望能够为页面添加一些多媒体属性，例如滤镜的和渐变的效果。CSS技术的飞快发展使这些需求成为了现实。从现在开始我要为大家介绍一个新的CSS扩展部分：CSS滤镜属性（Filter Properties)。使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本容器、以及其他一些对象。对于滤镜和渐变效果，前者是基础，因为后者就是滤镜效果的不断变化和演示更替。当滤镜和渐变效果结合到一个基本的SCRIPT小程序中后，网页设计者就可以拥有一个建立动态交互文档的强大工具。也就是CSS FILTER+ SCRIPT，这就说明想要建立动态的文档还要一些SCRIPT （脚本语言）的基础。
正常的图片

模糊效果处理后的图片，哪个更漂亮，你觉得呢！达到这个效果很容易。仅仅是加了点东东。

滤镜效果（一）
1、Alpha 滤镜

语法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy)}
"Alpha"属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。他们的参数含义分别如下：
“opacity"代表透明度水准。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。”finishopacity"是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。“style" 参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。”STARTX“和”STARTY“代表渐变透明效果的开始X和Y坐标。”FINISHX“和”FINISHY“代表渐变透明效果结束X和Y 的坐标。

7、Gray ,Invert,Xray 滤镜
语法：{filter:gray} ,{filter:invert},{filter:xray}
Gray滤镜是把一张图片变成灰度图；Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。
巧用CSS的MASK滤镜
　　Mask滤镜可以为网页上的HTML元件对象作出一个矩形遮罩，关于什么是遮罩?如果你用过Flash中的遮罩，你就会知道了，就是那个样子了。实际上对于遮罩你也可以这样来理解，相当于用一块有色布把物件盖起来，但内容却被挖去了。若你还不明白，就看下面的图片再听我给你细说。
　　图1　mask滤镜效果1
　　在上面这mask滤镜中用这么深的颜色，主要是让你能清楚地看出效果来。让我们来看一下mask滤镜的参数：它只有一个参数Color，即遮罩的颜色以#RRGGBB 格式的颜色值。你只要在DW3中给它选择一种适合的颜色就OK了，如上面的mask滤镜代码就是：.mask1 { filter:mask(color=#00ff00) }，在下面的例子中你会看到，其实滤镜的颜色不是主要的，关键的倒是背景的颜色。
　　下面我们用mask滤镜做几个特效：
　　1、五彩缤纷的文字
　　图2　mask滤镜效果2
　　上面这种效果怎么样，还不错吧！有点象图象是不是？这就是mask滤镜的效果。这里用了个白色滤镜，其代码是：.mask1 { filter:mask(color=#ffffff) }。五彩缤纷的文字颜色实际上就是背景的颜色。其制作方法也很简单，就是插入一个1*1的表格，给表格加上多彩色的背景，在表格中输入文字，给单元格加载一个mask 滤镜，就做好了，不难吧？！
　　2、探照灯动画效果
　　下面的这种探照灯效果，用Flash做都要费点神，想不到用CSS滤镜却也能做出来！由于探照灯效果是动态的，我只能抓两张过程图片给你看看，要看动态效果，那你就根据我讲的动手做一个或去我家（http:/fym888.go.163.com）看。
　　图3　探照灯动画效果1
　　图4　探照灯动画效果2
　　下面介绍制作方法：
　　这种效果比起上面的例子来要复杂一点，但也就是多点几次鼠标而已。
　　1、插入一个图层，我称其为“父层”，该层用来放要显示的内容（文字或图片）。再在该层上插入一个层，我称其为子层，它主要用来产生遮罩效果。
　　2、在父层的属性面板上设置显示窗口，也就是设置图层的“Clip”属性，在该属性中用的是相对坐标，其中：L、T是左上角坐标；R、B 是右下角坐标。以后的子层将只有在你设置的窗口中才显示。设置好的层属性参数面板如下图所示：
　　图5　层属性面板
　　我这里的父层是“Layer4”，我在这里把整个父层都作为显示窗口，也就是当子层运动到父层时就可见，在父层之外不可见。
　　3、我们在子层上插一个背景透明的圆形图片，这里用圆图形的目的主要是探照灯光的投影是个似圆形，另外圆外的图象部分必须透明，否则看到的将是一个矩形方框在移动。然后在子层上加载一个颜色与父层背景颜色相同的mask滤镜，并把子层拉大，使其能完全覆盖父层的内容,这样在浏览器中父层上的内容就只有圆形图片那一部分能看见，这正是我们希望的效果。
　　4、当然要产生探照灯的效果，就要使那块圆形区域动起来，这就要用Dreamweaver的时间线（Timeline)功能了。在DW3中先拖到子层，使其上的图片正好覆盖父层内容的首部，按“Ctrl+F9”，调出时间线面板，把子层拖到时间线面板上，把最后一帧拖到100帧，再在第50帧插入一个关键帧，并把子层的图片与父层内容的尾部重合，在时间线面板上选取“Loop”（循环播放）和“Auto”（自动播放），一切OK。
　　一幅复杂的动画完成，按F12看看，是不是有点酷？！

第一步：把下面的脚本插入与之间：

第二步：把下面的脚本插入与之间：

style="position:absolute;top:70;left:390;filter:blur(add=1,direction=80,strength=2)"
width="337" height="87" border="0">
[查看PDF电子文档]

css滤镜:CSS滤镜应用技巧

27572161 — 2008-11-16
常做网页的朋友们一定都知道CSS吧，CSS是Cascading Style Sheet的缩写，通常人们都叫它“样式表”或“级联样式”。它的功能非常全面，从文字、图片、段落到整个网页各个方面都有它的强大之处，今天我们就来说说CSS中的滤镜效果。大家在做网页时，对图像处理多数都是用Photoshop等图形处理软件吧，其实在CSS中自带了许多滤镜，合理应用这些滤镜您同样可以做出以上软件所做出的效果。下面...
2007年11月1日
实例详解CSS滤镜(8)Shadow属性
　　Shadow属性可以在指定的方向建立物体的投影。它的表达式是这样的：　　Filter：Shadow（Color=color，Direction=direction）　　在这里，Shadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向。　　这里说的方向与我们在第二节Blur属性中提到的“方向与角度的关系”是一样的。　　也许您会问，前面讲到的D...
2007年11月1日
实例详解CSS滤镜(12)alpha属性
alpha是来设置透明度的。先来看一下它的表达格式：　　filter：alpha（opacity=opcity，finishopacity=finishopacity，　　style=style，startX=startX，startY=startY，finishX=finishX，　　finishY=finishY）　　哇，怎么这么长。是啊，不过这些参数都各有其用。　　Opacity代表...
2007年11月1日
实例详解CSS滤镜(9)Wave属性
Wave属性用来把对象按照垂直的波纹样式打乱。它的表达式如下：　　Filter：Wave（Add=True（False），Freq=频率，LightStrength=增强光效，　　　　　　Phase=偏移量，Strength=强度）　　我们看到Wave属性的表达式还是比较复杂的，它一共有五个参数。Add参数有两个参数值：True代表把对象按照波纹样式打乱；False代表不打乱；　　Fre...
2007年11月1日
实例详解CSS滤镜(6)Glow属性
当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果。它的表达式如下：　　Filter：Glow（Color=color，Strength=strength）　　Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。让我们先来看一下加上Glow属性的效果图：　　怎么样，是不是有一种燃烧的火焰的感觉。实现这种效果...
2007年11月1日
实例详解CSS滤镜(4)Chroma属性
Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下：　　Filter：Chroma（color=color）　　这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图：　　图中显示两种字体，两种颜色，我们现在对“leaves”字体添加chroma属性，使其透明。代码如下：　　　...
2007年11月1日
实例详解CSS滤镜(2)Mask属性
　Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单：　　Filter：Mask（Color=颜色）　　只有一个Color参数，用来指定使用什么颜色作为掩膜。　　同样，我们来看一下一幅图片在加上mask属性前后的效果（见下图）：　　加上MASK属性的效果就好象是在用有色眼镜看物体一样。上面的效果的代码如下：　　　　　　...
2007年11月1日
用CSS滤镜巧制3D按钮式导航条
　　平面的导航条看多了，想不想做个3D的，当然制作的方法很多，真是仁者见仁，智者见智。我试着做了个按钮式的，效果还不错，每一个菜单项看起来都是一个个的按钮，制作方法也不复杂，并且大小只有几k，算瘦小的了。你只要有点html和CSS的基础知识就够了。　　下面我们开始制作：　　第一步：　　用Dreamweaver建立一个3x1的表格，宽度为70px，不设高度值，边框设为0，间距...
2007年11月1日
特殊效果的文字应用运用css滤镜集锦
//*样式定义结束*//
　　
　　
　　
//*以下的区域内采用中
　　
　　
　　
//*区域内为Shadow类*//
　　

　　　　　　　　font-weight：bold；color：#FF9900；”>
　　　 Hongen Online
//*定义字体名称、大小、粗细、前景色*//
　　　

　　　
//*区域内为Dropshadow类*//
　　　

　　　　　　　　 font-weight：bold；color：#FF9900；”>
　　　 Hongen Online
//*定义字体样式与Shadow类的一样*//
　　　

　　　
　　
12、Wave属性
　　Wave属性用来把对象按照垂直的波纹样式打乱。它的表达式如下：
　　Filter：Wave（Add=True（False），Freq=频率，LightStrength=增强光效，
　　　　　　Phase=偏移量，Strength=强度）
　　我们看到Wave属性的表达式还是比较复杂的，它一共有五个参数。Add参数有两个参数值：True代表把对象按照波纹样式打乱；False代表不打乱；
　　Freq参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹。　　LightStrength参数是为了使生成的波纹增强光的效果。参数值可以从0到100。　　　Phase参数用来设置正弦波开始的偏移量。这个值的通用值为0，它的可变范围为从0到100。这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360*25%）的方向开始。
　　说了一大堆，我们还是先看一个实例吧。比如下面这幅图片（点击可放大）：
　　下面我们对上面这个页面加上Wave效果，代码如下：
　　
　　　
　　　 wave css
　　　
　　　
　　　
　　　
//*定义DIV区域内为Wave类*//
　　　

　　　　　　　font-size=72pt? [查看PDF电子文档]

png背景透明:png ie下背景透明

6945636 — 2008-11-16
PNG图片在网页设计中扮演着一个很重要的角色，利用PNG图片的特点可以制作出实用,绚丽的效果，可是对于PNG图片的支持却不是很理想，Firefox和Opera对PNG支持的比较好，特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。
IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型
(X)HTML:

PNG半透明背景图片效果
：PNG图片在网页设计中扮演着一个很重要的角色，利用PNG图片的特点可以制作出需要使用绚丽的效果，可是对于PNG图片的支持却不是很理想，Firefox和Opera对PNG支持的比较好，特别是Firefox浏览器。可是IE却不理PNG,是的设计者无法很随意的使用png图片。

IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型

这里是个超链接测试

CSS: #wrap{ width:460px;margin:20px auto 20px 80px;text-align:left;height:300px; padding:20px; border:1px #eee solid;}
/*not for ie 6.0*/
html>body #wrap{background: url(/img/bgcanvas.png) repeat;}
/*for ie 6.0*/
* html #wrap {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/img/bgcanvas.png");
background:none;
}
#wrap a{color:#c00; text-decoration: none; position:relative;}/*解决IE下链接失效的问题*/
#wrap a:hover{ text-decoration:underline;}
效果预览
经测试，兼容IE6.0 Firefox 1.5 Opera 8.5，因为AlphaImageLoader滤镜不支持IE5.0，所以IE5.0没有达到想要的效果，基本IE5.0与PNG无缘了。
关于AlphaImageLoader滤镜
Quotes From CSS2.0手册
语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src="/sURL" )
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
　　　　　　true : 默认值。滤镜激活。
　　　　　　false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
　　　　　　　　image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
　　　　　　　　scale : 缩放图片以适应对象的尺寸边界。
　　　　　　　　src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域 [查看PDF电子文档]

ip地址代码:代码地址

457188704 — 2008-11-16
BLOG专用小游戏机

http://yuanyuan8503131.blog.sohu.com/12261595.html

晴雨表和两个侧边图片代码

http://yuanyuan8503131.blog.sohu.com/10837972.html

给你的博客里加调查器

http://yuanyuan8503131.blog.sohu.com/10420731.html

文章加滚动条

http://yuanyuan8503131.blog.sohu.com/9778918.html

制作小视频

http://yuanyuan8503131.blog.sohu.com/6553837.html

做自己的艺术照片

http://yuanyuan8503131.blog.sohu.com/6266794.html

播放器代码

http://yuanyuan8503131.blog.sohu.com/4465861.html

http://yuanyuan8503131.blog.sohu.com/10224185.html

http://yuanyuan8503131.blog.sohu.com/7884789.html

显示IP地址代码

http://yuanyuan8503131.blog.sohu.com/4866927.html

首页添加背景图片代码

http://yuanyuan8503131.blog.sohu.com/4668993.html

透明FLASH代码

http://yuanyuan8503131.blog.sohu.com/4406652.html

http://yuanyuan8503131.blog.sohu.com/6470509.html

博客基础教程

http://yuanyuan8503131.blog.sohu.com/4103371.html

如何使文字颜色渐变

http://yuanyuan8503131.blog.sohu.com/3860386.html

分割线大集合

http://yuanyuan8503131.blog.sohu.com/3784865.html

百宝箱一些制作工具

http://yuanyuan8503131.blog.sohu.com/3644316.html

welcome图片大集合

http://yuanyuan8503131.blog.sohu.com/3591025.html

天气预报代码

http://yuanyuan8503131.blog.sohu.com/11266823.html

http://yuanyuan8503131.blog.sohu.com/3455756.html

http://yuanyuan8503131.blog.sohu.com/11266823.html

隐藏你的播放器

http://yuanyuan8503131.blog.sohu.com/3426679.html

几种分割线的代码

http://yuanyuan8503131.blog.sohu.com/3255421.html

绝对定位代码

http://yuanyuan8503131.blog.sohu.com/3089917.html

印章是这样形成地

http://yuanyuan8503131.blog.sohu.com/3047018.html

给博客添加个性计数器

http://yuanyuan8503131.blog.sohu.com/2982357.html

给博客添加涂鸦

http://yuanyuan8503131.blog.sohu.com/2943885.html

怎样添加代码

http://yuanyuan8503131.blog.sohu.com/2902144.html

给博客换鼠标

http://yuanyuan8503131.blog.sohu.com/6894172.html

http://yuanyuan8503131.blog.sohu.com/2893397.html

http://yuanyuan8503131.blog.sohu.com/3108277.html

http://yuanyuan8503131.blog.sohu.com/10508809.html

边框效果

http://yuanyuan8503131.blog.sohu.com/2865716.html

图片水中倒影代码

http://yuanyuan8503131.blog.sohu.com/2864840.html

停留时间代码

http://yuanyuan8503131.blog.sohu.com/2864646.html

http://yuanyuan8503131.blog.sohu.com/4595285.html

CSS图片滤镜效果

http://yuanyuan8503131.blog.sohu.com/2864388.html

给博客加QQ

http://yuanyuan8503131.blog.sohu.com/2863585.html

给博客加留言本

http://yuanyuan8503131.blog.sohu.com/2815882.html

日历代码

http://yuanyuan8503131.blog.sohu.com/5499955.html

http://yuanyuan8503131.blog.sohu.com/2743609.html

http://yuanyuan8503131.blog.sohu.com/4595285.html

http://yuanyuan8503131.blog.sohu.com/4465861.html

http://yuanyuan8503131.blog.sohu.com/6100783.html

博客挂件代码

http://yuanyuan8503131.blog.sohu.com/2741035.html

融入背景的播放器

http://yuanyuan8503131.blog.sohu.com/2737920.html

文字特效代码

http://yuanyuan8503131.blog.sohu.com/2737227.html

给博客添加FLASH时钟

http://yuanyuan8503131.blog.sohu.com/12664959.html

http://yuanyuan8503131.blog.sohu.com/12691068.html

http://yuanyuan8503131.blog.sohu.com/2732828.html

http://yuanyuan8503131.blog.sohu.com/3287921.html

http://yuanyuan8503131.blog.sohu.com/12664959.html

http://yuanyuan8503131.blog.sohu.com/12691068.html

美化博客(一)个人档案加图片

http://yuanyuan8503131.blog.sohu.com/2732157.html

对图片加链接的代码

http://yuanyuan8503131.blog.sohu.com/2864388.html [查看PDF电子文档]

IE与firefox VS js与css兼容...

123775108 — 2008-11-16
IE与firefox VS js与css终于完成了偶的拖动窗口，花了近15个小时，庆祝一下(*^__^*)；以前写了IE下的功能，于是又写了火狐下的功能，在火狐上花了很多时间，发现了火狐中几处与IE中不同的地方：
1.火狐不能对innerText支持，也不知道为什么。火狐支持innerHTML但却不支持innerText，所以上网查了一下，原来它改支持textContent来实现innerText，不过实现得没有那么好，默认把多余的空格也保留了。如果不用textContent，如果字符串里面不包含HTML代码也可以用innerHTML代替
2.禁止选取网页内容：
在IE中一般用js：obj.(){return false;}
而火狐用CSS:-moz-user-select:none
3.滤镜的支持(例：透明滤镜)：
IE:filter：alpha(opacity=10);
火狐：-moz-opacity:.10;
4.捕获事件：
IE：obj.setCapture() 、obj.releaseCapture()
火狐： document.addEventListener("mousemove",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);
5.获取鼠标位置：
IE:event.clientX、event.clientY
火狐：需要事件函数传递事件对象
obj.(ev){
X= ev.pageX;Y=ev.pageY;
}
6.DIV等元素的边界问题：
比如：设置一个div的CSS:：{width:100px;height:100px;border:#000000 1px solid;}
IE中：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；
而火狐：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
所以在做这个兼容IE和火狐的拖动窗口时，在js和css的写法上要动点脑筋，给大家两个小技巧.
一.判断浏览器类型：
var isIE=document.all? true:false;
我写了一个变量，如果支持document.all语法那么isIE=true，否则isIE=false
二.在不同浏览器下的CSS处理：
一般可以用!important来优先使用css语句（仅火狐支持）
比如：{border-width:0px!important;border-width:1px;}
在火狐下这个元素是没有边框的，在IE下边框宽度是1px
又发现几处XHTML与正常状态下的JS、CSS的区别,前阶段写了兼容IE/火狐的拖动窗口发现了这两个浏览器的几处区别。今天又写了兼容XHTML的版本，因为现在不是流行web标准嘛，偶不能落后啊！再说现在ASP.NET中的所有页面都是应用XHTML标准的，如果在布局页面中删了这句标准代码，里面的布局和控件visual studio就不显示了。
呵呵，在网页开头加了这个代码就是所谓的XHTML标准了
改了一下JS和CSS，调试了N次，发现了XHTML标准下的几个不同点：
1.document.documentElement 与 document.body
代码中设置页面的CSS时一定要用：document.documentElement
比如：document.documentElement.style.overflow='hidden';
overflow-X、overflow-Y 这两个分坐标属性XHTML是不支持的；
2.在取得网页窗口区域和获取滚动条位移距离时也要用document.documentElement
即这四个属性（clientWidth、clientHeight、scrollLeft、scrollTop）一定要用document.documentElement
但是document.body.appendChild()和document.body.removeChild()却是可以用的，而且用 document.documentElement.appendChild()和 document.documentElement.removeChild()代替却会报错；
所以我总结了一下仅clientWidth、clientHeight、scrollLeft、scrollTop和document.documentElement.style时才用document.documentElement
3.呵呵，加了这个标准以后IE的边框问题也出现了变化，现在和火狐趋于一致了，是不是这个就是XHTML的优点——跨浏览器的标准
上篇文章提到：
设置一个div的CSS:：{width:100px;height:100px;border:#000000 1px solid;}
IE中（正常情况）：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；
火狐（正常情况）：：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
加了XHTML标准后的（IE和火狐打和了，^_^）：
IE中（XHTML）：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
火狐（XHTML）：：div獊 [查看PDF电子文档]

ASP基础教程：Are you ready?

414075572 — 2008-11-16
http://tech.163.com/school · 2004-11-10 12:04:25 · 来源: 网易学院
如何令你的网站“动感十足”

您的网站是否仍一如既往地保持“静态”？目前呈几何增长的互联网网站中，有相当一部分仍固守“静态”，无形中已大大落后于时代的步伐。所谓“静态”指的就是网站的网页内容“固定不变”，当用户浏览器通过互联网的HTTP（Hypertext Transport Pr otocol）协议向WEB服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。其页面的内容使用的仅仅是标准的 HTML代码，最多再加上流行的GIF89A格式的动态图片，比如产生几只小狗小猫跑来跑去的动画效果。若网站维护者要更新网页的内容，就必须手动地来更新其所有的HTML文档。

“静态”网站的致命弱点就是不易维护，为了不断更新网页内容，你必须不断地重复制作HTML文档，随着网站内容和信息量的日益扩增，你就会感到工作量大得出乎想象。

你不禁要问：那么什么是动态网站呢？这就是本文将重点讲述的核心，所谓“动态”，并不是指那几个放在网页上的GIF动态图片，在这里笔者为动态页面的概念制定了以下几条规则：

1、“交互性”即网页会根据用户的要求和选择而动态改变和响应，将浏览器作为客户端界面，这将是今后WEB发展的大事所趋。

2、“自动更新”即无须手动地更新HTML文档，便会自动生成新的页面，可以大大节省工作量。

3、“因时因人而变”，即当不同的时间、不同的人访问同一网址时会产生不同的页面，是不是很酷？

现在你已经对“动态”网站有了一个基本的概念，接下来应挑选称手的“兵刃”了。将网站“动态”化的方法很多，这要看你是出于何种需求。如果你是个人网站的维护者，使用的是免费主页空间，那么绝大多数情况下你只能使用Java、Java Script和最新的DHTML技术，如果你的主页空间提供者能给予你CGI权限或ASP支持，那么你将能非常幸运地发挥真正的动态技术。关于CGI和ASP技术将在后面的着重讨论，这里针对个人网站仅就最新的DHTML技术进行重点介绍。

究竟什么是DHTML？它与传统的HTML有什么不同？DHTML就是当网页从WEB服务器下载后无须再经过服务器的处理，而在浏览器中直接动态地更新网页的内容、排版样式、动画。比如，当鼠标移至文章段落中，段落能够变成蓝色，或者当你点击一个超链后会自动生成一个下拉式的子超链目录。这就是 Dynamic HTML（动态HTML），它是近年来网络飞速发展进程中最振奋人心也是最具实用性的创新之一。它是一种通过各种技术的综合发展而得以实现的概念，这些技术包括Java Script , VB0Script, Document Object Model (文件目标模块)，Layers和Cascading Style Sheets ( CSS样式表)等。非常遗憾的是在网景Netscape和微软IE浏览器几番大战后，我们仍没有得到一个对DHTML支持的统一标准。因此本文在介绍 DHTML时不得不分别讲述。让我们先来看看Microsoft IE 4对DHTML的支持：

1 .动态内容（Dynamic Content）：动态地更新网页的内容，可"动态"地随时插入、修改、或删除网页的元件，譬如文字、标记等。

2 .动态排版样式（Dynamic Styles Sheets）：通过W3C的“Cascading Style Sheets”（串联式排版样式，简称CSS1或CSS），提供了设定HTML标记的字体大小、字型、粗细、字型样式、行高度、文字颜色、加底线或加中间横线、与边缘距离、靠左右或置中、缩排、背景图片或颜色等排版功能。而“动态排版样式”，可以“动态”地随时地改变排版样式。

3 .动态定位（Dynamic Positioning）：通过W 3 C的“Working Draft on Positioning HTML with Cascading Style Sheets”，提供HTML元件在X、Y、Z轴的定位功能，让设计者可以放置影像、控件、文字等在网页上的任何位置上。而放置在不同的Z轴上，设计者就可以产生重叠的效果。

4 .内建资料处理（Data Awareness）：无须复杂的程序，无须花费服务器太多资源，即可让网页设计者即时处理文档。

5 .内建多媒体支援：IE 4.0结合CSS与内建的ActiveX Controls，提供多媒体支持的功能，包括转换特效、滤镜特效、路径控制、顺序控制、动画、制图、播放声音和影像等多媒体功能。

让我们再来看看Netscape Communicator 4.0对DHTML所提供的支持：

1 .动态排版样式（Dynamic Styles Sheets）：支援W 3 C的“Cascading Style Sheets”（串联式排版样式，简称CSS1或CSS）、和自创的“Java Script Style Sheets”。

2 .Dynamic Layers：提供图文定位、改变图文重叠顺序、控制隐藏或显示图文、移动图文的功能，让您设计出“动画”的效果！

3 .Dynamic Fonts：提供由服务器下载字型的功能。可见虽然IE 4.0和Netscape Communicator 4.0都提供了“Dynamic HTML”的支持，但是事实上两者除了对“Cascading Style Sheets”的规格相近外，其余都相差甚远。因此当你设计DHTML页面时必须充分考虑到兼容性的问题，选择称手的“兵刃”和方法对于设计者来说始终是最重要的。有关DHTML的使用方法和设计技巧作者将在第二章《动态网页设计十八般武艺》中仔细讲解，请密切关注。

或许对于一个个人网站来说充分运用DHTML技术足以令网页栩栩如生，动感十足。然而对于建立商业网站的企业而言，仅仅拥有DHTML是远远不够的。因为仅仅发生在客户浏览器端的动态效果是无法满足商业网站大量信息查询，客户咨询，资源交互等“动态”需求的。因此作为商业网站的设计者，必须要设计出更具实用性和交互性的“动态”网站。由于绝大多数商业网站都具有大量的数据和信息，而建网的初衷也就是在于方便客户查询企业资料，方便同客户的交流，及时获得信息反馈。那么，就必然会面临如何让使用者在浏览器界面中，通过互联网或内联网（Intranet）查询WEB数据库的资料，甚至输入、更新和删除WEB 服务器上的资料。下面笔者就简单介绍几种常用的“动态”网站设计方法：

1、CGI（Common Gateway Inte***ce）通用网关接口的传统方式，当用户在浏览器端填好表单（form）要求输入的资料，提出HTTP请求后，WEB服务器端将执行一个表单所设定的可执行的CGI应用程序，CGI程序分析表单（form）中所输入的资料，存取WEB数据库，将查询执行的结果以HTML的格式返回给浏览器。使用CGI方式存取WEB数据库，有很多的缺点，譬如不易开发、变更修改成本高、功能有限、不易侦错、执行速度慢等，而且由于并非整合于HTML文档之中，因此必须使用与HTML完全不同的设计过程来设计一个可执行的应用程序。

2、IDC（Internet Database Connector）互联网数据库连接头是Windows NT Server内含Internet Information Server（简称IIS）2.0的特征之一，它提供了一种使你的互联网数据库内容得以发布并可与用户交互的方法，它实际上是一个包含于IIS中的I S A P I应用程序。你只需掌握HTML和SQL的基本知识并写为数不多的代码就能编出具有交互能力的数据库应用程序，让使用者在浏览器界面中得以查询、输入、更新、和删除WEB服务器上的数据资料。正如VB程序员所喜欢的那样，构成IDC应用程序的文件是解释性的，由于设计简易，只要准备两个档案，即可在用户端的浏览器中存取WEB服务器的数据资料，且无须编译，因此具有快速的开发循环和反馈。但这种简单性的代价是牺牲了许多灵活性，使你不得不放弃许多对用户接口的控制，并几乎放弃了所有验证数据的能力。因而I D C仅适用于简单的WEB应用程序。

3、ActiveX Data Object（ADO）是WEB数据库应用的最佳选择。

ActiveX Data Object（简称ADO）究竟是什么呢？ActiveX Data Object的技术，让您可以与Active Server Pages（简称ASP）结合以建立提供数据资讯的网页内容，只需在网页面中执行Structured Query Language（结构化查询语言，简称SQL）指令，让用户在浏览器界面中输入、更新、和删除WEB服务器上的数据资料。当用户端的浏览器填好表单所要求输入的资料并按下“Submit”按钮后，经过互联网、内联网传送HTTP请求到WEB服务器，该请求在WEB服务器执行一个表单所指定的Active Server Pages程序（后缀名为. ASP的文档）。一个. ASP文档是一个纯文字档，包括：HTML标记（tags）、VBScript或JScript语言的程序代码、ASP语法、和结构化查询语言SQL指令。IIS3.0 / 4.0 WEB服务器执行. ASP文档，通过ODBC驱动程式，连接到支持ODBC的数据库上，执行ASP文档所指定的SQL指令，最后将执行的结果以HTML的格式传送给用户浏览器。ADO具有容易使用、开发执行快速、消耗系统资源较少，和占用磁盘空间小等优点。

以上就是目前设计商业网站常用的“动态”技术，由于本人的工作和使用经验，笔者较倾向于ADO和ASP的结合，从长远来看这对搭档也势必成为今后一段时间内“动态”WEB的核心技术。因此在本文第二章《动态网页设计十八般武艺》中，笔者将就ADO和ASP的使用进行展开讲述，敬请期待。 [查看PDF电子文档]

魔兽秘籍:博客秘籍

523632646 — 2008-11-16
目录前言：
此博客秘籍以目录的形式向大家展示比较优秀的博客教程和技巧。分类清晰，读者很容易查阅。内容包括“播放器代码篇”、“CSS及HTML代码篇”、“综合应用篇”、“素材篇”、“网易博客篇”、“工具篇”等。以后可能还会添加新的分类。这里的代码都能在网易博客上较好的应用，而被网易博客屏蔽掉的代码，在这里就不做收录了。
博客帮助：1、Kevin2.0 　2、小强　3、超哥 4、令冲冲提问区 　5、网易博客帮助中心
文章标题来源说明级别加入时间播放器篇 视频/音频连续播放技巧。小强博客文本编辑列表中高级2006.09.15单曲播放器特效代码。小强博客基于CSS代码的特效初级2006.09.15一款超级棒的播放器秋风细雨素材外引2006.09.15流媒体视频播放代码总结小强博客播放器代码汇总高级2006.10.16如何获得Flv视频的网址及如何下载小强博客FLV播放器必须高级2006.10.03FlV视频播放器代码小强博客FLV播放器代码高级2006.10.03CSS及HTML篇常用CSS特效文字。小强博客基于CSS代码的特效中级2006.09.15CSS特效与Flash的结合应用00兰图片的处理中高级2006.09.21水平线CSS特效。小强博客基于CSS代码的特效中级2006.09.15精美图片CSS滤镜。小强博客基于CSS代码的特效中高级2006.09.15首字放大下沉、左侧滚动条。小强博客基于CSS代码的特效初级2006.09.15在线设置日志滚动条。小强博客编写工具中级2006.09.15综合应用篇走马灯特效及其应用小强博客HTML代码应用初级2006.10.05表格的嵌套格式和图片美化小强博客HTML代码应用高级2006.11.06表格的高级样式小强博客表格边框等的设计中级2006.11.06音画贴的制作小强博客比较复杂/慎用高级2006.11.06排版技巧:巧妙的文字竖排小强博客HTML应用中高级2006.09.21幻灯片制作小强博客Flash应用中高级2006.09.21Flash日历代码秋风细雨Flash编码初级2006.09.15FLASH代码合集秋风细雨Flash编码初级2006.09.17可移动的友情连接秋风细雨HTML代码初级2006.09.15FLASH时钟大全华仔Flash素材素材2006.09.15FLASH时钟以及时钟代码秋风细雨Flash应用初级2006.09.15倒（正）计数器制作秋风细雨GIF应用中级2006.09.15素材篇 BLOG超多款时钟地址网络Flash素材基本2006.10.02透明FLASH大全网络Flash素材基本2006.10.02免费申请计数器网络附件素材基本2006.10.02像素图片网页素材吧网络图片素材基本2006.10.02背景图片大全（一）小强博客背景图片素材基本2006.09.15背景图片大全（二）小强博客背景图片素材基本2006.09.15颜色代码表大全小强博客基本素材基本2006.09.15网易博客篇如何设置163播放器小强博客特别推荐小技巧2006.11.23如何制作个性的文章列表小强博客特别推荐小技巧2006.11.06如何让你的文章出现在网易首页小强博客推荐参考基本2006.11.06如何使用特效代码小强博客基本操作基本2006.11.0610招之内教你成为一名超级博客小强博客博客心得基本2006.11.06[url=http://www.blo [查看PDF电子文档]

博客经典留言:引用制作博客经典秘籍

923906520 — 2008-11-16
海星的制作博客经典秘籍

海星欢迎您的到来

海星欢迎您的到来

背景音乐┆音画套装┆动感图片┆动态FLASH┆透明FLASH┆圣诞图片┆
┆闪闪图片┆韩国图片┆分割线集
┆透明相框┆淡雅背景>┆卡通鲜花┆时尚音画┆精品贴图┆图片库存┆作帖教程┆特效图文┆

博客教程来源与小强

经典秘籍小强版

文章标题

来源

说明
级别
加入时间

播放器篇

视频/音频连续播放技巧。

小强博客

文本编辑播放列表

中高级
2006.09.15

单曲播放器特效代码。

小强博客

基于CSS代码的特效

初级
2006.09.15

一款超级棒的播放器

秋风细雨

素材

外引
2006.09.15

流媒体视频播放代码总结

小强博客

播放器代码汇总

高级
2006.10.16

如何获得Flv视频的网址及如何下载

小强博客

FLV播放器必须

高级
2006.10.03

FlV视频播放器代码

小强博客

FLV播放器代码

高级
2006.10.03

CSS及HTML代码篇

常用CSS特效文字。

小强博客

基于CSS代码的特效

中级
2006.09.15

CSS特效与Flash的结合应用

00兰小水阁

图片的处理

中高级
2006.09.21

水平线CSS特效。

小强博客

基于CSS代码的特效

中级
2006.09.15

精美图片CSS滤镜。

小强博客

基于CSS代码的特效

中高级
2006.09.15

首字放大下沉、左侧滚动条。

小强博客

基于CSS代码的特效

初级
2006.09.15

在线设置日志滚动条。

小强博客

编写工具

中级
2006.09.15

综合应用篇

走马灯特效及其应用

小强博客

HTML代码应用

初级
2006.10.05

表格的嵌套格式和图片美化

小强博客

HTML代码应用

高级
2006.11.06

表格的高级样式

小强博客

表格边框等的设计

中级
2006.11.06

音画贴的制作

小强博客

比较复杂/慎用

高级
2006.11.06

排版技巧:巧妙的文字竖排

小强博客

HTML应用

中高级
2006.09.21

幻灯片制作

小强博客

Flash应用

中高级
2006.09.21

Flash日历代码

秋风细雨

Flash编码

初级
2006.09.15

FLASH代码合集

秋风细雨

Flash编码

初级
2006.09.17

可移动的友情连接

秋风细雨

HTML代码

初级
2006.09.15

FLASH时钟大全

华仔

Flash素材

素材
2006.09.15

FLASH时钟以及时钟代码

秋风细雨

Flash应用

初级
2006.09.15

倒（正）计数器制作

秋风细雨
GIF应用

中级
2006.09.15

素材篇

BLOG超多款时钟地址

网络
Flash素材

基本
2006.10.02

透明FLASH大全

网络
Flash素材

基本
2006.10.02

免费申请计数器

网络
附件素材

基本
2006.10.02

像素图片网页素材吧

网络
图片素材

基本
2006.10.02

背景图片大全（一）

小强博客
背景图片素材

基本
2006.09.15

背景图片大全（二）

小强博客
背景图片素材

基本
2006.09.15

颜色代码表大全

小强博客
基本素材

基本
2006.09.15

网易博客篇

如何制作个性的文章列表

小强博客
特别推荐

小技巧
2006.11.06

如何让你的文章出现在网易首页

小强博客
推荐参考

基本
2006.11.06

如何使用特效代码

小强博客
基本操作

基本
2006.11.06

10招之内教你成为一名超级博客

小强博客
博客心得

基本
2006.11.06

让百度和Google搜到你的博客

小强博客
推荐参考

基本
2006.09.15

制作个性名片

秋风细雨
HTML代码

HTML代码
2006.09.15

设置首页自定义图片播放

Kevin2.0
163博客技巧

中级
2006.09.15

手把手教你设置背景

Kevin2.0
163博客技巧

中级
2006.09.15

如何设置播放器

米色书虫
163博客技巧

初级
2006.09.15

“查看全文”的图片按钮

Kevin2.0
163博客技巧

初级
2006.09.15

增加博客人气攻略

MEMORY GARDEN
博客技巧

中级
2006.09.16

小贴士的制作方法

糖果
博客技巧

中高级
2006.09.16

工具篇

直接下载FLV文件

网络

提取Flv文件

工具
2006.10.02

功能齐全的在线编辑器

网络

可直接上传文件

工具

2006.10.16

继续添加中，请继续关注……

------以下是引用空菜版的秘籍----

BLOG秘籍代码:

http://photo.store.qq.com/http_imgload.cgi?/rurl2=731f1df7fc4a4f1ddcd2db2810fc65d148753fc3af45869f0764843d231a65a1397d11eb82f3a10779a6d5698e0a39ed853183cbdee9e752e7d886ab8d4e018ea678205b0da544d073b341aff99461f0b2652946" alt="`空菜`こ个性 ╳" border="0">

想在BLOG首页上放本秘籍的朋友,直接复制上边的代码放到模块里就可以了.

声明：
本站的教程部分来源网络，教程著作权归作者所有，如果作者有什么问题，请通知空菜，会及时删除帖子，并进行公开道歉。

以下是技术列表

点击直接进入

『最近更新』

◆一款手写的时钟+日历『很特别』

◇一个可爱的布布熊时钟加可爱的布布熊图像

◆17款好玩的BLOG宠物加一只可爱的小猫咪

◇苏笨的拖芽系列``『一只梦想自己不是猪的猪-拖芽』

◆YAMAHA日历和 Mystery Animals日历『可爱日历大****』

〖基础篇〗

[/ [查看PDF电子文档]

艺术字制作:巧用CSS制作艺术字

14232704 — 2008-11-16
以下另存为HTML页面，打开查看效果

bordercolorlight=#000000 border=0 cellspacing="1" cellpadding="0">

..:: 巧用CSS制作艺术字 ::..

如果灵活应用CSS各种滤镜的特点并加以组合，我们可以得到许多意想不到的效果。这是一些效果示范，供各位参考。

E流设计

用blur滤镜做出的效果，代码如下：

FILTER: blur(direction=135,strength=8)

E流设计

用dropshadow滤镜做出的效果，代码如下：

FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)

E流设计

用glow滤镜做出的效果，代码如下：

FILTER: glow(color=#B4BBCF,strength=5)

E流设计

这个效果用到了两种滤镜：shadow和alpha，代码如下：

FILTER: alpha(opacity=100,finishiopacity=0,style=1)

shadow(color=#8C96B5,direction=135)

E流设计

这个效果也用到两个滤镜mask和shadow，代码如下：

FILTER: mask(color=#E1E4EC)

shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)

注意：mask的颜色要和网页背景色一致，字体的颜色由shadow决定。

E流设计

如果说上面的效果是阴文的话，那么这个效果的应该算是阳文了，用两个滤镜实现mask和dropshadow，注意mask的颜色要和网页背景色一致，或者把mask和chroma成对使用，也可达到同样效果。代码如下：

FILTER: mask(color=#E1E4EC)

dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)

chroma(color=#E1E4EC)"

E流设计

用glow滤镜可以做空心字，方法是将字体颜色设置为背景色，再将glow滤镜的strenght的值设置为1或2即可。这个效果的代码如下：

FILTER: glow(color=#8C96B5,strength=2)

shadow(color=#B4BBCF,direction=135)

background="http://www.e-flowing.com/1/bg_1.jpg" border=0>

E流设计

E流设计

E流设计

如果背景采用图片，为了能达到满意的效果需要将mask和chroma组合使用，这样能使字体感觉是透明的，让背景透出来。

上面列出的效果前者的代码是：

FILTER: mask(color=#E1E4EC)

shadow(color=#B4BBCF,direction=135)

chroma(color=#E1E4EC)

注意：字体的颜色由shadow决定，mask和chroma的颜色要相同，色彩任意。

中间的代码是：

FILTER: glow(strength=1)

mask(color=#B4BBCF)

chroma(color=#B4BBCF)

注意：mask和chroma的颜色相同，这个颜色决定了字体的颜色。

后者的代码是：

FILTER: mask(color=#E1E4EC)

dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)

chroma(color=#E1E4EC)

注意：mask和chroma的颜色相同，色彩由dropshadow决定。

WELCOME
TO& [查看PDF电子文档]

web文档:WEB开发帮组文档集合

474643185 — 2008-11-16
本文同时由 Silent Hug 发表在 Club-编程之家 中 查看原文

请使用迅雷下载
◆ J2EE:
Prentice.Hall.PTR.Core.JavaServer.Faces.Jun.2004.chm 7.1MB
Hibernate_3.2.0_Reference_zh_CN.chm 0.6MB
Spring_2.0_Reference_zh_CN.chm 2.2MB
Struts 1.1API.chm 2.0MB
J2EE_API.chm 1.78MB
◆ Oracle9i:
Ora9iSQLRef.chm 6.93MB
◆ Javascript/CSS/HTML:
HTC手册.chm 0.2MB
CSS2帮助文档.chm 0.2MB
css样式表滤镜.chm 0.4MB
DHTML 手册.chm 0.8MB
Validato_表单验证.chm 0.2MB
JavaScript.2.0 11.96MB
◆ ASP:
ASPDOC.CHM 0.1MB
ASP应用手册.chm 0.6MB
ASP基础教材.chm 0.1MB
ASP编程完全手册1.0.chm 0.7MB
VBScript5.CHM 0.5MB
◆ Linux:
Linux基本技能教程(适合Linux初学者). [查看PDF电子文档]

图像格式与大小:[转]常用Web图像格式简...

82768649 — 2008-11-16
PNG 图像格式 PNG是一种可携式网络图像格式。PNG一开始便结合GIF及JPG两家之长，打算一举取代这两种格式。1996年10月1日由PNG向国际网络联盟提出并得到推荐认可标准，并且大部分绘图软件和浏览器开始支持PNG图像浏览，从此PNG图像格式生机焕发。
IE浏览器从4.0版本开始支持png图像浏览。
特点1：兼有gif和jpg的色彩模式。
我们知道gif格式图像采用了256色以下的index color色彩模式，jpg采用的是24位真彩模式。png不仅能储存256色以下的index color图像，还能储存24位真彩图像，甚至能最高可储存至48位超强色彩图像。
特点2：png能把图像文件压缩到极限以利于网络传输，但又能保留所有与图像品质有关的信息。
如果你的图像是以文字、形状及线条为主，png会用类似gif的压缩方法来得到较好的压缩率，而且不破坏原始图像的任何细节。据国际网络联盟测算，八位的png图像比同位的gif图像就小10%到30%。
而对于相片品质一类的压缩，png则采用类似jpg的压缩演算法。但是jpg压缩程度越大、影像的品质越差。因为它的压缩是采用的是破坏性压缩法、每次压缩的同时便多多少少漏掉一些像素。 png不同于jpg的地方在于：它处理相片类图像亦是采用非破坏性压缩，图像压缩后能保持与压缩前图像质量一样，没有一点失真。
特点3：更优化的传输显示。
熟悉gif格式的图像处理者知道，gif图像有两种模式——normal(普通)模式和interlaced(交错)模式。interlaced模式更适用于网络传输。在传送图像过程中，浏览者先看到图像一个大略的轮廓然后再慢慢清晰。png也采取了interlaced模式，使图像得以水平及垂直方式显像在萤幕上，加快了下载的速度。

特点4：支持图像透明显示。
gif格式虽然也支持透明显示，采用gif格式透明图像过于刻板，因为gif透明图像只有1与0的透明信息、只有透明或不透明两种选择，没有层次；而png提供了α频段0至255的透明信息，可以使图像的透明区域出现深度不同的层次。
png图像就可以让图像覆盖在任何背景上都看不到接缝，改善gif透明图像描边不佳的问题。
特点5：兼容性较好。
gif图像在不同系统上所显示的画面也会跟着不一样，但png却可以让你在Macintosh上制作的图像与在Windows上所显示的图像完全相同，反之亦然。
png被设计成可以通过网络传送到任何机种及作业系统上读取。
文字资料(如作者、出处)、储存遮罩(MASK)、伽玛值、色彩校正码等信息均可参杂在 png图像中一起传输。
几个发现：
不透明和索引色透明的图片， png8比gif更加具有优势。
Alpha透明的图片，png8比gif显示效果好，但文件更大。
png24没有透明效果：包括索引色透明和Alpha透明。
不同的浏览器，显示效果不一样。

Firefox：支持png8的索引色透明度， png8 和png32的alpha透明度。
IE：支持png8的索引色透明度，但不支持png8和png32的alpha透明度。(可用Js＋css滤镜解决)

网页中使用的照片类图片，jpg文件一般比png24要小很多。但不排除特殊情况。 SVG 图像格式
SVG是种一种可缩放的矢量图形。它是基于XML，由W3C联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分 [查看PDF电子文档]

html图片代码:【Html】图片相关代码

6643128 — 2008-11-16
【贴图】 一、基础代码

二、加边框
1、普通黑色边框（浏览器默认黑色）

2、简单的CSS装饰框
①
②
③
④
⑤
⑥
⑦
⑧
①　②　③　④　⑤　⑥　⑦　⑧

三、加CSS滤镜
1、无参数滤镜
①黑白

②底片

③X光片

④水平翻转

⑤垂直翻转

①　②　③　④　⑤
2、透明效果（opacity=100 透明度0—100）
①
②
③
④
①　②　③　④
3、其他特效
①浮雕

②波纹

（Add=是否打乱1或0；Freq=频率；LightStrength=光效强度；Phase=偏移量；Strength=振幅）
　 ③模糊

（Add=是否模糊1或0；Direction=方向；Strength=强度）
　 ④发光

（Color=颜色；Strength=强度）
　 ⑤阴影

（Color=颜色；Direction=方向；Strength=强度）
　 ⑥投影

（Color=颜色；offx=横向位移；offy=纵向位移；Positive=非透明或透明像素建立可见投影1或0）
　 ⑦镂空

[img]http://www.r [查看PDF电子文档]

html图片代码:在HTML放置图片的代码

154202866 — 2008-11-16
一、基础代码中国易客网 D-C/N P9W \/V J A x7?
中国易客网 [.[ C b C ? F \$^ a
二、加边框中国易客网"m/c5y `$t x ]
1、普通黑色边框（浏览器默认黑色）
+N J'Z-] s-I;[ D D6m1319
q0Q;H ^ [1x E2Z d#w/d13192、简单的CSS装饰框中国易客网 b b v+` w o C(S
①
/h:R s H u)Z:L c0q x1319②
C K P9A0X4~&Z B#C1319③中国易客网 N c { ? [4E
④
"B x:C&P ` L R1319⑤groove">
X$S C g8Q(S.q1319⑥中国易客网 r0o9k%l/d i1T N
⑦
"]6C [%x!z G C1319⑧中国易客网 Z'i e ?1O&F%y1J Q

a#p t-b i A u1z1319三、加CSS滤镜
h \ O }-[ P$Z13191、无参数滤镜
a {8d t,H/F T7w+T'J*f |1319①黑白中国易客网 v p+R _+i
中国易客网)L H _ }9E d
②底片中国易客网 V)a t[2Q X

q t9] w ? H-k,I g5O1319③X光片
6K6|*`/f U m&~1319
X k Q F A#m z1319④水平翻转
| ? W-Y o%I+O/O ] N U(V1319中国易客网(S%a m o6S:z0b
⑤垂直翻转中国易客网 w z"n C P0R/V |
中国易客网$u"E ` `%q k f E c
2、透明效果（opacity=100 透明度0—100）
%D { b;u B/Q1319①
'W%k,\)p F X `,? a q ?1319②中国易客网:w C7^ c s O
③
O7} z s S1319④中国易客网 ?%c,q u$e T4s2]!Z&R
3、其他特效
7| v)\ o b4q1319①浮雕中国易客网)x N E2g @ w%x/Y
中国易客网4X A6Q } d3M E a
②波纹
_(j t ]:I K1319
{ y E#\#`$R4} c7m1319
-z T9c4l y1319（Add=是否打乱1或0；Freq=频率；LightStrength=光效强度；Phase=偏移量；Strength=振幅）中国易客网2W p:U0]![!H u i:J | i
③模糊
O.Z j x W7wH X A a1319
e m C!y U X,X x _1319
R ^ | @)L1319（Add=是否模糊1或0；Direction=方向；Strength=强度）中国易客网 \;k i$\,q'} C8zD
④发光
I({8I1@ M J1319中国易客网"J G P!g3K*M-v p l N
中国易客网*] b0S:h F
（Color=颜色；Strength=强度）中国易客网 V l f ~ N \3w
⑤阴影中国易客网2`!F5`/t F [!q
中国易客网,O J&O r-D

b T T8f S R Y1319（Color=颜色；Direction=方向；Strength=强度）中国易客网8T!r \"e c B+C
⑥投影
*~ T9W a'J.Y ]%n ~;V1319中国易客网4y F;W3u _ B h/j

+r s%s a d N)R \ S c1319（Color=颜色；offx=横向位移；offy=纵向位移；Positive=非透明或透明像素建立可见投影1或0）
,X l7p r)y v v d1319镂空中国易客网 r*x.U r-K

+`;n s/n C j8p*P p1319中国易客网4R [ ? T0n
四、图片定位（align=right图片居右 hspace水平间距 vspace垂直间距）
3p R Q"k z r v h1319中国易客网 ]$I;m t2u ` J q(I8V'G
五、添加图片说明中国易客网7J)] T i @!L;j T
[查看PDF电子文档]

魔兽密技:CSS十大密技

362481347 — 2008-10-20
1.css 字体简写规则
当使用css定义字体时你可能会这样做：
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
事实上你可以简写这些属性：
font: 1em/1.5em bold italic small-caps verdana,serif
现在好多了吧，不过有一点要注意：使用这一简写方式你至少要指定font-size和font-family属性，其他的属性（如font-weight, font-style,font-varient）如未指定将自动使用默认值。

2.同时使用两个class
通常我们只为属性指定一个class,但这并不等于你只能指定一个，实际上，你想指定多少就可以指定多少，例如：

...

通过同时使用两个class（使用空格而不是逗号分割）,这个段落将同时应用两个class中制定的规则。如果两者中有任何规则重叠，那么后一个将获得实际的优先应用。

3.css中边框（border)的默认值
当编写一条边框的规则时，你通常会指定颜色、宽度以及样式（任何顺序均可）。例如：border: 3px solid #000（3像素宽的黑色实线边框），其实这个例子中唯一需要指定的值只是样式。假如你指定样式为实线（solid),那么其余的值将使用默认值：默认的宽度为中等（相当于3到4像素）；默认的颜色为边框里的文字颜色。如果这正是你想要的效果，你完全可以不在css里指定。

4.!important会被IE忽略
在css中，通常最后指定的规则会获得优先权。然而对除了IE以外的浏览器来说，任何后面标有!important的语句将获得绝对的优先权，例如：
margin-top: 3.5em !important; margin-top: 2em
除IE以外所有浏览器中的顶部边界都是3.5em，而IE为2em，有时候这一点很有用，尤其在使用相对边界值时（就像这个例子），可以显示出IE与其他浏览器的细微差别。
（很多人可能还注意到了css的子选择器也是会被IE忽略的）

5.图片替换的技巧
使用标准的html而不是图片来显示文字通常更为明智，除了加快下载还可以获得更好的可用性。但是如果你决心使用访问者的机器中可能没有的字体时，你只能选择图片。
举例来说，你想在每一页的顶部使用“Buy widgets”的标题，但你同时又希望这是能被搜索引擎发现的，为了美观你使用了少见的字体那么你就得用图片来显示了：

这样当然没错，但是有证据显示搜索引擎对真实文本的重视远超过alt文本（因为已经有太多网站使用alt文本充当关键字），因此，我们得用另一种方法：
Buy widgets
，那你的漂亮字体怎么办呢？下面的css可以帮上忙：
h1
{
background: url(widget-image.gif) no-repeat;
}

h1 span
{
position: absolute;
left:-2000px;
}
现在你既用上了漂亮的图片又很好的隐藏了真实文本——借助css，文本被定位于屏幕左侧-2000像素处。

6.css盒模型hack的另一选择
css盒模型hack被用来解决IE6之前的浏览器显示问题，IE6.0之前的版本会把某元素的边框值和填充值包含在宽度之内（而不是加在宽度值上）。例如，你可能会使用以下css来指定某个容器的尺寸：
#box
{
width: 100px;
border: 5px;
padding: 20px;
}
然后在html中应用：
...

盒的总宽度在几乎所有浏览器中为150像素（100像素宽度+两条5像素的边框+两个20像素的填充），唯独在IE6之前版本的浏览器中仍然为100像素（边框值和填充值包含在宽度值中），盒模型的hack正是为了解决这一问题，但是也会带来麻烦。更简单的办法如下：
css:
#box
{
width: 150px;
}

#box div {
border: 5px;
padding: 20px;
}
html:

...

这样一来在任何浏览器中盒的总宽度都将是150像素。

7.将块元素居中
假设你的网站使用了固定宽度的布局，所有的内容置于屏幕中央，可以使用以下的css：
#content
{
width: 700px;
margin: 0 auto;
}
你可以把html的body之内任何项目置于
中，该项目将自动获得相等的左右边界值从而保证了居中显示。不过，这在IE6之前版本的浏览器中仍然有问题，将不会居中，因此必须修改如下：
body
{
text-align: center;
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}
对body的设定将导致主体内容居中，但是连所有的文字也居中了，这恐怕不是你想要的效果，为此#content 的div还要指定一个值：text-align: left

8.使用css实现垂直居中
垂直居中对表格来说是小菜一碟，只需指定单元格为vertical-align: middle即可，但这在css布局中不管用。假设你将一个导航菜单的高度设为2em，然后在css中指定垂直对齐的规则，文字还是会被排到盒的顶部，根本没有什么区别。
要解决这一问题，只需将盒的行高设为与盒的高度相同即可，以这个例子来说，盒高2em,那么只需在css中再加入一条：line-height: 2em 就可实现垂直居中了！

9. 容器内的css定位
css的最大优点之一就是可以将对象定位在文档的任何位置，同样的也可以将对象在某容器内进行定位。只需要为该容器添加一条css规则：
#container
{
position: relative;
}
则容器内的任何元素的定位都是相对于该容器的。假定你使用以下html结构：

...

如果想将navigation定位在容器内离左边界30像素，离顶部5像素，可以使用以下css语句：
#navigation
{
position: absolute;
left: 30px;
top: 5px;
}

10.延伸至屏幕底部的背景色
css的缺点之一是缺乏垂直方向的控制，从而导致了一个表格布局不会遇到的问题。假设你在页面的左侧设定了一列用于放置网站的导航。页面为白色背景，但你希望导航所在的列为蓝色背景，使用以下css即可：
#navigation
{
background: blue;
width: 150px;
}
问题在于导航项不会一直延伸到页面的底部，自然它的背景色也不会延伸到底部。于是左列的蓝色背景在页面上被半路截断，浪费了你的一番设计。怎么办呢？很不幸我们现在只能用欺骗的办法，即将body的背景指定为与左列同颜色同宽度的图片，css如下：
body
{
background: url(blue-image.gif) 0 0 repeat-y;
}
背景图应为宽150像素的蓝色图片。这一办法的缺点是没法使用em来指定左列的宽度，当用户改变文字的大小导致内容的宽度扩张时，背景色的宽度不会随之改变。
到写这篇文章为止这是对这类问题的唯一解决办法，因此你只能为左列使用像素值来获得能够自动延伸的不同的背景色。 [查看PDF电子文档]

divcss:css

24248211 — 2008-10-20
基本语法规范
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。 1. 基本语法规范分析一个典型CSS的语句： p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；样式声明写在一对大括号"{}"中； COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； "#FF0000"和"#FFFFFF"是属性的值(value)。 2. 颜色值颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。 3. 定义字体 web标准推荐如下字体定义方法： body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； Lucida Grande字体适合Mac OS X； Verdana字体适合所有的Windows系统； Lucida适合UNIX用户 "宋体"适合中文简体用户; 如果所列出的字体都不能用，则默认的sans-serif字体能保证调用; 4. 群选择器当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; } 5. 派生选择器可以使用派生选择器给一个元素里的子元素定义样式，例如这样： li strong { font-style : italic; font-weight : normal；} 就是给li下面的子元素strong定义一个斜体不加粗的样式。 6.id 选择器用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
然后在样式表里这样定义： #menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 其中"menubar"是你自己定义的id名称。注意在前面加"#"号。 id选择器也同样支持派生，例如： #menubar p { text-align : right; margin-top : 10px; } 这个方法主要用来定义层和那些比较复杂，有多个派生的元素。 6. 类别选择器在CSS里用一个点开头表示类别选择器定义，例如： .14px {color : #f60 ;font-size:14px ;} 在页面中，用class="类别名"的方法调用： 14px大小的字体这个方法比较简单灵活，可以随时根据页面需要新建和删除。 7. 定义链接的样式 CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如： a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 [查看PDF电子文档]

divcss:Css+div之css

106236818 — 2008-10-20
[ft=,3,]在[ft=,,Times]HTML 内插入样式表
[ft=,3,][ft=,,Times]1 内联式样式表：直接写在现有的ＨＴＭＬ标签中，　如：[ft=,,Times]
red

[ft=,3,][ft=,,Times]2 嵌入式样式表：使用[ft=,,Times] 嵌入ＨＴＭＬ的头部
[ft=,3,]３[ft=,,Times](*) 外部式样式表：以〔[ft=,,Times].css 〕为扩展名，在[ft=,,Times] （不是在[ft=,,Times]
在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。

8、如何给部分文字加背景图像？
与加背景色操作类似，中是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的：

在要用时选取那段文字，再在CSS面板上点一下“imgbgstyle”就行了。

9、如何使页面的背景在文字“滚动”时背景图案静止不动？
要使背景图案不随文字“滚动”的CSS是这样的：

10、如何定义字间距？
在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就
是字间距，它指的是每一个字符之间的额外间距，经长度为单位，正负值均可，当取负值时产生字符挤在一起的效果。下
面代码是一个定义好的字间距CSS例子：

11、如何给文字加上划线、下划线、删除线和闪烁？
在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些
内容，要注意的是闪烁属性有些版本的浏览器不支持，少用为好。下面是一个定义好上述效果的CSS例子：

其中： “underline”是定义下划线；“overline ”是定义上划线；“ line-through”定义的是删除线；“blink”
定义的是文字闪烁。

12、如何使网页具有“首行缩进”功能？
由于DW3输入空格不方便，利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框（style Definition
for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉
字，设置好的CSS如下所示：

在DW3要注意：在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“text-indent”右
面的缩进单位选择框中“ems”指的就是“em”。

13、在用表格进行排版时，能使某一方向上的内容离开表格线一点吗？
可以！在DW3中CSS的属性定义对话框（style Definition for .style1)的“Box”上的“margin”定义的就是内容离开边缘的距离，分别可定义四个方向：“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例子代码：

14、能给某部分内容加边框吗？
用CSS可以给某部分内容加边框，在DW3中CSS的属性定义对话框（style Definition for .style1)的“Border”定义的就是边框线，“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色，这些定义好后不要忘记在下面的“style”中定义线型，否则将看不边框线，因为默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框为：绿色中粗线的CSS例子：

2007年12月21日新闻标题01

2007年12月21日新闻标题02

2007年12月21日新闻标题03

2007年12月21日新闻标题04

注意:span一定要放在前面,反之会产 [查看PDF电子文档]

校内css教程:校内网--css教程篇（３）

821307474 — 2008-10-20
b、自定义内容
自定义内容多指一些放在涂鸦板内的文字，图片等，当然，我们也可以通过绝对定位使其定位到页面任意位置。

这里面的对象属性修改起来比较灵活，因为在这里我们不仅可以用css来定义，也可以使用html来定义，比如下面的代码
我是文字
这就是用html语法来定义的文字属性，而下面的代码

我是文字

就是用css来定义的，也可以两种结合着用

我是文字

如果想用html来定义对象，而用css来修改其属性，就上面例子而言，可以这样做

我是文字

当然，在大多数情况我不用上面这种形式，怎么方便，怎么写代码比较精简就怎么写即可。

　　　　三、相关知识及技巧

1、如何写外部样式表文件
内部样式代码如下

如果想把它写到外部样式文件内，然后用第一种方式链入，去掉代码前后的标识符，保留中间的功能代码即可
A:link{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书}
A:visited{COLOR:#999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书}
A:active{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书}
A:hover{COLOR: #999999}
body{COLOR:#999999;FONT-SIZE:9pt; FONT-WEIGHT: bolder;FONT-FAMILY:隶书}

2、读代码
看完这篇攻略，也许你还不会去写代码，因为那需要经验的积累的，但是我希望你至少能做到会读，很多经验都是由别人那里借鉴来的，下面说一下读代码的方法吧。

随便找个代码

通过以上的讲解，我们知道 < STYLE> 标记中包括了 TYPE ＝ "text/css" ，这是让浏览器知道你是使用 CSS 样式规则。加入 < !-- 和 --> 这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该部分代码忽略不计。所以这些都是标记，我们可以不理会，而#userAlbum{display:none;}是功能代码，我们先看一下#userAlbum，“#”告诉我们，这个html标识符在源文件里是一个id，那么我们可以在源文件里搜索一下，可以找到
，看一下它后面的内容，我们知道这是相册部分，而display:none;实现的功能就是把相册部分隐藏。

接下来我们就可以举一反三，尝试着去写了，既然相册的隐藏代码是这个，那么与处于同一级的日志部分我们就可以参照着写出来了，在源文件里搜索一下“××的日志”，可以找到它上面的一行代码
，那么隐藏日志的代码就可以这么写

3、关于标记
html和css是弱标记性语言（可能说法不是很准确，以前在书上看过这方面的术语，记不清了），简单说就是它是大小写不敏感的，结束标识符也不是强制要求的，举个例子

这行代码，代用下面几种方式写都是可用的

这样浏览器在执行时，就明白：
a:link 指正常的未被访问过的链接
a:active 指正在点击的链接
a:visited 指已经访问过的链接
其中，text-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线，换成overline则给超连文字加上划线，换成 line-through给超连文字加上删除线，blink则使文字在闪烁。

★★类似的控制：使粗体文字加上删除线。
例子2：闪烁的粗体文字使用的代码是：B { text-decoration: line-through }
类似的控制：是粗体文字中所有的字母大写。
使用代码： B { text-transform: uppercase }
例子3：产生既大写，又有颜色，又有删除线的效果 hello welcome and enjoy them !

以上的代码是：b { text-decoration: line-through; text-transform: uppercase; color: #66FFFF}
类似的，用lowercase使所有字母小写显示，capitalize 使每个单词的首字母大写显示。

下面则是产生连接变色效果的内容：
在上面的“例子1”中，如果作一点修饰，可以使具有link,active,visited属性的连接显示不同的颜色，但是却不会产生鼠标覆盖变色效果。先看下面的代码，使连接文字显示绿色，正在点击的连接显示黄色，已经反复问过的连接显示红色。算是复习前面的内容（别忘记啊！）：

如果要产生变色效果，就要用到另一个属性了,这就是 hover，看下面的代码。
a:hover { text-decoration: none ; color: yellow } 表示鼠标移动到连接文字上时，文字修饰风格为“无”（即没有下划线），同时显示黄色。
a:hover { text-decoration: underline; color: green } 表示鼠标移动到连接文字上时，文字修饰风格为“underline”（即下划线），同时显示绿色。
扩展一下：如果我们同时用下面2种属性，会产生什么效果呢？

a:link { text-decoration: none ; color: yelloe ; font-size: 9pt }
a:hover { text-decoration: underline; color: green ; font-size: 12pt }
连接文字没有下划线，黄色显示，9pt大小。鼠标移动到连接上时出现下划线，颜色为绿色，字符大小12pt。是不是变色了？而且字体由于大小变化，就有动感了，似乎一下子扩大了。
总之，所有前面讲过的方法，要综合运用才可以呀。
注意：并不是所有的浏览器都支持所有的选项属性。自己在多个浏览器上测试一下。 [查看PDF电子文档]

Css教程

CSS写的鼠标悬停

css下拉菜单效果

DROP DOWN FUN

NO JAVASCRIPT

JUST CSS!!!

NOW WITH CASCADE

符合WEB标准的竖型下拉菜单

完全用CSS实现的中英文双语导航菜单

divcss:css div环绕

css圆角表格:html+css做圆角表格

图片翻转效果:翻转图片菜单效果

css隐藏文字:用css实现文字的自动隐藏

字体css切换:css切换 网页变脸

横向下拉:一个横向下拉菜单的教程

divcss布局:Div 布局 实现侧栏的显隐

组合数学的应用:CLASS组合应用

css入门例子:样式覆盖

css选择器:CSS 动态显示等级选择器

css滤镜效果:css滤镜

css滤镜:CSS滤镜应用技巧

png背景透明:png ie下背景透明

ip地址代码:代码地址

IE与firefox VS js与css兼容...

ASP基础教程：Are you ready?

魔兽秘籍:博客秘籍

博客经典留言:引用 制作博客经典秘籍

艺术字制作:巧用CSS制作艺术字

web文档:WEB开发帮组文档集合

图像格式与大小:[转]常用Web图像格式简...

html图片代码:【Html】图片相关代码

html图片代码:在HTML放置图片的代码

魔兽密技:CSS十大密技

Buy widgets

divcss:css

divcss:Css+div之css

校内css教程:校内网--css教程篇（３）

字体css切换:css切换网页变脸

divcss布局:Div 布局实现侧栏的显隐

博客经典留言:引用制作博客经典秘籍