HTML5 CSS3专题 纯CSS打造相册效果

当前位置 : 首页 > 网页制作 > CSS > HTML5 CSS3专题 纯CSS打造相册效果

HTML5 CSS3专题 纯CSS打造相册效果

来源: 作者: 时间:2016-01-23 10:51
今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下。效果图:效果是不是还是很不错的,

 

今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下。

效果图:

\

效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点。

先看html文件:

 




简单描述一下:

 

1、ul 中 li决定了照片的个数

2、ul使用样式float:right,width:140px;使得显示在相册的右侧区域

3、li的float:left,使得li可以左浮动;li中存放大图的div,position为absolute会根据div#gallary进行定位,默认只有第一个显示

4、当鼠标移动到li上时,改变li span img的透明度和li div的display将大图显示

 

接下来就是css文件:

 


css中没有什么复杂的样式,就不做描述了。此外html中我引入了一个重置样式的css , reset.css ,大家也可以使用自己习惯的重置样式:

 

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend{
	margin: 0;
	padding: 0;
	font-size: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	}
	
ol, ul {
	list-style: none;
	}

blockquote, q {
	quotes: none;
	}

:focus {
	outline: 0;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
	}


 

点击下载

Tag:
网友评论

<