H5和CSS3制作一个相册的代码实例

代码如下:

body>
     p id="gallery">
     h1>
    纯CSS3相册效果/h1>
     ul>
     li>
     span class="touch">
    img src="images/pic1.jpg"/>
    /span>
     p style="display: block;
    ">
     img src="images/pic1.jpg"/>
     /p>
     /li>
     li>
     span>
    img src="images/pic2.jpg"/>
    /span>
     p>
     img src="images/pic2.jpg"/>
     /p>
     /li>
     li>
     span>
    img src="images/pic3.jpg"/>
    /span>
     p>
     img src="images/pic3.jpg"/>
     /p>
     /li>
     li>
     span>
    img src="images/pic4.jpg"/>
    /span>
     p>
     img src="images/pic4.jpg"/>
     /p>
     /li>
     li>
     span>
    img src="images/pic5.jpg"/>
    /span>
     p>
     img src="images/pic5.jpg"/>
     /p>
     /li>
     /ul>
     p class="clearfix">
    /p>
     /p>
     /body>
    

简单描述一下：
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文件：

代码如下:

style tyPE="text/css">
 body {
     font-family: "微软雅黑";
 }
 #gallery {
     width: 700px;
     position: relative;
     margin: 20px auto 0;
     background-color: #000;
     min-height: 400px;
     padding: 20px;
 }
 /*标题*/ #gallery h1 {
     color: #fff;
     font-size: 2em;
     font-weight: bold;
 }
 #gallery ul {
     width: 140px;
     float: right;
     margin: 10px 0 20px;
 }
 #gallery ul li {
     float: left;
     margin: 20px 8px 0 0;
 }
 #gallery ul li span {
     display: block;
     position: relative;
     width: 60px;
     height: 80px;
     border: 1px solid #fff;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
     border-radius: 4px;
     overflow: hidden;
 }
 #gallery ul li span img {
     position: relative;
     top: -200px;
     left: -100px;
     filter: alpha(opacity=30);
     opacity: 0.3;
 }
 #gallery ul li span.touch img, #gallery ul li:hover span img {
     opacity: 1;
     filter: alpha(opacity=100);
 }
 #gallery ul li:hover p {
     display: block;
 }
 #gallery ul li p img {
     width: 460px;
     height: 288px;
 }
 #gallery ul li p {
     display: none;
     position: absolute;
     top: 100px;
     left: 30px;
     border: 5px solid #fff;
 }
 .clearfix {
     clear: both;
 }
     /style>
    

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免费视频教程

2. H5制作二维码扫描和解析的代码实例

3. HTML5本地数据库实例详解

4. 教你如何实现一个H5微场景

5. 详解H5的自定义属性data-*

以上就是H5和CSS3制作一个相册的代码实例的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！