CSS设计彻底研究 这本书的学习材料还有么

html-css022

CSS设计彻底研究 这本书的学习材料还有么,第1张

到电驴上面下载吧： http://www.verycd.com/topics/2741979/“CSS设计彻底研究”随书光盘视频教程+实例源码+教学PPT。

“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就不透明了