分类“CSS/DIV布局专题讲解”的存档

«上一页 | 共 2 页: « 1 [2]

CSS滤镜的应用 - CSS/DIV布局专题讲解 - 第6课

2007年06月11日 星期一

本节课时长11分38秒,下载文件9.47兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载

CSS滤镜并不是浏览器的插件,也不符合CSS标准,而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。由于浏览器IE有着很广的使用范围,因此CSS滤镜也被广大设计者所喜爱。本课主要介绍CSS各个滤镜的使用方法,包括定义滤镜、加载滤镜、实例解析等等。

CSS滤镜的标识符是“filter”,总体上跟其它CSS语句一样,都十分简单,进行滤镜操作必须先定义filter,filtername是滤镜属性名,包括alpha、blur、chroma等多种属性,parameters是表示各个滤镜属性的参数,也正是这些参数决定了滤镜将以怎样的效果显示。
滤镜分基本滤镜和高级滤镜两种,基本滤镜通常指可以直接作用在对象上,便能立即生效的滤镜,主要有以下几种:

1. Alpha 通道
2. 模糊效果(Blur)
2. 移动模糊(Motion Blur)
3. 透明色(Chroma)
4. 下落阴影(Drop Shadow)
5. 对称变换(Flip)
6. 光晕(Glow)
7. 灰度(Grayscale)
8. 反色(Invert)
9. 遮罩(Mask)
10. 阴影(Shadow)
11. X光效果(X-ray)
12. 浮雕(Emboss、Engrave)
13. 波浪(Wave)

高级滤镜指需要配合javascript等脚本语言,能产生更多变幻效果的滤镜,主要包括BlendTrans(渐隐变换)、RevealTrans(变换)、Light(灯光)等。本课主要介绍CSS的基本滤镜,高级滤镜将在“CSS与Javascript的综合应用”一课中继续介绍。

理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课

2007年06月12日 星期二

本节课时长14分17秒,下载文件11.7兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载

在网页设计时,能否控制好各个模块在页面中的位置是非常关键的。在前面的课程中,已经对CSS的基本使用有了一定的了解。本课在此基础上对CSS定位作详细的介绍,并介绍重要的div标记,讲解利用CSS + div对页面元素进行定位的方法,并分析CSS排版中的盒子模型以及二维三维定位等。

1.div标记与span标记

在使用CSS排版的页面中, div 与 span 是两个常用的标记。利用这两个标记,加上CSS对其样式的控制,可以很方便的实现各种效果。我们在这里从二者的基本概念出发,介绍这两个标记的用法与区别。希望大家能够掌握以下几个方面的内容:

  • div与span的概念
  • div与span的区别

2.盒子模型

盒子模型是CSS控制页面时一个很重要的概念。只有很好的掌握了盒子模型以及其中每个元素的用法,才能真正的控制页面中各元素的位置。我们在这里主要介绍盒子模型的基本概念,并讲解CSS定位的基本方法。

所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说,可以通过调整盒子的边框、距离等参数,来调节盒子的位置。

一个盒子模型由content(内容)、border(边框)、padding(间隙)、margin(间隔)这四部分组成,如图所示。

一个盒子的实际宽度(或高度)是由content + padding + border + margin组成的。在CSS中可以通过设定width和height的值来控制content的大小,并且对于任何一个盒子,都可以分别设定4条边各自的border、padding、margin。因此只要利用好盒子的这些属性,就能够实现各种各样的排版效果。

3.元素的定位

网页中各种元素都必须有自己合理的位置,从而搭建出整个页面的结构。我们在这里围绕CSS定位的几种原理方法,进行深入的介绍,包括position、float、z-index等。需要说明的是,这里的定位不是用 table 进行排版,而是CSS的方法对页面中块元素的定位。希望大家能够掌握以下几个方面的内容:

  • float定位
  • position定位
  • z-index空间位置

[点击这里查看本文全文……]

CSS排版 - CSS/DIV布局专题讲解 - 第8课

2007年06月13日 星期三

本节课时长15分22秒,下载文件17.2兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载

上一课中主要讲解了CSS对页面中各个元素的定位,本课在此基础上,从页面的整体排版出发,介绍CSS排版的观念和具体方法,包括CSS排版的整体思路、两种具体的排版结构、电子相册的几种版式制作,以及与传统表格排版方法的比较。

1.CSS排版观念

CSS的排版是一种很新的排版理念,完全有别于传统的排版习惯。它将页面首先在整体上进行 div 标记的分块,然后对各个块进行CSS定位,最后再在各个块中添加相应的内容。通过CSS排版的页面,更新十分的容易,甚至是页面的拓扑结构,都可以通过修改CSS属性来重新定位。我们在这里主要介绍CSS排版的整体思路,为后续课程的进一步介绍打下基础。希望大家能够掌握以下几个方面的内容:

  • 将页面用div分块
  • 设计各块的位置
  • 用CSS定位

[点击这里查看本文全文……]

网页变幻 - CSS/DIV布局专题讲解 - 第9课

2007年06月14日 星期四

本节课时长13分01秒,下载文件15.4兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载

在上一课的电子相册中用CSS控制实现了两种不同的相册模式,而本身的HTML结构却没有任何修改。本课将继续拓展这种思路,以网上常见的博客首页为例,用CSS实现更绚丽的网页变幻。同样保持页面的HTML不变,通过分别调用三个外部CSS文件,实现三个完全不同的页面效果,蓝色经典、清明上河图、交河古城,分别如图所示。

三个布局相当复杂的页面,看起来完全不同,而他们的HTML代码确实完全相同的,区别只在于使用了不同的CSS,从这个例子可以把CSS的优势体现的淋漓尽致了!

«上一页 | 共 2 页: « 1 [2]