css布局实现照片墙效果代码

代码语言:html

所属分类:布局界面

代码描述:css布局实现照片墙效果代码

代码标签: 照片 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
@charset "utf-8";* {
    padding: 0;
    margin: 0;
}

    div {
        font-family: "微软雅黑";
        font-size: 14px;
        color: #666;
        padding: 0;
        margin: 0;
    }
    body {
        background: #eee;
    }

    /*css3实现照片墙的样式*/
    .container {
        width: 960px;
        height: 450px;
        margin: 160px auto;
        position: relative;
    }
    .container img {
        position: absolute;
        padding: 10px 10px 15px;
        background: #fff;
        border: 1px solid #ddd;
        -webkit-transition: 1s;
        -moz-transition: 1s;
        transition: 1s;
        z-index: 1;
    }
    .container .........完整代码请登录后点击上方下载按钮下载查看

网友评论0