博文
网页变幻 - CSS/DIV布局专题讲解 - 第9课(2009-02-02 14:40:00)
摘要：相关推荐:http://www.114study.com/?ybtg=wuhuaitang
本节课时长13分01秒，下载文件15.4兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
在上一课的电子相册中用CSS控制实现了两种不同的相册模式，而本身的HTML结构却没有任何修改。本课将继续拓展这种思路，以网上常见的博客首页为例，用CSS实现更绚丽的网页变幻。同样保持页面的HTML不变，通过分别调用三个外部CSS文件，实现三个完全不同的页面效果，蓝色经典、清明上河图、交河古城，分别如图所示。
三个布局相当复杂的页面，看起来完全不同，而他们的HTML代码确实完全相同的，区别只在于使用了不同的CSS，从这个例子可以把CSS的优势体现的淋漓尽致了!
......
CSS排版 - CSS/DIV布局专题讲解 - 第8课(2009-02-02 14:39:00)
摘要：友情推荐:http://www.114study.com/?ybtg=wuhuaitang
本节课时长15分22秒，下载文件17.2兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
上一课中主要讲解了CSS对页面中各个元素的定位，本课在此基础上，从页面的整体排版出发，介绍CSS排版的观念和具体方法，包括CSS排版的整体思路、两种具体的排版结构、电子相册的几种版式制作，以及与传统表格排版方法的比较。
1．CSS排版观念
CSS的排版是一种很新的排版理念，完全有别于传统的排版习惯。它将页面首先在整体上进行 div 标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。通过CSS排版的页面，更新十分的容易，甚至是页面的拓扑结构，都可以通过修改CSS属性来重新定位。我们在这里主要介绍CSS排版的整体思路，为后续课程的进一步介绍打下基础。希望大家能够掌握以下几个方面的内容：
将页面用div分块
设计各块的位置
用CSS定位
2．固定宽度且居中的版式
宽度固定而且居中的版式是网络中最常见的排版方式之一，我们在这里利用CSS排版的方式制作这种通用的结构，并采用两种方法分别予以实现。
首先像上一节描述的一样，将所有页面内容用一个的大 div 包裹起来，指定该 div 的id为container，这个id在整个页面中是唯一的。虽然大部分浏览器并不限制重复id的使用，但非常不建议同一个页面中出现重复id，因为重复id会使得javascript等脚本语言在寻找对象时发生混乱。
3．左中右版式
将页面分割为左中右三块也是网上常见的一种排版模式，我们在这里以此结构为例巩固CSS排版的方法，页面结构如图所示。
4．块的背景色问题
在前面提到的页面左中右的结构，虽然在整体上将页面进行了排版，但细节处理仍然有不足之处。如果给#left、#middle、#right都设置背景颜色就会发现，仅仅按照上例中的设置，#left、#right的背景都没有延伸到页面的底端，而是仅仅覆盖了内容的部分。
这种背景颜色的问题在CSS排版中经常会遇到，我们在这里给出通用的解决办法，首先按照上节中最后一段代码的方式将中间三块放入一个父块#mainbox中，然后同样把页面中所有的块放入到一个大......
理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课(2009-02-02 14:33:00)
摘要：友情推荐:http://www.114study.com/?ybtg=wuhuaitang
本节课时长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......
CSS滤镜的应用 - CSS/DIV布局专题讲解 - 第6课(2009-02-02 14:29:00)
摘要：
友情推荐:http://www.114study.com/?ybtg=wuhuaitang
本节课时长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制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课(2009-02-01 15:56:00)
摘要：
本节课时长10分46秒，下载文件9.98兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
作为一个成功的网站，导航菜单是永远不可缺少的。导航菜单的样式风格往往也决定了整个网站的样式风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。本课围绕菜单的制作，介绍相关的项目列表、菜单变幻、导航栏等的内容。
1. 项目列表
传统的HTML语言提供了项目列表的基本功能，包括顺序式列表的 ol 标记，无顺序列表 ul 标记等等。当引入CSS后，项目列表被赋予了很多新的属性，甚至超越了最初设计时它的功能。我们在这里主要围绕项目列表的基本CSS属性进行相关介绍，包括项目列表的编号、缩进、位置等等。希望大家能够掌握以下几个方面的内容：
列表的符号
图片符号
2. 无需表格的菜单
当项目列表的项目符号可以通过list-style-type设置为none时，制作各式各样的菜单、导航条成了项目列表的最大用处之一，通过各种CSS属性变幻可以达到很多意想不到的导航效果。首先看一个实例，其效果如图所示。
3. 菜单的横竖转换
导航条不光是竖直排列，很多时候要求页面的菜单能够水平方向显示。通过CSS属性的控制，可以使项目列表的导航条轻松的实现横竖转换，该例效果如图所示。
4. 菜单实例一：百度导航条
打开搜索引擎百度的网站，可以看到logo下方的水平导航条。利用本课前面几节所介绍的内容和方法，便可以轻松实现该导航条。我们在这里便通过简单的制作，模拟该效果。
5. 菜单实例二：流行的Tab菜单
Tab风格的菜单导航一直受到广大网站的青睐，网上随处可见各式各样的Tab菜单，图中显示的就是一个Tab菜单。我们在这里通过对导航菜单CSS属性的进一步控制，实现Tab菜单的效果。
友情推荐：http://www.114study.com/?ybtg=wuhuaitang......
设置页面和浏览器的元素 - CSS/DIV布局专题 - 第4课(2009-02-01 15:55:00)
摘要：
本节课时长10分35秒，下载文件10.1兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
网页中除了上面课程提到的文字、图片、表格、表单等还有许多其它元素，例如超链接、鼠标、滚动条等等。这些元素无疑使得整个网络更加的丰富多采。本课主要介绍网页中这些元素的CSS效果，配合前面课程的内容，使得网页能更好的吸引用户。
1. 丰富的超链接特效
超链接是网页上最普通不过的元素，通过超链接能够实现页面的跳转、功能的激活等等，因此超链接也是与用户打交道最多的元素之一。我们在这里主要介绍超链接的各种效果，包括超链接的各种状态、伪属性、按钮特效等等。希望大家能够掌握以下几个方面的内容：
动态超链接
按钮式超链接
浮雕式超链接
2. 鼠标特效
通常在浏览网页时，用户看到的鼠标指针不外乎箭头、手形、以及I字形，而通常在Windows环境下实际看到的鼠标种类要比这个多得多。CSS弥补了HTML语言在这方面的不足，通过cursor属性可以设置各式各样的鼠标样式。希望大家能够掌握以下几个方面的内容：
CSS控制鼠标箭头
鼠标变幻的超链接
3. 页面滚动条
当页面的内容比较多，浏览器中的窗口或者子窗口在一屏内显示不完时，就会出现滚动条，供读者翻页。对于IE浏览器，可以单独设置滚动条的样式风格，从而使其更加配合网站的整体设计。我们在这里重点讲解滚动条的组成，以及相关的CSS属性。
相关推荐：http://www.114study.com/?ybtg=wuhuaitang......
设置表格与表单的样式 - CSS/DIV布局专题讲解 - 第3课(2009-01-31 17:11:00)
摘要：
本节课时长12分0秒，下载文件12.1兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
表格与表单是网页上最常见的元素，表格除了显示数据外，还常常被用来排版。而表单则作为与用户交互的窗口，时刻都扮演着信息获取和反馈的角色。本课围绕表格和表单介绍CSS设置其样式的方法，以及利用CSS实现各种特效的技巧。
1. 控制表格
表格作为传统的HTML元素，一直受到网页设计者们的青睐。使用表格来表示数据、制作调查表等在网络中屡见不鲜。同时因为表格框架的简单、明了，使用没有边框的表格来排版，也受到很多设计者的喜爱。我们在这里主要介绍CSS控制表格的方法，包括表格的颜色、标题、边框、背景等。希望大家能够掌握以下几个方面的内容：
表格中的标记
表格的颜色
表格的边框
2. 表格实例一：隔行变色
当表格的行列都很多、数据量很大的时候，单元格如果采用相同的背景色，用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色，使得奇数行和偶数行的背景颜色不一样，达到数据一目了然的目的。本例最终效果如图所示。
3. 表格实例二：鼠标经过时变色的表格
对于长时间审核大量数据、浏览表格的用户来说，即使是隔行变色的表格，阅读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色，就使得页面充满了生机，最大程度的减少用户疲倦。
4. 表格实例三：日历
日历是日常生活中必不可少的东西，而作为备忘录的日历在桌面、网络上都越来越流行。通过CSS设定表格的属性，可以很轻松的实现各种日历的效果。我们在这里通过简单的实例，进一步熟练CSS控制表格的各种方法。本例最终效果如图所示。
5. CSS与表单
表单是网页与用户交互所不可缺少的元素，传统的HTML中对表单元素的样式控制很少，仅仅局限于功能上的实现。我们在这里围绕CSS控制表单进行详细介绍，包括表单中各个元素的控制，与表格配合制作各种效果等等。希望大家能够掌握以下几个方面的内容：
表单中的元素
像文字一样的按钮
七彩的下拉菜单
6. 综合实例一：直接输入的Excel表格
作为公司、单位的各种年度报表，往往数据量都很大，如果也都像普通表单一样逐项填写，势必造成网页的冗长。而Excel表格在本地机器操作时一......
设置网页背景 - CSS/DIV布局专题讲解 - 第2课(2009-01-31 17:08:00)
摘要：
本节课时长12分36秒，下载文件14.2兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
任何一个网上的页面，它背景的颜色、基调往往是给用户的第一印象，因此在页面中控制背景通常是网站设计时一个很重要的步骤。本课在合理运用文字、图片等的基础上，重点介绍CSS控制背景颜色、图片等的方法。
1.背景颜色
256×256×256种RGB色彩组成了整个绚丽多姿的网络，任何一个页面都有它的背景色来突出其基调，微软的蓝色、Google的白色、世纪坛的墨绿、圣诞网站的火红等等都给人们留下很深刻的印象。我们在这里主要通过实例，介绍CSS设置页面背景颜色的方法。希望大家能够掌握以下两个方面的内容：
页面背景色
用背景色给页面分块
2.背景图片
不单单是各种颜色，网页背景同样也可以使用图片。通过CSS可以对背景图片进行很精确的控制，包括位置、重复方式等等。我们在这里围绕背景图片的使用，对CSS的编写方法作进一步介绍。希望大家能够掌握以下几个方面的内容：
页面的背景图
背景图的重复
背景图片的位置
固定背景图片
添加多个背景图片
背景样式综合设置
3. 背景综合一：我的个人主页
个人主页是网络上记录自己、展现自己的一种很好的形式，很多用户在网上都拥有自己的页面。个人主页可以作为宣传自己的方式，也可以用来写网络日记，汇总学习心得，记录每天生活的点点滴滴。
我们在这里通过制作几米风格的个人主页，进一步学习CSS控制网页背景在实际中的运用方法，本例的最终效果如图所示。
4. 背景综合二：古词《念奴娇 赤壁怀古》
通过添加各种标记，可以让页面拥有多个背景，如果运用得当还可以得到各种效果。我们在这里以古词为例，进一步巩固页面背景的使用方法。本例最终效果如图所示。
相关推荐：http://www.114study.com/?ybtg=wuhuaitang......
设置图片效果 - CSS/DIV专题讲解 - 第1课(2009-01-31 16:58:00)
摘要：
本节课时长11分23秒，下载文件16.3兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
在五彩缤纷的网络世界中，各种各样的图片组成了丰富多彩的页面，能够让人更直观的感受网页所要传达给用户的信息。本课介绍CSS设置图片风格样式的方法，包括图片的边框、对齐方式、图文混排等，并通过实例综合文字、图片的各种运用。
1.图片样式
作为单独的图片本身，它的很多属性可以直接在HTML中进行调整，但是通过CSS统一管理，不但可以更加精确的调整图片的各种属性，还可以实现很多特殊的效果。我们在这里主要讲解CSS设置图片基本属性的方法，为进一步深入探讨打下基础。希望大家能够掌握以下两个方面的内容：
图片边框
图片缩放
2.图片的对齐
当图片与文字同时出现在页面上的时候，图片的对齐方式就显得尤其的重要。如何能够合理的将图片对齐到理想的位置，成为页面是否整体协调、统一的重要因素。我们在这里从图片水平对齐和竖直对齐两方面出发，分别介绍CSS设置图片对齐方式的方法。希望大家能够掌握以下两个方面的内容：
横向对齐方式
纵向对齐方式
3.图文混排
Word中文字与图片有很多排版的方式，在网页中同样可以通过CSS设置实现各种图文混排的效果。我们在这里在上一课文字排版和上几节图片对齐等的基础上，介绍CSS图文混排的具体方法。希望大家能够掌握以下两个方面的内容：
文字环绕
设置图片与文字间距
4.图文混排实例：八仙过海
我们在这里通过具体实例，进一步巩固图文混排的方法，并运用到实际的网站制作中。该例以介绍中国传统的八仙为题材，充分利用CSS图文混排的方法，实现页面的效果。本例最终效果如图所示。
相关推荐：http://www.114study.com/?ybtg=wuhuaitang......
设置丰富的文字效果 - CSS基本知识 - 第3课(2009-01-21 21:23:00)
摘要：
本节课时长13分58秒，下载文件14.0兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
文字是网页设计种永远不可缺少的元素，各种各样的文字效果遍布在整个英特网中。本课从基础的文字设置出发，详细讲解CSS设置各种文字效果的方法，然后再进一步讲解段落排版的相关内容。
CSS文字样式
使用过Word编辑文档的用户一定对会注意到，Word可以对文字的字体、大小、颜色等各种属性进行设置。CSS同样可以对HTML页面中的文字进行全方位的设置。我们在这里在上两章的基础上主要介绍CSS设置文字各种属性的基本方法。希望大家能够掌握以下几个方面的内容：
字体
文字大小
文字颜色
文字粗细
斜体
文字的下划线、顶划线、删除线
英文字母大小写
文字实例一：模拟Google公司logo
前面对CSS设置文字的各种单独效果进行了详细的介绍，我们在这里通过一个简单的实例，将各种效果综合运用，达到基本模拟Google公司logo的效果。
文字实例二：制作页面的五彩标题
对于任何文章，标题的作用是显而易见的。在页面中标题的设计往往也决定着整个页面的风格样式。我们在这里以CSS设计标题为例，进一步介绍CSS在控制文字时的各种方法和技巧。对于我们在这里中使用的一些CSS属性，前面课程可能还没有涉及，读者不必深究，在以后的课程都将详细介绍。
CSS段落文字
段落是由一个个文字组合而成的，同样是网页中最最重要的组成部分，因此前面提到的文字属性，对于段落同样适用。但CSS针对段落也提供了很多样式属性，我们在这里将通过实例进行详细介绍。希望大家能够掌握以下几个方面的内容：
段落的水平对齐方式
段落的垂直对齐方式
行间距和字间距
首字放大
段落实例：百度搜索
搜索引擎一直都是在网上冲浪必不可少的工具，而搜索引擎在显示搜索结果时如何能让用户一目了然的找到关键字，是每一个搜索网站在排版时都必须认真对待的，而各种搜索结果恰恰都只是文字段落为主。作为国内搜索引擎霸主之一的百度一直保持着友好的用户界面。我们在这里通过具体实例，模拟Baidu搜索的显示结果，进一步巩固CSS文字、段落的排版方法。
友情推荐：http://www.114study.c......