16.css

文件是《精通Javascript+jQuery》的书中实例

body{
	margin:0.8em;
	padding:0px;
}
div.thumb{
	float:left;						/* 向左浮动 */
	height:160px; width:160px;		/* 每幅图片块的大小 */
	margin:6px;
	padding:0px;
}
div.thumb img{
	border:1px solid #82c3ff;
}
div.ls{
	background:url(framels.jpg) no-repeat center;	/* 水平图片的背景 */
}
div.pt{
	background:url(framept.jpg) no-repeat center;	/* 竖直图片的背景 */
}
div.ls img{											/* 水平图片 */
	margin:0px;
	height:90px; width:135px;
}
div.pt img{											/* 竖直图片 */
	margin:0px;
	height:135px; width:90px;
}
div.ls a{
	display:block;					/* 定义为块元素 */
	padding:34px 14px 36px 11px;	/* 将超链接区域扩大到整个背景块 */
}
div.pt a{
	display:block;
	padding:11px 36px 14px 34px;	/* 将超链接区域扩大到整个背景块 */
}
div.ls a:hover{						/* 鼠标经过时修改背景图片 */
	background:url(framels_hover.jpg) no-repeat center;
}
div.pt a:hover{
	background:url(framept_hover.jpg) no-repeat center;
}

#showPhoto{
	position:absolute;
	width:620px; height:570px;
	z-index:200;
}
#showPhoto img#close{
	position:absolute;
	right:10px; top:10px;
	cursor:pointer;
	z-index:2;
}
#showPic{
	width:454px; height:454px;	/* 正方形的块 */
	position:absolute;
	left:81px; top:40px;
	text-align:center;
	vertical-align:middle;
}
#bgblack{
	width:620px; height:570px;
	position:absolute;
	left:0px; top:0px;
	background:#000000;
	z-index:-1;
}
#showPic img{
	padding:1px; border:1px solid #FFFFFF;
	z-index:1; position:relative;
}
#navigator{
	position:absolute;
	z-index:3; color:#FFFFFF;
	cursor:pointer;
	bottom:40px; left:225px;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
#navigator span{
	padding:20px;
}