以下是 HTML5仿微信朋友圈图片展示特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>HTML5仿微信朋友圈图片展示代码</title>
<link rel="stylesheet" type="text/css" href="css/commes.css" />
<link rel="stylesheet" href="css/photoswipe.css">
<link rel="stylesheet" href="css/default-skin/default-skin.css">
</head>
<body>
<div class="container">
<!--用户头像-->
<div class="header">
<div><img src="images/s1_m.jpg" /></div>
</div>
<div class="right_con">
<div class="demo">
<!--用户名and发布时间-->
<div class="use">
<div class="usename"><span>徐静蕾</span><em class="pub-time">刚刚</em></div>
</div>
<!--分享的内容-->
<!--分享的图片-->
<div class="my-gallery">
<figure>
<a href="images/s1.jpg" data-size="800x1142">
<img src="images/s1_m.jpg" />
</a>
</figure>
<figure>
<a href="images/s2.jpg" data-size="800x1142">
<img src="images/s2_m.jpg" />
</a>
</figure>
<figure>
<a href="images/s3.jpg" data-size="800x1142">
<img src="images/s3_m.jpg" />
</a>
</figure>
<figure>
<a href="images/s4.jpg" data-size="800x1142">
<img src="images/s4_m.jpg" />
</a>
</figure>
<figure>
<a href="images/s5.jpg" data-size="800x1142">
<img src="images/s5_m.jpg" />
</a>
</figure>
<figure>
<a href="images/s3.jpg" data-size="800x1142">
<img src="images/s3_m.jpg" />
</a>
</figure>
<figure>
<a href="images/s4.jpg" data-size="800x1142">
<img src="images/s4_m.jpg" />
</a>
</figure>
<figure>
<a href="images/s5.jpg" data-size="800x1142">
<img src="images/s5_m.jpg" />
</a>
</figure>
</div>
<!--显示的位置-->
<div class="fx_address">南京市建邺区</div>
</div>
</div>
</div>
<div class="container">
<!--用户头像-->
<div class="header">
<div><img src="images/s1_m.jpg" /></div>
</div>
<div class="right_con">
<div class="demo">
<!--用户名and发布时间-->
<div class="use">
<div class="usename"><span>徐静蕾</span><em class="pub-time">12:32</em></div>
</div>
<!--分享的内容-->
<p class="fx_content">你不知道的晨跑，好消息，合作谈妥了！！！</p>
<!--分享的图片-->
<div class="my-gallery">
<figure>
<a href="images/s1.jpg" data-size="800x1142">
<img src="images/s1_m.jpg" alt="Image description" />
</a>
</figure>
</div>
<!--显示的位置-->
<div class="fx_address">南京市建邺区</div>
</div>
</div>
</div>
<div class="container">
<!--用户头像-->
<div class="header">
<div><img src="images/s1_m.jpg" /></div>
</div>
<div class="right_con">
<div class="demo">
<!--用户名and发布时间-->
<div class="use">
<div class="usename"><span>徐静蕾</span><em class="pub-time">10:59</em></div>
</div>
<!--分享的内容-->
<p class="fx_content">你不知道的晨跑，好消息，合作谈妥了！！！</p>
<!--分享的图片-->
<div class="my-gallery">
<figure>
<a href="images/s1.jpg" data-size="800x1142">
<img src="images/s1_m.jpg" alt="Image description" />
</a>
</figure>
<figure>
<a href="images/s2.jpg" data-size="800x1142">
<img src="images/s2_m.jpg" alt="Image description" />
</a>
</figure>
</div>
<!--显示的位置-->
</div>
</div>
</div>
<!--以下内容不要管-->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<script src="js/photoswipe.min.js"></script>
<script src="js/photoswipe-ui-default.min.js"></script>
<script type="text/javascript">
var initPhotoSwipeFromDOM = function(gallerySelector) {
// parse slide data (url, title, size ...) from DOM elements
// (children of gallerySelector)
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
figureEl,
linkEl,
size,
item;
for (var i = 0; i < numNodes; i++) {
figureEl = thumbElements[i]; // <figure> element
// include only element nodes
if (figureEl.nodeType !== 1) {
continue;
}
linkEl = figureEl.children[0]; // <a> element
size = linkEl.getAttribute('data-size').split('x');
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
if (figureEl.children.length > 1) {
// <figcaption> content
item.title = figureEl.children[1].innerHTML;
}
if (linkEl.children.length > 0) {
// <img> thumbnail element, retrieving thumbnail url
item.msrc = linkEl.children[0].getAttribute('src');
}
item.el = figureEl; // save link to element for getThumbBoundsFn
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && (fn(el) ? el : closest(el.parentNode, fn));
};
// triggers when user clicks on thumbnail
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
// find root element of slide
var clickedListItem = closest(eTarget, function(el) {
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});
if (!clickedListItem) {
return;
}
// find index of clicked item by looping through all child nodes
// alternatively, you may define index via data- attribute
var clickedGallery = clickedListItem.parentNode,
childNodes = clickedListItem.parentNode.childNodes,
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (var i = 0; i < numChildNodes; i++) {
if (childNodes[i].nodeType !== 1) {
continue;
}
if (childNodes[i] === clickedListItem) {
index = nodeIndex;
break;
}
nodeIndex++;
}
if (index >= 0) {
// open PhotoSwipe if valid index found
openPhotoSwipe(index, clickedGallery);
}
return false;
};
// parse picture index and gallery index from URL (#&pid=1&gid=2)
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if (hash.length < 5) {
return params;
}
var vars = hash.split('&');
for (var i = 0; i < vars.length; i++) {
if (!vars[i]) {
continue;
}
var pair = vars[i].split('=');
if (pair.length < 2) {
continue;
}
params[pair[0]] = pair[1];
}
if (params.gid) {
params.gid = parseInt(params.gid, 10);
}
return params;
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
// define options (if needed)
options = {
// define gallery index (for URL)
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
// See Options -> getThumbBoundsFn section of documentation for more info
var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
}
};
// PhotoSwipe opened from URL
if (fromURL) {
if (options.galleryPIDs) {
// parse real index when custom PIDs are used
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
for (var j = 0; j < items.length; j++) {
if (items[j].pid == index) {
options.index = j;
break;
}
}
} else {
// in URL indexes start from 1
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
// exit if index not found
if (isNaN(options.index)) {
return;
}
if (disableAnimation) {
options.showAnimationDuration = 0;
}
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
// loop through all gallery elements and bind events
var galleryElements = document.querySelectorAll(gallerySelector);
for (var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute('data-pswp-uid', i + 1);
galleryElements[i].onclick = onThumbnailsClick;
}
// Parse URL and open gallery if it contains #&pid=3&gid=1
var hashData = photoswipeParseHash();
if (hashData.pid && hashData.gid) {
openPhotoSwipe(hashData.pid, galleryElements[ hashData.gid - 1 ], true, true);
}
};
// execute above function
initPhotoSwipeFromDOM('.my-gallery');
</script>
</body>
</html>
JS代码(photoswipe-ui-default.min.js):
/*! PhotoSwipe Default UI - 4.1.0 - 2015-07-11* http://photoswipe.com* Copyright (c) 2015 Dmitry Semenov;
*/
!function(a,b){
"function"==typeof define&&define.amd?define(b):"object"==typeof exports?module.exports=b():a.PhotoSwipeUI_Default=b()}
(this,function(){
"use strict";
var a=function(a,b){
var c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v=this,w=!1,x=!0,y=!0,z={
barsSize:{
top:44,bottom:"auto"}
,closeElClasses:["item","caption","zoom-wrap","ui","top-bar"],timeToIdle:4e3,timeToIdleOutside:1e3,loadingIndicatorDelay:1e3,addCaptionHTMLFn:function(a,b){
return a.title?(b.children[0].innerHTML=a.title,!0):(b.children[0].innerHTML="",!1)}
,closeEl:!0,captionEl:!0,fullscreenEl:!0,zoomEl:!0,shareEl:!0,counterEl:!0,arrowEl:!0,preloaderEl:!0,tapToClose:!1,tapToToggleControls:!0,clickToCloseNonZoomable:!0,shareButtons:[{
id:"download",label:"Download image",url:"{
{
raw_image_url}
}
",download:!0}
],getImageURLForShare:function(){
return a.currItem.src||""}
,getPageURLForShare:function(){
return window.location.href}
,getTextForShare:function(){
return a.currItem.title||""}
,indexIndicatorSep:" / "}
,A=function(a){
if(r)return!0;
a=a||window.event,q.timeToIdle&&q.mouseUsed&&!k&&K();
for(var c,d,e=a.target||a.srcElement,f=e.className,g=0;
g<S.length;
g++)c=S[g],c.onTap&&f.indexOf("pswp__"+c.name)>-1&&(c.onTap(),d=!0);
if(d){
a.stopPropagation&&a.stopPropagation(),r=!0;
var h=b.features.isOldAndroid?600:30;
s=setTimeout(function(){
r=!1}
,h)}
}
,B=function(){
return!a.likelyTouchDevice||q.mouseUsed||screen.width>1200}
,C=function(a,c,d){
b[(d?"add":"remove")+"Class"](a,"pswp__"+c)}
,D=function(){
var a=1===q.getNumItemsFn();
a!==p&&(C(d,"ui--one-slide",a),p=a)}
,E=function(){
C(i,"share-modal--hidden",y)}
,F=function(){
return y=!y,y?(b.removeClass(i,"pswp__share-modal--fade-in"),setTimeout(function(){
y&&E()}
,300)):(E(),setTimeout(function(){
y||b.addClass(i,"pswp__share-modal--fade-in")}
,30)),y||H(),!1}
,G=function(b){
b=b||window.event;
var c=b.target||b.srcElement;
return a.shout("shareLinkClick",b,c),c.href?c.hasAttribute("download")?!0:(window.open(c.href,"pswp_share","scrollbars=yes,resizable=yes,toolbar=no,location=yes,width=550,height=420,top=100,left="+(window.screen?Math.round(screen.width/2-275):100)),y||F(),!1):!1}
,H=function(){
for(var a,b,c,d,e,f="",g=0;
g<q.shareButtons.length;
g++)a=q.shareButtons[g],c=q.getImageURLForShare(a),d=q.getPageURLForShare(a),e=q.getTextForShare(a),b=a.url.replace("{
{
url}
}
",encodeURIComponent(d)).replace("{
{
image_url}
}
",encodeURIComponent(c)).replace("{
{
raw_image_url}
}
",c).replace("{
{
text}
}
",encodeURIComponent(e)),f+='<a href="'+b+'" target="_blank" class="pswp__share--'+a.id+'"'+(a.download?"download":"")+">"+a.label+"</a>",q.parseShareButtonOut&&(f=q.parseShareButtonOut(a,f));
i.children[0].innerHTML=f,i.children[0].onclick=G}
,I=function(a){
for(var c=0;
c<q.closeElClasses.length;
c++)if(b.hasClass(a,"pswp__"+q.closeElClasses[c]))return!0}
,J=0,K=function(){
clearTimeout(u),J=0,k&&v.setIdle(!1)}
,L=function(a){
a=a?a:window.event;
var b=a.relatedTarget||a.toElement;
b&&"HTML"!==b.nodeName||(clearTimeout(u),u=setTimeout(function(){
v.setIdle(!0)}
,q.timeToIdleOutside))}
,M=function(){
q.fullscreenEl&&(c||(c=v.getFullscreenAPI()),c?(b.bind(document,c.eventK,v.updateFullscreen),v.updateFullscreen(),b.addClass(a.template,"pswp--supports-fs")):b.removeClass(a.template,"pswp--supports-fs"))}
,N=function(){
q.preloaderEl&&(O(!0),l("beforeChange",function(){
clearTimeout(o),o=setTimeout(function(){
a.currItem&&a.currItem.loading?(!a.allowProgressiveImg()||a.currItem.img&&!a.currItem.img.naturalWidth)&&O(!1):O(!0)}
,q.loadingIndicatorDelay)}
),l("imageLoadComplete",function(b,c){
a.currItem===c&&O(!0)}
))}
,O=function(a){
n!==a&&(C(m,"preloader--active",!a),n=a)}
,P=function(a){
var c=a.vGap;
if(B()){
var g=q.barsSize;
if(q.captionEl&&"auto"===g.bottom)if(f||(f=b.createEl("pswp__caption pswp__caption--fake"),f.appendChild(b.createEl("pswp__caption__center")),d.insertBefore(f,e),b.addClass(d,"pswp__ui--fit")),q.addCaptionHTMLFn(a,f,!0)){
var h=f.clientHeight;
c.bottom=parseInt(h,10)||44}
else c.bottom=g.top;
else c.bottom="auto"===g.bottom?0:g.bottom;
c.top=g.top}
else c.top=c.bottom=0}
,Q=function(){
q.timeToIdle&&l("mouseUsed",function(){
b.bind(document,"mousemove",K),b.bind(document,"mouseout",L),t=setInterval(function(){
J++,2===J&&v.setIdle(!0)}
,q.timeToIdle/2)}
)}
,R=function(){
l("onVerticalDrag",function(a){
x&&.95>a?v.hideControls():!x&&a>=.95&&v.showControls()}
);
var a;
l("onPinchClose",function(b){
x&&.9>b?(v.hideControls(),a=!0):a&&!x&&b>.9&&v.showControls()}
),l("zoomGestureEnded",function(){
a=!1,a&&!x&&v.showControls()}
)}
,S=[{
name:"caption",option:"captionEl",onInit:function(a){
e=a}
}
,{
name:"share-modal",option:"shareEl",onInit:function(a){
i=a}
,onTap:function(){
F()}
}
,{
name:"button--share",option:"shareEl",onInit:function(a){
h=a}
,onTap:function(){
F()}
}
,{
name:"button--zoom",option:"zoomEl",onTap:a.toggleDesktopZoom}
,{
name:"counter",option:"counterEl",onInit:function(a){
g=a}
}
,{
name:"button--close",option:"closeEl",onTap:a.close}
,{
name:"button--arrow--left",option:"arrowEl",onTap:a.prev}
,{
name:"button--arrow--right",option:"arrowEl",onTap:a.next}
,{
name:"button--fs",option:"fullscreenEl",onTap:function(){
c.isFullscreen()?c.exit():c.enter()}
}
,{
name:"preloader",option:"preloaderEl",onInit:function(a){
m=a}
}
],T=function(){
var a,c,e,f=function(d){
if(d)for(var f=d.length,g=0;
f>g;
g++){
a=d[g],c=a.className;
for(var h=0;
h<S.length;
h++)e=S[h],c.indexOf("pswp__"+e.name)>-1&&(q[e.option]?(b.removeClass(a,"pswp__element--disabled"),e.onInit&&e.onInit(a)):b.addClass(a,"pswp__element--disabled"))}
}
;
f(d.children);
var g=b.getChildByClass(d,"pswp__top-bar");
g&&f(g.children)}
;
v.init=function(){
b.extend(a.options,z,!0),q=a.options,d=b.getChildByClass(a.scrollWrap,"pswp__ui"),l=a.listen,R(),l("beforeChange",v.update),l("doubleTap",function(b){
var c=a.currItem.initialZoomLevel;
a.getZoomLevel()!==c?a.zoomTo(c,b,333):a.zoomTo(q.getDoubleTapZoom(!1,a.currItem),b,333)}
),l("preventDragEvent",function(a,b,c){
var d=a.target||a.srcElement;
d&&d.className&&a.type.indexOf("mouse")>-1&&(d.className.indexOf("__caption")>0||/(SMALL|STRONG|EM)/i.test(d.tagName))&&(c.prevent=!1)}
),l("bindEvents",function(){
b.bind(d,"pswpTap click",A),b.bind(a.scrollWrap,"pswpTap",v.onGlobalTap),a.likelyTouchDevice||b.bind(a.scrollWrap,"mouseover",v.onMouseOver)}
),l("unbindEvents",function(){
y||F(),t&&clearInterval(t),b.unbind(document,"mouseout",L),b.unbind(document,"mousemove",K),b.unbind(d,"pswpTap click",A),b.unbind(a.scrollWrap,"pswpTap",v.onGlobalTap),b.unbind(a.scrollWrap,"mouseover",v.onMouseOver),c&&(b.unbind(document,c.eventK,v.updateFullscreen),c.isFullscreen()&&(q.hideAnimationDuration=0,c.exit()),c=null)}
),l("destroy",function(){
q.captionEl&&(f&&d.removeChild(f),b.removeClass(e,"pswp__caption--empty")),i&&(i.children[0].onclick=null),b.removeClass(d,"pswp__ui--over-close"),b.addClass(d,"pswp__ui--hidden"),v.setIdle(!1)}
),q.showAnimationDuration||b.removeClass(d,"pswp__ui--hidden"),l("initialZoomIn",function(){
q.showAnimationDuration&&b.removeClass(d,"pswp__ui--hidden")}
),l("initialZoomOut",function(){
b.addClass(d,"pswp__ui--hidden")}
),l("parseVerticalMargin",P),T(),q.shareEl&&h&&i&&(y=!0),D(),Q(),M(),N()}
,v.setIdle=function(a){
k=a,C(d,"ui--idle",a)}
,v.update=function(){
x&&a.currItem?(v.updateIndexIndicator(),q.captionEl&&(q.addCaptionHTMLFn(a.currItem,e),C(e,"caption--empty",!a.currItem.title)),w=!0):w=!1,y||F(),D()}
,v.updateFullscreen=function(d){
d&&setTimeout(function(){
a.setScrollOffset(0,b.getScrollY())}
,50),b[(c.isFullscreen()?"add":"remove")+"Class"](a.template,"pswp--fs")}
,v.updateIndexIndicator=function(){
q.counterEl&&(g.innerHTML=a.getCurrentIndex()+1+q.indexIndicatorSep+q.getNumItemsFn())}
,v.onGlobalTap=function(c){
c=c||window.event;
var d=c.target||c.srcElement;
if(!r)if(c.detail&&"mouse"===c.detail.pointerType){
if(I(d))return void a.close();
b.hasClass(d,"pswp__img")&&(1===a.getZoomLevel()&&a.getZoomLevel()<=a.currItem.fitRatio?q.clickToCloseNonZoomable&&a.close():a.toggleDesktopZoom(c.detail.releasePoint))}
else if(q.tapToToggleControls&&(x?v.hideControls():v.showControls()),q.tapToClose&&(b.hasClass(d,"pswp__img")||I(d)))return void a.close()}
,v.onMouseOver=function(a){
a=a||window.event;
var b=a.target||a.srcElement;
C(d,"ui--over-close",I(b))}
,v.hideControls=function(){
b.addClass(d,"pswp__ui--hidden"),x=!1}
,v.showControls=function(){
x=!0,w||v.update(),b.removeClass(d,"pswp__ui--hidden")}
,v.supportsFullscreen=function(){
var a=document;
return!!(a.exitFullscreen||a.mozCancelFullScreen||a.webkitExitFullscreen||a.msExitFullscreen)}
,v.getFullscreenAPI=function(){
var b,c=document.documentElement,d="fullscreenchange";
return c.requestFullscreen?b={
enterK:"requestFullscreen",exitK:"exitFullscreen",elementK:"fullscreenElement",eventK:d}
:c.mozRequestFullScreen?b={
enterK:"mozRequestFullScreen",exitK:"mozCancelFullScreen",elementK:"mozFullScreenElement",eventK:"moz"+d}
:c.webkitRequestFullscreen?b={
enterK:"webkitRequestFullscreen",exitK:"webkitExitFullscreen",elementK:"webkitFullscreenElement",eventK:"webkit"+d}
:c.msRequestFullscreen&&(b={
enterK:"msRequestFullscreen",exitK:"msExitFullscreen",elementK:"msFullscreenElement",eventK:"MSFullscreenChange"}
),b&&(b.enter=function(){
return j=q.closeOnScroll,q.closeOnScroll=!1,"webkitRequestFullscreen"!==this.enterK?a.template[this.enterK]():void a.template[this.enterK](Element.ALLOW_KEYBOARD_INPUT)}
,b.exit=function(){
return q.closeOnScroll=j,document[this.exitK]()}
,b.isFullscreen=function(){
return document[this.elementK]}
),b}
}
;
return a}
);
CSS代码(commes.css):
@charset "utf-8";/* CSS Document */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}
a{color:#007bc4;text-decoration:none;cursor:pointer;}
.table_parameters a:hover{text-decoration:none}
a:hover{text-decoration:underline}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
html{background:url(../images/demo_bg.png)}
body{height:100%;}
img{border:0;cursor:pointer;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.container{width:100%;float:left;height:auto;border-bottom:solid 1px #eeeeee;padding-bottom:10px;padding-top:10px}
.header{width:60px;height:60px;float:left;margin-left:15px}
.header img{width:100%;height:100%}
.right_con{margin-left:85px;display:block;margin-right:15px}
.use{width:100%;float:left;height:30px;line-height:30px;}
.usename{}
.usename span{color:#ed4947;font-size:1.3em}
.usename em{float:right;font-style:normal;font-size:1em;color:#b8b8b8}
.demo{width:700px;margin:0 auto}
.demo p.fx_content{float:left;height:auto;margin:0;padding:0;font-size:1.1em;line-height:22px;margin-top:5px}
.demo{width:100%;float:right;height:auto}
.my-gallery{width:100%;float:left;margin-top:15px}
.my-gallery img{width:100%;height:auto;display:block;float:left}
.my-gallery figure{display:block;float:left;margin:0 2px 2px 0;width:32%;}
.my-gallery figcaption{display:none;}
.fx_address{float:left;width:100%;margin-top:25px;height:25px;line-height:25px;font-size:1em;color:#b8b8b8;background:url(../images/dingwei.png) no-repeat left center;background-size:18px 20px;text-indent:20px}
分享到QQ
分享到微博
微信扫一扫
