标签：
对应的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 class="form-control" rows="3" 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:100%; 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:8.6em; font-weight:bold; color:white; font-family: "Zeyada"; padding-top:150px; } .banner h2{ font-size:3.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:100%; position:absolute; top:0; left:0; } .figure-item figcaption{ height:250px; position:absolute; width:100%; background:url(http://gridelicious.net/themes/treble/demo/assets/images/css/thumb_over.png) no-repeat center 150px black; top:0; left:-250px; text-align:center; color:white; padding:5px; opacity:0; transition:all 0.7s; } .figure-item:hover figcaption{ opacity:0.8; top:0; left:0; } .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:8.5em; } .form-section form{ max-width:600px; margin:30px auto; } .form-section form input{ background-color:rgba(0,0,0,0.2); } .form-section form textarea{ background-color:rgba(0,0,0,0.2); } .form-section form button{ display:block; width:100%; }
标签：
原文地址：http://www.cnblogs.com/bobodeboke/p/4576522.html
