相册 - th是个小屁�?/title> <link rel="shortcut icon" href="/blog/favicon.ico">  <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/blog/css/thplayer.css">  <link rel="stylesheet" href="/blog/css/style.css"> <script src="js/jquery.js"></script> </head> <body>  <header class="site-header"> <div class="header-inside"> <div class="logo"> <a href="http://www.tianhao.site" rel="home"> <img src="img/timg.jpg" alt="th是个小屁�? height="60"> </a> </div> <a class="header-name" href="/blog/"> <span>th是个小屁�?/span> 的部落宅 </a>  <nav class="navbar">  <div class="collapse"> <ul class="navbar-nav"> <li> <a href="/blog/."> <i class="fa fa-home "></i> 首页 </a> </li> <li> <a href="/blog/archives"> <i class="fa fa-archive "></i> 归档 </a> </li> <li> <a href="/blog/about"> <i class="fa fa-user "></i> 关于 </a> </li> <li> <a href="/blog/project"> <i class="fa fa-folder-open "></i> 项目 </a> </li> <li> <a href="/blog/photo"> <i class="fa fa-photo "></i> 相册 </a> </li> <li> <a href="/blog/guestbook"> <i class="fa fa-edit "></i> 留言 </a> </li> <li> <a href="/blog/one"> <i class="fa fa-bicycle "></i> one </a> </li> <li> <a href="/blog/atom.xml"> <i class="fa fa-send "></i> RSS </a> </li> </ul> </div>  </nav> <div class="button-wrap"> <button class="menu-toggle">Primary Menu</button> </div> </div> </header>  <style> #container { margin: auto; max-width: 1280px; margin-top: 5em; margin-bottom: 60px; animation: cont 0.3s; border-radius: 3px; background-color: #fff; padding: 20px 0px 15px 0px; clear: both; } .about-me .counts, .about-me .profile { border-bottom: 1px solid #eee; margin: 0 0 3%; padding: 0 0 3%; text-align: center; } .about-me .avatar-450 { width: 150px; height: 150px; text-align: center; border-radius: 100%; border: 3px solid #F2F5F7; } .avatar-450 { width: 30%; max-width: 150px; height: auto; border-radius: 100%; } .about-me .about-avatar, .about-me .info { display: inline-block; vertical-align: top; letter-spacing: 0; margin-top: -15px; } .about-me .info { width: 30%; padding-left: 15px; } .about-me .info h1 { font-weight: 700; font-size: 20px; color: #333; word-break: break-all; } .about-me .info h1, .about-me p { color: rgba(0,0,0,.6); width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; } .prandom ul{ overflow: hidden; text-align: center; } .post-random .photo { margin: 5px; width: 23%; display: inline-block; line-height: 0; } .photo_shows { position: relative; margin-bottom: 2rem; } .photo_shows a .mask { position: absolute; font-size: 20px; top: 30%; bottom: 60%; left: 0; right: 0; padding: 0 20px; padding-top: 7em; margin: auto; color: transparent; background: 0 0; opacity: 0; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .photo_shows img { width: 100%; height: 100%; } .photo_shows a:hover .mask { top: 0px; bottom: 0px; color: rgb(255, 255, 255); opacity: 1; background: rgba(0, 0, 0, 0.65098); } #imgbox-loading { position: absolute; top: 0; left: 0; cursor: pointer; display: none; z-index: 90; } #imgbox-loading div { background: #FFF; width: 100%; height : 100%; } #imgbox-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: none; z-index: 80; } .imgbox-wrap { position: absolute; top: 0; left: 0; background: #FFF; display: none; z-index: 90; } .imgbox-img { padding: 0; margin: 0; border: none; width: 100%; height: 100%; vertical-align: top; } .imgbox-close { position: absolute; top: -15px; right: -15px; height: 30px; width: 30px; cursor: pointer; outline: none; } .imgbox-title { padding-top: 10px; font-size: 11px; text-align: center; font-family: Arial; color: #333; display: none; } .imgbox-bg-wrap { position: absolute; padding: 0; margin: 0; display: none; } .imgbox-bg { position: absolute; width: 20px; height: 20px; } .imgbox-bg-n { left: 0; top: -20px; width: 100%; } .imgbox-bg-ne { right: -20px; top: -20px; } .imgbox-bg-e { right: -20px; top: 0; height: 100%; } .imgbox-bg-se { right: -20px; bottom: -20px; } .imgbox-bg-s { left: 0; bottom: -20px; width: 100%; } .imgbox-bg-sw { left: -20px; bottom: -20px; } .imgbox-bg-w { left: -20px; top: 0; height: 100%; } .imgbox-bg-nw { left: -20px; top: -20px; } @media all and (max-width:1440px){ #container{max-width:1100px} .post-random .photo {width: 23%;} } @media (max-width: 999px) { #container { width: 95%; margin-top: 2em; } } @media (max-width: 720px) { #container { box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 0px 0px, rgba(0, 0, 0, 0.298039) 0px 0px 0px 0px; width: 94%; margin: 10px auto auto -3px; padding: 15px; } .post-random { width: 100%; } .post-random .photo { width: 32%; display: inline-block; box-sizing: border-box; border-radius: 3px; border-width: 1px; border-style: solid; border-color: rgba(0, 0, 0, 0.0470588); border-image: initial; margin: 0px; } .post-random .photo-item { height: 100%; background-size: cover; } .photo_shows a .mask { padding-top: 50%; font-size: 15px; } } @media (max-width: 540px) { .prandom { margin: auto; width: 114%; margin-left: -20px; } .post-random { width: 100%; } .post-random .photo { border-radius: 3px; border: 1px solid rgba(0,0,0,.05); margin-bottom: 0; width: 32%; display: inline-block; box-sizing: border-box; margin: 0px; } } </style> <div id="container"> <div class="about-me about_mob" style="display: inherit;"> <div class="profile"> <img alt="" src="img/avator.jpg" class="avatar avatar-450 photo" height="450" width="450"> <div class="info aboutinfo"> <h1><span>th是个小屁�?/span>的相册薄</h1> <p>永远相信</p> <p>美好的事情即将发�?/p> </div> </div> </div> <div class="prandom"> <div class="post-random"><ul class="js-photos"><ul> <li class="photo photo_shows"> <a class="photo-item" href="img/QQ%E5%9B%BE%E7%89%8720160911111234_Snapseed_meitu_3.jpg" target="_blank"> <div class="mask transition3">上海·外滩</div> <img src="img/QQ%E5%9B%BE%E7%89%8720160911111234_Snapseed_meitu_3.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/QQ%E5%9B%BE%E7%89%8720160911105703_Snapseed_meitu_4.jpg" target="_blank"> <div class="mask transition3">上海·城隍�?/div> <img src="img/QQ%E5%9B%BE%E7%89%8720160911105703_Snapseed_meitu_4.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/QQ%E5%9B%BE%E7%89%8720160911112212_Snapseed_meitu_2.jpg" target="_blank"> <div class="mask transition3">上海·外滩</div> <img src="img/QQ%E5%9B%BE%E7%89%8720160911112212_Snapseed_meitu_2.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/QQ%E5%9B%BE%E7%89%8720160911105720_Snapseed_meitu_1.jpg" target="_blank"> <div class="mask transition3">上海·城隍�?/div> <img src="img/QQ%E5%9B%BE%E7%89%8720160911105720_Snapseed_meitu_1.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/23432.jpg" target="_blank"> <div class="mask transition3">谢霆�?/div> <img src="img/23432.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/278f3ec3472f45aca025d6b7f1048ce8fda727217c64-tJA5fE_fw658_meitu_2.jpg" target="_blank"> <div class="mask transition3">朱茵</div> <img src="img/278f3ec3472f45aca025d6b7f1048ce8fda727217c64-tJA5fE_fw658_meitu_2.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/93a3663ce5a120df2187d88dee6b611e4d6bb0fd890e-Ayk04S_fw658_meitu_5.jpg" target="_blank"> <div class="mask transition3">�?/div> <img src="img/93a3663ce5a120df2187d88dee6b611e4d6bb0fd890e-Ayk04S_fw658_meitu_5.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/234.jpg" target="_blank"> <div class="mask transition3">谢霆�?/div> <img src="img/234.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/5406bfb524dedd8d8d583f851de02a6f954b8cb63a313-KkBPG0_fw658_meitu_5.jpg" target="_blank"> <div class="mask transition3">新垣结衣</div> <img src="img/5406bfb524dedd8d8d583f851de02a6f954b8cb63a313-KkBPG0_fw658_meitu_5.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/img3_meitu_8.jpg" target="_blank"> <div class="mask transition3">�?/div> <img src="img/img3_meitu_8.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/1be693d8c060f36425ff18c2c6bd74297e124115481ef-ORfbts_fw658_meitu_4.jpg" target="_blank"> <div class="mask transition3">�?/div> <img src="img/1be693d8c060f36425ff18c2c6bd74297e124115481ef-ORfbts_fw658_meitu_4.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/efffa4c7e22d967269410e4ee5a8a22f963840312e32c-0Xv1LH_fw658_meitu_6.jpg" target="_blank"> <div class="mask transition3">新垣结衣</div> <img src="img/efffa4c7e22d967269410e4ee5a8a22f963840312e32c-0Xv1LH_fw658_meitu_6.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/9a75825d20a21a59472d7f17f758682c82fcadd025169-D9G2Hv_fw658_meitu_11.jpg" target="_blank"> <div class="mask transition3">旅行</div> <img src="img/9a75825d20a21a59472d7f17f758682c82fcadd025169-D9G2Hv_fw658_meitu_11.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/15307563afb5f071d66161bf7cdbdb496ea5674814c5f-GKX9ys_fw658_meitu_3.jpg" target="_blank"> <div class="mask transition3">�?/div> <img src="img/15307563afb5f071d66161bf7cdbdb496ea5674814c5f-GKX9ys_fw658_meitu_3.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/ad01a45561cee108d12f25f09930c80f2f2a91238510-Ys0wNX_fw658_meitu_1.jpg" target="_blank"> <div class="mask transition3">无脸�?/div> <img src="img/ad01a45561cee108d12f25f09930c80f2f2a91238510-Ys0wNX_fw658_meitu_1.jpg"> </a> </li> <li class="photo photo_shows"> <a class="photo-item" href="img/61dd6485c9202285fc763bda7e79dbe389883401bed7b-wspi2M_fw658_meitu_7.jpg" target="_blank"> <div class="mask transition3">PC</div> <img src="img/61dd6485c9202285fc763bda7e79dbe389883401bed7b-wspi2M_fw658_meitu_7.jpg"> </a> </li> </ul> </ul></div></div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="img/jquery.imgbox.pack.js"></script> <script type="text/javascript"> $("a.photo-item").imgbox({'alignment':'center','zoomOpacity': true,'speedIn':0}); </script> 　　 <div id="rocket-to-top"> <div class="level-2"></div> <div class="level-3"></div> </div> <script src="js/top.js"></script> <script type="text/javascript" src="js/jquery.js"></script>   <footer class="site-info"> <p> <span>th是个小屁�?© 2017</span> <span class="split">|</span> <span>th是个小屁孩的技术小�?/span> </p> <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script> 本站总访问量<span id="busuanzi_value_site_pv"></span>�? 本站访客�?span id="busuanzi_value_site_uv"></span>人次 </footer>   <script src="/blog/js/app.js"></script>  <script type="text/javascript"> var duoshuoQuery = {short_name:'th720309'}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script>  </body> </html>