纯CSS3打造相册效果,感觉还不错,这里与大家分享下,最主要的是没有使用一行js,这才是亮点
今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下。
效果图:
效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点。
先看html文件:
代码如下:
立即学习“前端免费学习笔记(深入)”;
艺帆集团公司企业网站源码基于艺帆企业cms制作,全站div+css 制作;它包含了单页设置、单页分类设置、新闻、产品、下载、在线招聘、在线留言、幻灯管理、友情链接管理和数据库备份等功能。 DIV+CSS布局优势一.精简代码,减少重构难度。网站使用DIV+CSS布局使代码很是精简,相信大多朋友也都略有所闻,css文件可以在网站的任意一个页面进行调用,而若是使用table表格修改部分页面却是显得很麻烦
纯CSS3相册效果
-
@@##@@
@@##@@
-
@@##@@
@@##@@
-
@@##@@
@@##@@
-
@@##@@
@@##@@
-
@@##@@
@@##@@
简单描述一下:
1、ul 中 li决定了照片的个数
2、ul使用样式float:right,width:140px;使得显示在相册的右侧区域
3、li的float:left,使得li可以左浮动;li中存放大图的p,position为absolute会根据p#gallary进行定位,默认只有第一个显示
4、当鼠标移动到li上时,改变li span img的透明度和li p的display将大图显示
接下来就是css文件:
代码如下:
立即学习“前端免费学习笔记(深入)”;
css中没有什么复杂的样式,就不做描述了。此外html中我引入了一个重置样式的css , reset.css ,大家也可以使用自己习惯的重置样式:
代码如下:
立即学习“前端免费学习笔记(深入)”;
html, body, p, 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; }【相关推荐】
1. Html5免费视频教程
4. :right0
5. :right1









