前端实战——照片墙gallery的实现

对应的html代码

<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/galary.css">
    <title>gallery</title>
</head>
<body>
    <div class="banner">
        <h1>HELLO,</h1>
        <h2>I'M MATHIEU RICHARD</h2>
    </div>
    <div class="img-gallery">
        <div class="row">
            <figure class="figure-item col-sm-3">
             <a href="#">
                <img src="http://lorempixel.com/800/400/nature/1/" alt="img1"/>
                <figcaption>
                    <h2>Legend</h2>
                    <p>Lorem ipsum dolor sit amet</p>
                </figcaption>
            </a>
            </figure>

            <figure class="figure-item col-sm-3">
             <a href="#">
                <img src="http://lorempixel.com/800/400/nature/4/" alt="img1"/>
                <figcaption>
                    <h2>Legend</h2>
                    <p>Lorem ipsum dolor sit amet</p>
                </figcaption>
            </a>
            </figure>

            <figure class="figure-item col-sm-3">
             <a href="#">
                <img src="http://lorempixel.com/800/400/nature/2/" alt="img1"/>
                <figcaption>
                    <h2>Legend</h2>
                    <p>Lorem ipsum dolor sit amet</p>
                </figcaption>
            </a>
            </figure>

            <figure class="figure-item col-sm-3">
             <a href="#">
                <img src="http://lorempixel.com/800/400/nature/3/" alt="img1"/>
                <figcaption>
                    <h2>Legend</h2>
                    <p>Lorem ipsum dolor sit amet</p>
                </figcaption>
            </a>
            </figure>
        </div>

        <div class="row">
            <figure class="figure-item col-sm-3">
             <a href="#">
                <img src="http://lorempixel.com/800/400/nature/4/" alt="img1"/>
                <figcaption>
                    <h2>Legend</h2>
                    <p>Lorem ipsum dolor sit amet</p>
                </figcaption>
            </a>
            </figure>

            <figure class="figure-item col-sm-3">
             <a href="#">
                <img src="http://lorempixel.com/800/400/nature/3/" alt="img1"/>
                <figcaption>
                    <h2>Legend</h2>
                    <p>Lorem ipsum dolor sit amet</p>
                </figcaption>
            </a>
            </figure>

            <figure class="figure-item col-sm-3">
             <a href="#">
                <img src="http://lorempixel.com/800/400/nature/1/" alt="img1"/>
                <figcaption>
                    <h2>Legend</h2>
                    <p>Lorem ipsum dolor sit amet</p>
                </figcaption>
            </a>
            </figure>

            <figure class="figure-item col-sm-3">
             <a href="#">
                <img src="http://lorempixel.com/800/400/nature/2/" alt="img1"/>
                <figcaption>
                    <h2>Legend</h2>
                    <p>Lorem ipsum dolor sit amet</p>
                </figcaption>
            </a>
            </figure>
        </div>
    </div>
    <div class="form-section">
        <h1>Contact</h1>
        <form role="form">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Name"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Mail"/>
            </div>
            <div class="form-group">
                <textarea  " placeholder="Message"></textarea>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-default">提交</button>
            </div>
        </form>
    </div>
    <script src="lib/jquery-2.1.4.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>

对应的css样式代码

a{
    color:white;
    text-decoration:none;
}

.banner{
    margin-top:-40px;
    height:500px;
    width:%;
    text-align:center;
    background-size:cover;
    background-image:url(http://images.forwallpaper.com/files/thumbs/preview/20/205186__photo-close-up-snow-leaves-blur-bokeh-background-wallpaper_p.jpg);
}

.banner h1{
    font-size:.6em;
    font-weight:bold;
    color:white;
    font-family: "Zeyada";
    padding-top:150px;
}
.banner h2{
    font-size:.3em;
    color:white;
    text-align:center;
    font-family: "Zeyada";
    margin-top:20px;
}
.figure-item{
    height:250px;
    position:relative;
    overflow:hidden;
}

.figure-item img{
    height:250px;
    width:%;
    position:absolute;
    top:;
    left:;
}

.figure-item figcaption{
    height:250px;
    position:absolute;
    width:%;
    background:url(http://gridelicious.net/themes/treble/demo/assets/images/css/thumb_over.png) no-repeat center 150px black;
    top:;
    left:-250px;
    text-align:center;
    color:white;
    padding:5px;
    opacity:;
    transition:all .7s;
}
.figure-item:hover figcaption{
    opacity:0.8;
    top:;
    left:;
}

.form-section{

    background-image:url(http://images.forwallpaper.com/files/thumbs/preview/20/205186__photo-close-up-snow-leaves-blur-bokeh-background-wallpaper_p.jpg);
    background-size:cover;
    text-align:center;
    padding:30px;
}
.form-section h1{
    color:white;
    font-size:.5em;

}
.form-section form{
    max-width:600px;
    margin:30px auto;

}
.form-section form input{
    background-color:rgba(,,,0.2);

}
.form-section form textarea{
    background-color:rgba(,,,0.2);
}
.form-section form button{
    display:block;
    width:%;

}
上一篇:delphi 2007 远程调试


下一篇:Macro-Micro Adversarial Network for Human Parsing