css3图片画廊 Lightbox特效代码下载



12 46 16



特效描述:图片画廊 Lightbox,css3图片画廊和Lightbox特效代码下载

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="css/baguetteBox.min.css">
<link rel="stylesheet" href="css/gallery-clean.css">

2. 引入JS

<script type="text/javascript" src="js/baguetteBox.min.js"></script>

3. HTML代码

<div class="zzsc-container">
	<header class="zzsc-header">
		<h1>图片画廊和Lightbox特效 <span>4 Bootstrap Gallery Templates</span></h1>
		<div class="zzsc-demo center">
		  <a href="index.html" class="current">Clean Layout</a>
		  <a href="index2.html">Fluid Layout</a>
		  <a href="index3.html">Grid Layout</a>
		  <a href="index4.html">Thumbnails</a>
		</div>
	</header>
	<div class="container gallery-container">
		<h1>Bootstrap 3 Gallery</h1>
		<p class="page-description text-center">Clean Layout With Minimal Styles</p>
		<div class="tz-gallery">
			<div class="row">
				<div class="col-sm-6 col-md-4">
					<div class="thumbnail">
						<a href="https://www.51qianduan.com/">51前端</a>
						<div class="caption">
							<h3>Thumbnail label</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-md-4">
					<div class="thumbnail">
						<a href="https://www.51qianduan.com/">51前端</a>
						<div class="caption">
							<h3>Thumbnail label</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-md-4">
					<div class="thumbnail">
						<a href="https://www.51qianduan.com/">51前端</a>
						<div class="caption">
							<h3>Thumbnail label</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-md-4">
					<div class="thumbnail">
						<a href="https://www.51qianduan.com/">51前端</a>
						<div class="caption">
							<h3>Thumbnail label</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-md-4">
					<div class="thumbnail">
						<a href="https://www.51qianduan.com/">51前端</a>
						<div class="caption">
							<h3>Thumbnail label</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-md-4">
					<div class="thumbnail">
						<a href="https://www.51qianduan.com/">51前端</a>
						<div class="caption">
							<h3>Thumbnail label</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	baguetteBox.run('.tz-gallery');
</script>
<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到