“CSS设计彻底研究”随书光盘视频教程目录
CSS核心基础
第0课《CSS设计彻底研究》简介
第1课 CSS与(X)HTML核心基础（上）
第1课 CSS与(X)HTML核心基础（中）
第1课 CSS与(X)HTML核心基础（下）
第2课 CSS禅意花园介绍
深入CSS盒子模型
第3课 深入理解盒子模型（上）
第3课 深入理解盒子模型（下）
第4课 浮动与定位（上）
第4课 浮动与定位（下）
第5课 文字与图像（上）
第5课 文字与图像（下）
CSS导航设计
第6课 链接与导航
第7课 竖直菜单（上）
第7课 竖直菜单（下）
第8课 水平菜单
第9课 下拉菜单
CSS高级样式设计
第10课 表格也精彩
第11课 高级网页元素样式
第12课 圆角设计
CSS整体布局详解
第13课 固定宽度布局
第14课 不固定宽度布局（上）
第14课 不固定宽度布局（下）
第15课 综合布局实践
在线观看地址： http://learning.artech.cn/20070430.css-reserch-content-table.html 前沿视频教室的，上面还有很多教程
CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
<div id="mContainer"></div>
<input class="btn" id="pauseBtn" onclick="doPause()" type="button" value="pause" />
建立一个层，设置id为mContainer，作为图片的容器层。
设置一个按钮来控制图片切换的暂停与继续。
我们看下面的CSS代码：
#mContainer {
width:225px
position:relative
height:168px
}
.mPhoto {
filter:Alpha(opacity=0)
left:0px
position:absolute
top:0px
moz-opacity:0.0
}
.btn {
border-right:#000 1px solid
border-top:#000 1px solid
margin-top:5px
font-size:9px
border-left:#000 1px solid
width:40px
border-bottom:#000 1px solid
font-family:verdana
}
这些代码我们都能看明白，需要指出的是类mPhoto的样式定义。
主要是应用了滤镜将图片的透明度设置为零，完全透明。
我们看下面的javascript脚本：
var currentPhoto = 0
var secondPhoto = 1
var currentOpacity = new Array()
var imageArray = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg")
var FADE_STEP = 2
var FADE_INTERVAL = 10
var pause = false
function init() {
currentOpacity[0]=99
for(i=1i<imageArray.lengthi++)currentOpacity[i]=0
mHTML=""
for(i=0i<imageArray.lengthi++)mHTML+="<div id=\"photo\" name=\"photo\" class=\"mPhoto\"><img src=\"" + imageArray[i] +"\"></div>"
document.getElementById("mContainer").innerHTML = mHTML
if(document.all) {
document.getElementsByName("photo")[currentPhoto].style.filter="alpha(opacity=100)"
} else {
document.getElementsByName("photo")[currentPhoto].style.MozOpacity = .99
}
mInterval = setInterval("crossFade()",FADE_INTERVAL)
}
function crossFade() {
if(pause)return
currentOpacity[currentPhoto]-=FADE_STEP
currentOpacity[secondPhoto] += FADE_STEP
if(document.all) {
document.getElementsByName("photo")[currentPhoto].style.filter = "alpha(opacity=" + currentOpacity[currentPhoto] + ")"
document.getElementsByName("photo")[secondPhoto].style.filter = "alpha(opacity=" + currentOpacity[secondPhoto] + ")"
} else {
document.getElementsByName("photo")[currentPhoto].style.MozOpacity = currentOpacity[currentPhoto]/100
document.getElementsByName("photo")[secondPhoto].style.MozOpacity =currentOpacity[secondPhoto]/100
}
if(currentOpacity[secondPhoto]/100>=.98) {
currentPhoto = secondPhoto
secondPhoto++
if(secondPhoto == imageArray.length)secondPhoto=0
pause = true
xInterval = setTimeout("pause=false",2000)
}
}
function doPause() {
if(pause) {
pause = false
document.getElementById("pauseBtn").value = "pause"
filter:alpha(opacity=50)/*IE滤镜，透明度50%*/这种ie的是1-100,100就不透明了，opacity:0.5/*其他，透明度50%*/这种标准的，0-1,1就不透明了
