HTML文件结构解析

让我们先看下这份HTML的构成！别小看它，这效果全是靠HTML和CSS完成的，根本就没用到一行JS。内容就是简单的ul、li、span、img以及p这些标签组合而成的。

咱们先来谈谈ul标签，它里面有好几个li标签。每个li标签就代表了一张照片儿。ul标签设置了样式float:right和width:140px，让整个相册往右边跑，放到右半边屏幕去。li标签也不甘示弱，用上float:left样式，让每张图片都能靠左边有点儿空间。还有，在每个li标签里面，还挺复杂的嵌套了些 spans、imgs和ps 之类的标签，用来展示缩小版和完整版的照片儿。

当你把鼠标放在每个LI标签上，就能看到里面的SPAN、IMG和P标签的显示和隐藏状态。这个效果是靠改变它们的透明度和显示属性完成的。重点来了，其中大图的显示是用position:absolute方法搞定的，而且默认只显示第一张照片。

这个HTML结构看着舒服又明了，就用合适的样式属性强化每个标签，整出了一个操作起来特别好使的相册。

    
纯CSS3相册效果
    

        

            
            

                
            
        
        

            
            

                
            
        
        

            
            

                
            
        
        

            
            

                
            
        
        

            
            

                
            
        
    
    

CSS文件样式分析

让我们一起看看这份简单的CSS文件！它通过设定页面元素的布局啊、颜色啊、大小啥的，达到了一份看起来还挺不错的相册功效~

你看那个ul和li元素，?它们被加上特定的样式后，就能展示出各种形状比如说，ul如果设置了float:right且 width=140px的话，照片墙就会乖乖地呆在页面右边，很有意思？li元素？给它加个float:left就可以让它们像队列一样並排着了，感觉挺酷的！

推出这么个神奇功能！当你把鼠标放在每个li上面，我们会让spam、img和p元素变得有点透明，还能显示出大图来，跟你互动。简单明了，视觉效果也棒棒哒！

别以为就那几种主打款式哦～其实你看到的HTML文档里，还有一个reset.css文件，就是为了把网页上那些初始设定的样式弄得统一点，让浏览器跑起来更速度些。当然，你要是有自己的口味审美，也可以自由发挥用自定义的 reset 样式表咯~

总结与展望

大家看，这就是纯CSS做出的相册效果，里面嵌套了HTML5和CSS3的布局和样式控制功能，你没听错！有了这些新玩意儿，做网页时就能随心所欲地美化界面，不再需要依赖JavaScript那种麻烦又复杂的东西。

        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;
        }
    

越来越多有意思的Web创意产品会出现，这些都是得益于未来网页技术的进步和改善，尤其是HTML5和CSS3的巧妙运用。咱们期待这趋势，更希望许多前端大神们能深入研究并灵活运用这些新功能，让大家在浏览器里享受到更好、更流畅的网络旅程！