精通CSS+DIV基础总结(二)_html/css_WEB-ITnose

    
	
年度收入 2004 - 2007
	
		
		
2004
		
2005
		
2006
		
2007
	
	
		
拨款
		
11,980
		
12,650
		
9,700
		
10,600
	
	
		
捐款
		
4,780
		
4,989
		
6,700
		
6,590
	
	
		
投资
		
8,000
		
8,100
		
8,760
		
8,490
	
	
		
募捐
		
3,200
		
3,120
		
3,700
		
4,210
	
	
		
销售
		
28,400
		
27,100
		
27,950
		
29,050
	
	
		
杂费
		
2,100
		
1,900
		
1,300
		
1,760
	
	
		
总计
		
58,460
		
57,859
		
58,110
		
60,700
	

2，表单是我们提交个人信息的，也是网页经常出现的一条，我们通过一个常用表单的例子来学习：

效果如图：

三，下边我们看一下一些浏览器中的特殊元素：

1，超链接特效：对于一些超链接，鼠标放上去会变色，并且会改变鼠标的形状，CSS如何设置，看这个例子：

   
	
		
首页
		
心情日记
		
Free
		
一起走到
		
从明天起
		
纸飞机
		
下一站
	

效果图：

2，当有出现帮助按钮时，我们希望将鼠标形状变为与众不同的，就是有特效的，看这个例子：

   
	
首页导读推荐版面推荐文章收藏夹我的信箱休闲娱乐帮助

3，文本过多，需要设置滚动条，看这个例子的设置：

   .largetext {	scrollbar-3dlight-color: #B0C4DE;	scrollbar-arrow-color: #FFFFFF;	scrollbar-base-color: #8BA9CF;	scrollbar-darkshadow-color: #436DA3;	scrollbar-face-color: #34547E;	scrollbar-highlight-color: #E6ECF4;	scrollbar-shadow-color: #000000;}
CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。

效果图：

四,在制作使用菜单,我以百度的首页为例子,通过这个例子学习一下:

   




	
	
资 讯
	
网 页
	
贴 吧
	
知 道
	
MP3
	
图 片
	
更 多 >>
 
	
	
	
	
搜索帮助
高级搜索
	

效果图:

五,对于CSS的滤镜作用,主要是通过对一些图片设置一些滤镜效果,来更加符合我们的要求,先看一下有哪些功能:

下边为简单说明：

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="75",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

对于滤镜的功能是微软为增强浏览器的功能而特意开发的并整合到IE浏览器中的集合。只使用于IE浏览器中！所以有必要的话，还需要我们学习PS的使用。

综上为CSS+DIV总结的第二篇，也是我们在开发中经常使用的。这里我把上次我学习总结的与HTML为主的博客链接网页制作基础学习??HTML+CSS ，结合学习会更好。