前端实战——照片墙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:%;
}
前端实战——照片墙gallery的实现的更多相关文章
- vue前端实战注意事项
1. vue前端实战注意事项 1.1. 预备 1.1.1. Eslint 这是个语法检查工具,我用webstorm作为开发的ide,这个语法检查还是太严格了,一个空格啥的都会报错,对新手来讲还是建议关 ...
- Web 前端实战：Gitee 贡献图
前言 这次要做的 Web 前端实战是一个 Gitee 个人主页下的贡献图(在线 Demo),偶尔做一两个,熟悉熟悉 JS 以及 jQ.整体来说这个案例并不难,主要是控制第一个节点以及最后一个节点处于星 ...
- Web 前端实战：JQ 实现树形控件
前言 这是一篇个人练习 Web 前端各种常见的控件.组件的实战系列文章.本篇文章将介绍个人通过 JQuery + 无序列表 + CSS 动画完成一个简易的树形控件. 最终实现的效果是: 这样结构比较复 ...
- 前端实战Demo：一张图片搞定一页布局
对前端程序员来说,从设计师的手中拿过设计图和素材之后根据需要进行切图是必要的基本功,但是一般的程序员可能对切图并非那么熟悉,所以可能有很多时间都花在使用Photoshop上,那么这里就有一种方法可以减 ...
- 【h5+c3】web前端实战项目、快装webapp手机案例源码
快装WebApp项目(Web移动端开发案例)webapp移动端项目源码.html5+css3实战案例分享.微信端H5实例开发 简介快装WebApp是一个面向移动端的快速装修app,此项目为手机端:使用 ...
- 算法问题实战策略 GALLERY
地址 https://algospot.com/judge/problem/read/GALLERY 分析 如图 显然是需要在 0 1 2三个点进行监控即可.(0 2 3 也可) 根据题意,不存在回路 ...
- 前端实战——前端效果accordition的实现
一.bootstrap实现 1)水平折叠组件 使用panel和collaspe组件 <!doctype html> <html lang="zh-hans"> ...
- \ HTML5开发项目实战:照片墙
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- Web 前端实战（三）：雷达图
前言 在<Canvas 线性图形(五):多边形>实现了绘制多边形的函数.本篇文章将记录如何绘制雷达图.最终实现的效果是这样的: 绘制雷达图 雷达图里外层 如动图中所示,雷达图从里到外一共有 ...
随机推荐
- php扩展redis，编译安装redis服务
首先安装redis扩展 https://github.com/phpredis/phpredis 下载http://redis.io/download 服务软件 cd到软件存放目录unzip phpr ...
- memcached学习笔记5--socke操作memcached 缓存系统
使用条件:当我们没有权限或者不能使用服务器的时候,我们需要用socket操作memcached memcached-client操作 特点: 无需开启memcache扩展 使用fsocketopen( ...
- 大话数据结构（八）Java程序——双向链表的实现
线性链表--双向链表 双向链表定义: 双向链表(double linked list): 是在单表单的每个结点中,再设置一个指向前驱结点的指针域.因此,在双向链表中的结点都有两个指针域,一个指向前驱, ...
- 【转】HideInInspector 与SerializeField
http://blog.csdn.net/luyuncsd123/article/details/21563697 [HideInInspector]表示将原本显示在面板上的序列化值隐藏起来. [Se ...
- 【转】设计模式 ( 十七) 状态模式State（对象行为型）
设计模式 ( 十七) 状态模式State(对象行为型) 1.概述 在软件开发过程中,应用程序可能会根据不同的情况作出不同的处理.最直接的解决方案是将这些所有可能发生的情况全都考虑到.然后使用if... ...
- PHP数据库基础
PHP数据库基础: 1.varchar:字符串,用于姓名班级,地址等,地址一般长50,姓名长20 2.int:整数,用于成绩,序号等 3.float:小数 4.bit:布尔型,用于性别等 5.时间也用 ...
- JAVA缓存技术之EhCache
最近再ITEYE上看到关于讨论JAVA缓存技术的帖子比较多,自己不懂,所以上网大概搜了下,找到一篇,暂作保存,后面如果有用到可以参考.此为转贴,帖子来处:http://cogipard.info/ar ...
- HBase的属性
一:基本属性 1.查看属性 2.解释属性 NAME:列簇名 BLOOMFILTER:布隆过滤器,用于对storefile的过滤 共有三种类型: ROW:行健过滤 ROWCOL:行列过滤 NONE:无 ...
- C++ TrieTree（字典树）容器的实现
最近研究了一下C++线程池,在网上看了一下别人的代码,写的很不错,参见:http://www.cnblogs.com/lidabo/p/3328646.html 其中,他用了STL的set容器管理线程 ...
- php--在apache上配制rewrite重写
配置步骤: 第一步:找到apache的配置文件httpd.conf(文件在conf目录下) 第二步:你首先必须得让服务器支持mod_rewrite,如果你使用的是虚拟主机,请事先询问你的主机提供商. ...