欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-10 08:50:11
...
上一篇我们已经总结了部分CSS+DIV相关知识,这篇我们接着总结,从下边几个方面学习一下:


一,我们看如何设置网页的背景,顾名思义背景可以通过颜色和图片来设置,下边我们看一下如何设置:

颜色的设置非常简单,就是background-color这个属性,看下边的这个例子:

利用背景颜色分块
精通CSS+DIV基础总结(二)_html/css_WEB-ITnose


首页

分类讨论

谈天说地

精华区

我的信箱

休闲娱乐

立即注册

离开本站
正文内容...


对于图片的设置,我们可以通过属性background-image来设置,当然我们还可以设置他的位置,重复次数等等,看这个例子:

   

背景水平重复
精通CSS+DIV基础总结(二)_html/css_WEB-ITnose


二,下边我们看表格与表单的制作,首先看一下表格的制作,主要是利用

,,
,
, 几个标签来,制作来说相对简单,当然加上CSS和javascript,XML,Ajax来说就非常复杂了。这里看下边简单制作的例子:
年度收入
年度收入 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如何设置,看这个例子:

动态超链接
精通CSS+DIV基础总结(二)_html/css_WEB-ITnose
首页 心情日记 Free 一起走到 从明天起 纸飞机 下一站


效果图:



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


鼠标变幻超链接


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

页面滚动条

CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过,并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础,提供了丰富的格式化功能,如字体、颜色、背景、整体排版等等,并且网页设计者可以针对各种可视化浏览器设置不同的样式风格,包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮,使用CSS设计的优秀页面层出不穷。


效果图:



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

百度??全球最大中文搜索引擎

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



搜索帮助
高级搜索


效果图:



五,对于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 ,结合学习会更好。

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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • 精通CSS+DIV基础总结(二)_html/css_WEB-ITnose
  • 专题推荐

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

    认证0级讲师

    推荐视频教程
  • 精通CSS+DIV基础总结(二)_html/css_WEB-ITnosejavascript初级视频教程
  • 精通CSS+DIV基础总结(二)_html/css_WEB-ITnosejquery 基础视频教程
  • 视频教程分类