LYM -- 放浪形骸，踏歌雾霭；君心可晴，且歌且行

《Java Web开发实战1200例》实用案例之第三章HTML/CSS技术

1 前言

这一章主要要介绍了HTML/CSS技术，包括页面效果、表格样式、鼠标样式、文字及列表样式、文字特效和图片滤镜特效。其中页面效果中的三个案例觉得还是有点实用的，至于后面几个方面的内容，稍微归纳一下。

表格样式主要讲述了CSS边框属性border；通过两个鼠标事件（onMouseOver和onMouseOut）改变style属性来实现改变边框颜色；实用JavaScript中提供的setTimeOut()方法实现表格外边框的霓虹灯效果；通过CSS样式的progid滤镜实现背景颜色渐变；使用JavaScript的split()方法实现表格的隔行变色（stringObj.split(str)[rowIndex]）和隔列变色（stringObj.split(str)[cellIndex]）；设置表格<td>中的title属性来实现鼠标经过表格的提示信息。

鼠标样式主要介绍了cursor属性来实现不同的鼠标形状以及在CSS样式中设置cursor的url属性实现动画光标（动态光标是一个.ani文件）。

文字及列表样式介绍了CSS中的text-decoration属性；在页面中使用<rt>和<ruby>标签实现在文字上方标注说明标记；使用段落标签<p>中的first-line和first-letter属性；使用CSS中<ul>的list-style-image属性实现指定图标列表。

文字特效和图片滤镜特效主要介绍了CSS样式中的glow滤镜、dropshadow滤镜、shadow滤镜、light滤镜等的用法。

2 网页换肤

在实现网页换肤时，如果需要在换肤后保持网页的风格，即使关闭浏览器也不会消失，这就需要将每次执行所调用的CSS样式文件的路径信息保存到客户端的Cookie中。实现换肤的几个步骤

1）编写不同风格的CSS样式文件；

2）在需要的页面中引用其中一个CSS样式文件作为网页默认的样式；

<link id="myCss" href="orange.css" rel="stylesheet">

3）在<script>标签中编写保存cookie信息的方法，用于将CSS样式文件的路径信息保存到客户端Cookie文件中；

function writeCookie(csspath) {
	var today = new Date();
	var expires = new Date();
	expires.setTime(today.getTime() + 1000*60*60*24*30);	//有效期为30天
	var str = "cssPath=" + csspath + ";expires=" + expires.toGMTString() + ";"；
	document.cookie=str;
}

4）编写读取cookie信息的方法；

function readCookie(cookieName) {
	var search = cookieName + "=";
	if(document.cookie.length > 0) {
		offset = document.cookie.indexOf(search);
		if(offset != -1) {
			offset += search.length;
			end = document.cookie.indexOf(";", offset);
			if(end != -1) {
				end = document.cookie.length;
				return unescape(document.cookie.substring(offset, end));
			}
		}
	}
}

5）编写超链接的onClick事件调用的方法；

function change(type) {
	if(type == "orange") {
		document.getElementById("myCss").href="orange.css";
		writeCookie("orange.css")
	}
	if(type == "gray") {
		document.getElementById("myCss").href="gray.css";
		writeCookie("gray.css")
	}
}

6）在页面中超链接代码。

<a href="#" onClick="change('orange')">橘色经典</a>
<a href="#" onClick="change('gray')">灰色畅想</a>

3 滚动文字

实现滚动文字的特效，主要在页面中应用<marquee>标签。通过该标签的属性可以实现不同的滚动效果，其中最常用的属性是direction(滚动的方向)、behavior(滚动的方式)、scrollamount(滚动的速度)。

比如下面的代码：

<marquee direction="left">
	滚动中......
</marquee>

效果如下： 滚动中......

4 CSS控制绝对定位

在CSS中提供了灵活的定位方法，常用的定位属性包括position、left、top、width、height等，其中position属性就是实现绝对定位的关键属性，它采用了3中定位方式，包括绝对定位（absolute）、相对定位（relative）和静态定位（static）。CSS代码如下：

#top_Div {
	position: absolute;		/*绝对定位*/
	left: 20px;				/*距离左侧页面20px*/
	top: 10px;				/*距离顶部页面10px*/
}
#bottom_Div {
	position: absolute;		/*绝对定位*/
	left: 130px;			/*距离左侧页面130px*/
	top: 10px;				/*距离顶部页面10px*/
}

Copyright ©2013-2015 LYM Power by Github. Base on Jekyll-Bootstrap.