效果图： 
效果是不是还是很不错的，最主要的是没有使用一行js，这才是亮点。
先看html文件：
简单描述一下：
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;
}
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
