终于等到你个人博客网页模板--采用Html5+css3设计。适用于个人分享、个人日记、爱情、心情日记等内容。
一、html页面代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>终于等到你个人博客模板 - bokequ.com</title>
<meta name="keywords" content="QQ空间模板,终于等到你个人博客模板" />
<meta name="description" content="QQ空间:终于等到你个人博客模板分享下载" />
<link rel="stylesheet" href="css/global.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/iconfont.css" />
<script type="text/javascript" src="js/jquery.min_v1.0.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/ltie9.js"></script>
</head>
<body>
<!-- 头部开始 -->
<header>
<div class="header-box"> <a class="logo" href="http://www.bokequ.com/blog/11/"> <img src="images/logo.png" alt="终于等到你" /> </a> <span class="warning"> <img src="images/pic.png" alt="还好我没放弃" /> </span> </div>
</header>
<!-- end -->
<!-- 导航 -->
<nav class="nav">
<ul>
<li class="current"><a href="http://www.bokequ.com/blog/11/">主页</a></li>
<li><a href="#" rel="dropmenu2">日志</a></li>
<li><a href="#" rel="dropmenu3">相册</a></li>
<li><a href="http://www.bokequ.com/blog/11/shuo.html" rel="dropmenu4">心情说说</a></li>
<li><a href="#" rel="dropmenu5">模板分享</a></li>
<li><a href="#">个人档</a></li>
<li><a href="#">留言板</a></li>
</ul>
</nav>
<!-- end -->
<!-- 内容开始 -->
<section>
<!-- 首页轮播图 -->
<div class="banner-box">
<div class="banner"> <a href="#" class="a-img-ban"> <img class="img-ban" src="images/1.jpg" alt="终于等到你还好我没放弃" title="终于等到你还好我没放弃" > </a> <a href="#" class="a-img-ban"> <img class="img-ban" src="images/2.jpg" alt="关注我们"> </a> <a href="#" class="a-img-ban"> <img class="img-ban" src="images/3.jpg" alt="在最好的年纪遇到你,才算没有辜负自己"> </a> <a href="#" class="a-img-ban"> <img class="img-ban" src="http://www.bokequ.com/shuo/uploads/allimg/160708/1-160FQ63G5-53.jpg" alt="终于等到你吧"> </a>
<ul>
<li class="li-img"><img src="images/1.jpg" alt="终于等到你还好我没放弃"/></li>
<li class="li-img"><img src="images/2.jpg" alt="关注我们" /></li>
<li class="li-img"><img src="images/3.jpg" alt="在最好的年纪遇到你,才算没有辜负自己" /></li>
<li class="li-img"><img src="http://www.bokequ.com/shuo/uploads/allimg/160708/1-160FQ63G5-53.jpg" alt="终于等到你吧" /></li>
</ul>
</div>
<div class="art">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em> <span>推荐文章</span> </h2>
<ul class="art-list">
<li><a href="#" target="_blank"><em class="iconfont c-f26868">  </em><span>奇妙的时光之旅</span> </a> </li>
<li><a href="#" target="_blank"><em class="iconfont c-f26868">  </em><span>我很想打扰你 可是没有话题也没有勇气</span></a></li>
<li><a href="#" target="_blank"><em class="iconfont c-f26868">  </em><span>可以没有爱情，但是绝对不能没有朋友</span></a></li>
<li><a href="#" target="_blank"><em class="iconfont c-f26868">  </em><span>曾经拥有过便是幸福</span> </a> </li>
<li><a href="#" target="_blank"><em class="iconfont c-f26868">  </em><span>给回忆永不褪去的色彩</span> </a> </li>
<li><a href="#" target="_blank"><em class="iconfont c-f26868">  </em><span>遇见喜欢的人已经很难了</span> </a> </li>
<li><a href="#" target="_blank"><em class="iconfont c-f26868">  </em><span>我爱过一个人 背着满身的伤痕</span> </a> </li>
<li><a href="#" target="_blank"><em class="iconfont c-f26868">  </em><span>跌跌撞撞这一条爱情路，我们看到的只有荒芜。</span> </a> </li>
</ul>
</div>
</div>
<!-- 个人博客模板-->
<div class="work">
<h2><a href="http://www.bokequ.com/wo/share/" target="_blank">个人博客模板</a></h2>
<ul class="work-con">
<li> <a href="http://www.bokequ.com/time/" target="_blank"> <img src="http://www.bokequ.com/time/images/time.jpg" alt="小清新个人博客主页模板">
<div class="work_bak"></div>
<div class="work_info">
<h3>小清新个人博客主页模板</h3>
<p>一个人旅行，不理会繁杂的琐事，自由自在地，去体验一个城市，一段故事，留下一片欢笑。</p>
</div>
</a> </li>
<li> <a href="http://www.bokequ.com/blog/bozhao/" target="_blank"> <img src="images/0_3.jpg" alt="广州博兆集团—五龙山庄拓展训练">
<div class="work_bak"></div>
<div class="work_info">
<h3>广州博兆集团—五龙山庄拓展训练</h3>
<p>2016/3/6 星期日 天气晴，广州市博兆投资(集团)有限公司，五龙山庄拓展训练（半军事化培训训练+游戏+野炊+互动+高空挑战+毕业墙）</p>
</div>
</a> </li>
<li> <a href="http://www.bokequ.com/blog/12/" target="_blank"> <img src="http://www.bokequ.com/blog/12/images/art2.jpg" alt="看雪时间轴个人博客模板">
<div class="work_bak"></div>
<div class="work_info">
<h3>看雪时间轴个人博客模板</h3>
<p>看雪,是一种唯美的心境。这个冬季，放下疲惫的自己，一起看雪吧</p>
</div>
</a> </li>
<li> <a href="http://www.bokequ.com/winter/" target="_blank"> <img src="images/1_3.jpg" alt="遥望远方个人博客模板">
<div class="work_bak"></div>
<div class="work_info">
<h3>遥望远方个人博客模板</h3>
<p>心情日记_心情语录随笔 - 个人博客模板</p>
</div>
</a> </li>
<li> <a href="http://www.bokequ.com/blog/sep/" target="_blank"> <img src="images/2_3.jpg" alt="别了夏天">
<div class="work_bak"></div>
<div class="work_info">
<h3>别了夏天</h3>
<p>八月过,九月到,夏日去,金秋到。夏天一个充满多彩的季节,这个夏天,有点与众不同。</p>
</div>
</a> </li>
</ul>
</div>
<!-- 文章 -->
<article>
<div class="art-left">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em> <span>最新文章</span> </h2>
<div class="art-model">
<h3><a href="http://www.bokequ.com/blog/11/1.html" target="_blank">终于等到你(电视剧《咱们结婚吧》主题曲) - 张靓颖</a></h3>
<p class="dateview"> <span>发布时间：2016/10/18</span> <span>作者：bokequ.com</span> <span>分类：网络</span> </p>
<dl class="img-txt">
<dt> <a href="http://www.bokequ.com/blog/11/1.html"><img src="images/4.jpg" alt="终于等到你(电视剧《咱们结婚吧》主题曲) - 张靓颖" title="终于等到你(电视剧《咱们结婚吧》主题曲) - 张靓颖"></a> </dt>
<dd>
<p class="deatil"> 到了某个年纪你就会知道 一个人的日子真的难熬 渐渐开始尝到孤单的味道 时间在敲打着你的骄傲 过了某个路口你就会感到 彻夜陪你聊天的越来越少 厌倦了被寂寞追着跑 找个爱你的人就想托付终老 能陪我走一程的人有多少 愿意走完一生的更是寥寥 是...</p>
<a href="http://www.bokequ.com/blog/11/1.html" class="btn bg-f26868 c-fff" target="_blank">查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a href="http://www.bokequ.com/blog/11/2.html" target="_blank">（转载）爱情甜蜜英语句子</a></h3>
<p class="dateview"> <span>发布时间：2016/10/09</span> <span>作者：bokequ.com</span> <span>分类：个人博客分享</span> </p>
<dl class="img-txt">
<dt> <a href="http://www.bokequ.com/blog/11/2.html"><img src="images/18.jpg" alt="（转载）爱情甜蜜英语句子" title="（转载）爱情甜蜜英语句子"></a> </dt>
<dd>
<p class="deatil"> 1、爱情和谋杀一样，总是要暴露的。2、一只鸡蛋可以画无数次，一场爱情能吗?3、没有诺言的爱情，会让人浑身发冷。4、没有家的人，就可以把任何一个地方都当做家。5、只有以爱情为基础的婚姻才是合乎道德的。6、爱情使所有的人变成雄辩家这话说得绝对正确。</p>
<a href="http://www.bokequ.com/blog/11/2.html" class="btn bg-f26868 c-fff" target="_blank">查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a href="#">咱们结婚吧歌词_齐晨</a></h3>
<p class="dateview"> <span>发布时间：2016/10/19</span> <span>作者：bokequ.com</span> <span>分类：个人博客分享</span> </p>
<dl class="img-txt">
<dt> <a href="#"><img src="images/5.jpg" alt="咱们结婚吧歌词_齐晨" title="咱们结婚吧歌词_齐晨"></a> </dt>
<dd>
<p class="deatil"> 洁白的婚纱 手捧着鲜花 美丽得像童话 想起那年初夏 我为你牵挂 在一起就犯傻 丘比特轻轻飞过月光下 潘多拉她听到了回答 礼堂钟声 在敲打 幸福的密码 哦 My Love 咱们结婚吧 好想和你拥有一个家 这一生最美的梦啊 有你陪伴我同闯天涯 哦 My Love 咱们结婚吧 我会用一生去爱你的 我愿把一切都放下</p>
<a href="#" class="btn bg-f26868 c-fff">查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a href="http://www.bokequ.com/blog/7/2.html" target="_blank">(转载)时光悠悠 岁月无言</a></h3>
<p class="dateview"> <span>发布时间：2016/10/08</span> <span>作者：bokequ.com</span> <span>分类：个人博客分享</span> </p>
<dl class="img-txt">
<dt> <a href="http://www.bokequ.com/blog/7/2.html"><img src="images/6.jpg" alt="(转载)时光悠悠 岁月无言" title="(转载)时光悠悠 岁月无言"></a> </dt>
<dd>
<p class="deatil">时光荏苒，弹指间，还来不及回头细看，那些摇曳着盛开的花，已在记忆里开至荼蘼。往日已成云烟，就让那些斑驳的记忆随风飘散吧。给时光一个浅浅的回眸，拂去红尘的印记，抖落光阴的灰尘。剪一段清浅的时光，酿成一壶岁月的酒，于光影流年里，品味生活的恬静和淡然，看花开花谢，春去春回。</p>
<a href="http://www.bokequ.com/blog/7/2.html" class="btn bg-f26868 c-fff" target="_blank">查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a href="#" target="_blank">丢了自己,记得捡回来。</a></h3>
<p class="dateview"> <span>发布时间：2016/10/30</span> <span>作者：bokequ.com</span> <span>分类：个人博客分享</span> </p>
<dl class="img-txt">
<dt> <a href="#"><img src="http://www.bokequ.com/blog/6/images/45027.jpg" alt="丢了自己,记得捡回来。" title="丢了自己,记得捡回来。"></a> </dt>
<dd>
<p class="deatil"> 每一个成功者都是一位苦行僧，只有他们自己才知道，通往成功的道路上，到底有多少寂莫与不解。我心目中的幸福，绝不是转瞬即逝的瞬间，而是一种平平常常的持久的状态。它本身没有任何令人激动的地方，但它持续的时间愈长，就愈令人陶醉。</p>
<a href="#" class="btn bg-f26868 c-fff" target="_blank">查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a href="http://www.bokequ.com/winter/xqsb/10.html" target="_blank">致自己—真的好累！！</a></h3>
<p class="dateview"> <span>发布时间：2016/09/29</span> <span>作者：bokequ.com</span> <span>分类：个人博客分享</span> </p>
<dl class="img-txt">
<dt> <a href="http://www.bokequ.com/winter/xqsb/10.html"><img src="http://www.bokequ.com/winter/uploads/allimg/160206/1-160206152255.png" alt="致自己—真的好累！！" title="致自己—真的好累！！"></a> </dt>
<dd>
<p class="deatil"> 有时候,我真想喝醉一回，因为太多无奈。就是想大哭一场，因为心里憋屈。
有时侯，就是想疯癫一回，因为情绪低落。就是想宣泄一下，因为心情不爽。</p>
<a href="http://www.bokequ.com/winter/xqsb/10.html" class="btn bg-f26868 c-fff" target="_blank">查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a href="http://www.bokequ.com/shuo/aiqing/17.html" target="_blank">我试着去恨你，却想起你的笑容。</a></h3>
<p class="dateview"> <span>发布时间：2016/09/28</span> <span>作者：bokequ.com</span> <span>分类：个人博客分享</span> </p>
<dl class="img-txt">
<dt> <a href="http://www.bokequ.com/shuo/aiqing/17.html"><img src="http://www.bokequ.com/shuo/uploads/allimg/160714/1-160G41A627-50.jpg" alt="我试着去恨你，却想起你的笑容。" title="我试着去恨你，却想起你的笑容。"></a> </dt>
<dd>
<p class="deatil"> 1、爱情可以浪漫，但不要浪费;不要随便牵手，更不要随便放手。2、奶奶这是你走后的第一个清明节，我很想你。3、虽然你总想要我十分完美 做事不能半途而废。4、如果我是你的女朋友，我会给你起很多可爱又笨笨的外号，有事没事换着叫。5、雨水落下来是因为天空无法承受它的重量。6、我们的感情 , 是一个天大的笑话。</p>
<a href="http://www.bokequ.com/shuo/aiqing/17.html" class="btn bg-f26868 c-fff" target="_blank">查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a href="#">我就是没有理想。我的理想就是你。</a></h3>
<p class="dateview"> <span>发布时间：2016/09/28</span> <span>作者：bokequ.com</span> <span>分类：个人博客分享</span> </p>
<dl class="img-txt">
<dt> <a href="#"><img src="http://www.bokequ.com/shuo/uploads/allimg/160811/1-160Q1202613.jpg" alt="我就是没有理想。我的理想就是你。" title="我就是没有理想。我的理想就是你。"></a> </dt>
<dd>
<p class="deatil"> 也许所有的初恋都一样，它只是为后来的恋爱做一个序幕而已，可是到后来你才发现，你如果再想爱上一个人，是这样难这样难。难到你以为你已经不能再爱，不可再爱，难到你找到的下一个人，还以第一个人为蓝本。</p>
<a href="#" class="btn bg-f26868 c-fff" target="_blank">查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a href="#">爱情如命，生命似水。</a></h3>
<p class="dateview"> <span>发布时间：2016/09/28</span> <span>作者：bokequ.com</span> <span>分类：个人博客分享</span> </p>
<dl class="img-txt">
<dt> <a href="#"><img src="images/10.jpg" alt="爱情如命，生命似水。" title="爱情如命，生命似水。"></a> </dt>
<dd>
<p class="deatil"> 偶然的开始，莫名的结束，终究不懂，如何才能释怀曾经心动的微笑，曾经甜蜜的依偎，曾经情感的归依，怎能轻易割舍。为何你能如此说断就断，毫不留恋，难道曾经的心动只是彼此的错觉，耳畔的承诺只是随口敷衍。或许早已注定，这段恋爱只是今生短暂的插曲，无法续写为永恒。</p>
<a href="#" class="btn bg-f26868 c-fff">查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a href="#">世界上最容易被忘记的东西，就是爱情！</a></h3>
<p class="dateview"> <span>发布时间：2016/09/28</span> <span>作者：bokequ.com</span> <span>分类：个人博客分享</span> </p>
<dl class="img-txt">
<dt> <a href="#"><img src="images/8.jpg" alt="世界上最容易被忘记的东西，就是爱情！" title="世界上最容易被忘记的东西，就是爱情！"></a> </dt>
<dd>
<p class="deatil">幸福逻辑：1.爱所有人，信少数人，不欺负任何人。2.需要撒谎时尽量沉默，不得不撒谎时尽量不伤害别人。3.当我们做对了时没有人会记得，当我们做错了时自己不要忘记.4.幸福就是好的身体加坏的记忆。5.最酸的感觉不是吃醋而是没权吃醋。6.人生像杯茶，不会苦一辈子，但会苦一阵子。</p>
<a href="#" class="btn bg-f26868 c-fff">查看全文</a> </dd>
</dl>
</div>
</div>
<aside class="right-box">
<div class="art">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em><span>热门文章</span> </h2>
<ul class="art-list">
<li><a href="#"><em class="iconfont c-f26868">  </em><span>最动人的唯美爱情语录短句</span></a></li>
<li><a href="#"><em class="iconfont c-f26868">  </em><span>100条唯美爱情语录短句</span></a> </li>
<li><a href="#"><em class="iconfont c-f26868">  </em><span>经典爱情语录,唯美爱情语录,一句话爱情语录短句大全</span></a></li>
<li><a href="#"><em class="iconfont c-f26868">  </em><span>2016爱情经典语录</span></a></li>
<li><a href="#"><em class="iconfont c-f26868">  </em><span>一句话的简单心情说说</span></a></li>
<li><a href="#"><em class="iconfont c-f26868">  </em><span>2016张小娴经典爱情语录</span></a></li>
<li><a href="#"><em class="iconfont c-f26868">  </em><span>经典爱情语录|浪漫爱情语录</span></a> </li>
<li><a href="#"><em class="iconfont c-f26868">  </em><span>经典爱情语录大全2016最新版</span></a></li>
</ul>
</div>
<div class="toppic">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em><span>图文推荐</span> </h2>
<ul>
<li><a href="#"><img src="images/7.jpg" alt="有一种爱，明明是深爱，却表达不完美。">有一种爱，明明是深爱，却表达不完美。
<p>点击阅读更多...</p>
</a></li>
<li><a href="#"><img src="images/8.jpg" alt="遇见你，是我一生的幸运">遇见你，是我一生的幸运
<p>点击阅读更多...</p>
</a></li>
<li><a href="#"><img src="images/9.jpg" alt="有些事情本身我们无法控制，只好控制自己。">有些事情本身我们无法控制，只好控制自己。
<p>点击阅读更多...</p>
</a></li>
<li><a href="#"><img src="images/10.jpg" alt="爱情如命，生命似水。">爱情如命，生命似水。
<p>点击阅读更多...</p>
</a></li>
<li><a href="#"><img src="images/11.jpg" alt="世上所谓幸福，就是一个笨蛋遇到一个傻瓜">世上所谓幸福，就是一个笨蛋遇到一个傻瓜。
<p>点击阅读更多...</p>
</a></li>
</ul>
</div>
<div class="art mt20">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em> <span>热门标签</span> </h2>
<div class="of-h"> <a class="btn label" href="#">微信公众号</a> <a class="btn label" href="#">QQ空间</a> <a class="btn label" href="#">爱读书</a> <a class="btn label" href="#">QQ空间模板</a> <a class="btn label" href="#">个人空间</a> <a class="btn label" href="#">个人网站</a> <a class="btn label" href="#">空间主页</a> <a class="btn label" href="#">个人自媒体</a> <a class="btn label" href="#">博客网站</a> <a class="btn label" href="#">模板下载</a> <a class="btn label" href="#">HTML5学习</a> <a class="btn label" href="#">爱情语录</a> <a class="btn label" href="#">在一起吧</a> <a class="btn label" href="#" target="_blank">90后</a> <a class="btn label" href="#" target="_blank">时光记录吧</a> <a class="btn label" href="#" target="_blank">时光轴</a> <a class="btn label" href="#" target="_blank">未来的你</a> <a class="btn label" href="#" target="_blank">QQ心情语录</a> </div>
</div>
<div class="art mt20">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em> <span>关注我</span> </h2>
<div class="two-code"> <img src="images/weixin.png" alt="扫一扫，关注我们哦">
<p class="sao-txt">扫一扫二维码，交个朋友！</p>
</div>
</div>
<div class="art mt20">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em> <span>我的音乐</span> </h2>
<!--上传mp3音乐后，修改下面的audio src= 地址即可播放音乐-->
<div class="viny">
<ul>
<dl>
<dt class="art"><img src="images/7.jpg" alt="咱们结婚吧专辑"></dt>
<dd class="icon-song"><span></span>终于等到你</dd>
<dd class="icon-artist"><span></span>张靓颖</dd>
<dd class="icon-album"><span></span>专辑：《咱们结婚吧》</dd>
<dd class="music">
<audio src="http://www.bokequ.com/blog/11/images/dengdaoni.mp3" controls autoplay></audio>
</dd>
</dl>
</ul>
</div>
</div>
<div class="art mt20">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em> <span>友情链接</span> </h2>
<ul class="fri-link">
<li><a href="#">个人网站开发</a> </li>
<li><a href="http://www.yudouyudou.com/" target="_blank">余斗博客</a> </li>
<li><a href="http://www.bokequ.com/tag/dedecms" target="_blank">织梦cms</a> </li>
<li><a href="http://www.bokequ.com/category/web" target="_blank" rel="nofollow">web前端</a> </li>
<li><a href="#" target="_blank">迹忆博客</a> </li>
<li><a href="http://www.bokequ.com/time/man.html" target="_blank" rel="nofollow">慢生活</a> </li>
<li><a href="http://www.ludou.org/" target="_blank">露兜博客</a> </li>
<li><a href="http://www.bokequ.com/shuo/" target="_blank">唯美说说乐园</a> </li>
<li><a href="http://www.bokequ.com/time/" target="_blank">碎言碎语</a> </li>
<li><a href="#">周秋菊个人博客</a> </li>
<li><a href="https://www.sogou.com/web?query=bokequ.com&_asf=www.sogou.com&_ast=&w=01015002&p=40040108&ie=utf8&from=index-nologin&s_from=index&oq=&ri=1&sourceid=sugg&suguuid=&sut=0&sst0=1701572592385&lkt=0%2C0%2C0&sugsuv=00EB239F714181226421242669292901&sugtime=1701572592385" target="_blank">搜狗</a> </li>
</ul>
</div>
</aside>
</article>
</section>
<!-- end -->
<footer>Design By 2016/10/19 星期三 广州天气：阵雨多云 终于等到你<a href="http://www.bokequ.com/wo/" target="_blank">个人博客</a>模板 - bokequ.com 模板下载地址：更新中...<p>本网页为静态页面，如喜欢可用自己熟悉的程序套用，如dedecms、帝国CMS</p></footer>
</body>
</html>二、主页css样式
/*首页轮播图*/
section{background:#f8f6f2;width:1050px;margin:18px auto;overflow:hidden;border-radius:18px;}
.banner-box{width:1050px;display:inline-block;padding:10px;}
.banner{width:710px;height:300px;float:left;position:relative;}
.banner .a-img-ban{position:absolute;top:0;left:0;display:block;z-index:9;width:575px;height:295px;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity:0;
-webkit-transition: opacity 0.5s linear 0s;
-moz-transition: opacity 0.5s linear 0s;
-ms-transition: opacity 0.5s linear 0s;
-o-transition: opacity 0.5s linear 0s;
transition: opacity 0.5s linear 0s;}
.banner .a-img-ban .img-ban{width: 575px;height: 295px;position:absolute;z-index:9;}
.banner .img-ban-curr{
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity:1;
z-index:10;
}
.banner ul{width:125px;float:right;}
.banner ul li{width:90%;padding:4.85%;background:#eee;margin-bottom:5.5%;cursor:pointer;
-webkit-transition: background-color 0.3s linear 0s;
-moz-transition: background-color 0.3s linear 0s;
-ms-transition: background-color 0.3s linear 0s;
-o-transition: background-color 0.3s linear 0s;
transition: background-color 0.3s linear 0s;
height:56.5px;
}
.banner ul li.curr{background:#f0d0a9;}
.banner ul li img{width:100%;display:block;height:100%;}
.art{width:320px;float:right;}
.art-txt{line-height:30px;font-size:16px;border-bottom:2px solid #936636;padding-bottom:5px;}
.art-list li{font-size:13px;height:33px;line-height:33px;border-bottom:1px solid #eee;}
.art-list li a:hover{color:#f26868;}
.art-list em{width:25px;display:inline-block;float:left;line-height:33px;}
.art-list span{width:290px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;float:left;font-size:14px;}
/*个人博客*/
.work h2{width:110px;height:30px;line-height:30px;background:#956637;text-align:center;font-size:14px;}
.work h2 a{color:#fff;}
.work-con{overflow:hidden;border:1px solid #ccc;}
.work-con li{width:208px;float:left;padding:20px 0;}
.work-con li a{width:187px;height:122px;margin:0 auto;display:block;position:relative;overflow:hidden;}
.work-con li a .work_bak{position:absolute;top:-122px; left:0;width:100%;height:100%;background:#000;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
opacity:0.6;
z-index:9;
}
.work-con li a .work_info{width:100%;height:122px;position:absolute;top:-122px;left:0;z-index:10;overflow:hidden;}
.work-con li a .work_info h3{margin-top:5px;height:25px;font-size:15px;font-weight:normal;color:#FFF;width:100%;height:25px;line-height:25px;text-align:center;}
.work-con li a .work_info p{width:90%;font-size:13px;height:92px;line-height:17px;overflow:hidden;font-weight:normal;color:#FFF;text-indent: 2em;margin:5px auto;letter-spacing:2px;}
.work-con li img{width:185px;height:120px;border:1px solid #ccc;margin:0 auto;display:block;}
/*music*/
.viny{width:310px;margin-top:10px;}
.viny .art {
background: url(http://www.lmlblog.com/blog/12/images/vinyl.png) no-repeat left;
width: 130px;
float: left;
background-size: 120px;
margin-top:16px;
}
.viny dl dd {background:#888; color: #fff; line-height: 24px;padding-top:8px; }
.viny .art img { width: 90px; height: 90px; margin-left: 11px }
.viny dd span { width: 12px; height: 24px; margin-right: 7px; float: left; display: block; }
.icon-song span, .icon-artist span, .icon-album span, .icon-like span { background: url(http://www.lmlblog.com/blog/12/images/icons.png) no-repeat }
.icon-song span { background-position: -33px -344px }
.icon-artist span { background-position: -16px -344px }
.icon-album span { background-position: 0 -344px }
.icon-like span { background-position: -1px -299px; }
.icon-like a { color: #B5783E }
.icon-like a:hover { color: #FFF; text-decoration: underline }
.music audio { width: 100%; padding-top: 10px }
/*文章*/
article{padding-top:20px;}
.art-left{width:690px;overflow:hidden;float: left;border-right:1px dashed #ccc;padding-right:20px;}
.art-model{padding:18px;border-bottom:1px #ccc dashed;}
.art-model h3{font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.art-model h3 a b{font-weight:normal;}
.dateview{font-size:12px;color:#aaa;margin:5px 0;}
.img-txt{margin-top:10px;overflow:hidden;}
.img-txt img{border-radius:3px;width:200px;height:138px;display:block;}
.img-txt dt{float:left;margin-right:15px;}
.img-txt dd .deatil{font-size:14px;line-height:25px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical}
.btn{padding:5px 10px;border-radius:5px;text-align:center;font-size:12px;float:right;margin-top:10px;}
.label{border:1px solid #ccc;margin:8px;float: left;}
.btn:hover{text-decoration:none;}
.share li,.share .bdshare-button-style0-32 a{float: left;margin-right:20px;}
.share img{display:block;width:32px;height:32px;}
.two-code img{width:60%;margin:15px auto;display:block;}
.sao-txt{text-align:center;font-size:12px;}
.right-box{width:320px;float:right;}
.fri-link{overflow:hidden;}
.fri-link li{margin:6px;float:left;padding:8px 10px;height:22px;line-height:22px;font-size:14px;text-align:center;background:#996c39;border-radius: 0 15px;}
.fri-link li a{color:#fff;}
/*详情页*/
.curr-pos{font-size:14px;margin-bottom:20px;padding-left:18px;}
.detail-txt h1{text-align:center;font-size:17px;font-weight:bold;letter-spacing:1px;}
.txt-infr{text-align:center;font-size:12px;padding:10px 0;border-bottom:1px solid #eee;color:#777;}
.txt-infr .font{font-size:14px;}
.txt-infr span{padding-right:30px;}
.graf-box{font-size:14px;padding-top:10px;line-height:24px;}
.graf{text-indent:2em;margin-top:8px;}
.deatil-img{display:block;margin:10px auto;}
.search-box input{width:67%;height:32px;border:1px solid #ccc;font-family:"微软雅黑";padding:0 5% 0 8%;border-radius:5px 0 0 5px;float: left;background:url(../images/pic-13.png) no-repeat left center;background-size:8%;}
.search-btn{width:18%;height:34px;background:#565757;float: left;border-radius:0 5px 5px 0;color:#fff;font-size:14px;line-height:34px;font-family:"微软雅黑";cursor:pointer;}
.search-btn:hover{background:#f26868;}
.no-line{border:0;}
.column li{width:50%;float: left;text-align:center;margin-top:10px;}
.column a{width:80%;border:1px solid #ccc;border-radius:5px;padding:5px 0;}
.column a:hover{color:#fff;border:1px solid #f26868;background:#f26868;text-decoration:none;}
.column .current{color:#fff;border:1px solid #f26868;background:#f26868;}
.pre-next{padding-left:18px;padding-top:16px;font-size:14px;border-top:1px dashed #ccc;}
.graf-box{margin-bottom:20px;}
.graf-box p{-text-indent:2em;word-break:break-all;line-height:30px;margin-top:15px;margin-bottom:15px;}
.graf-box table td{padding:5px;border:1px solid #eaeaea;}
.graf-box p a{color:#337ab7;text-indent:0;padding:0 5px;}
.graf-box p.code{background:#565757;color:#FFF;padding:10px;font-size:16px;text-indent:0;margin-top:10px;margin-bottom:10px;}
.graf-box p.onmpw_code{background:#f0f8ff;padding:10px;border:1px solid #eaeaea;}
/*瀑布流*/
#main{width:710px;}
#main li{padding: 15px 0 0;float:left;height:245px;width:220px;margin-right:15px;}
#main li h3{font-size:14px;font-weight:600;width:195px;}
.intro{display:block;width:195px;height:44px;overflow:hidden;font-size:13px;border-bottom:1px solid #eee;padding-bottom:10px;}
.box{padding: 10px;border:1px solid #ccc;height:225px;border-radius: 3px;display:block;cursor:pointer;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;}
.box:hover{text-decoration:none;box-shadow: 0 0 6px #ccc;}
.box img{width:195px;height:122px;}
.like{font-size:12px;margin-right:10px;}
.like-box{padding-top:5px;overflow:hidden;}
/*end*/
.works{overflow:hidden;}
.list-tit{border:0;background:url(../images/pic-14.png) no-repeat left top;padding-left:30px;}
.page{margin:0 auto;display:block;overflow:hidden;width:100%;}
.page li{float:left;margin:50px 5px;font-size:14px;}
.page a,.page span{padding:2px 10px;border-radius:3px;border:1px solid #ccc;display:block;font-size:12px;}
.page a:hover{background:#f26868;text-decoration:none;color:#fff;}
.page .current{background:#f26868;color:#fff;}
/* 图文推荐 */
.toppic li{margin:10px 0;}
.toppic li img { width:100px; float: left; margin-right: 10px; }
.toppic ul li:nth-child(2) { margin: 15px 0; }
.toppic ul li a { display: block; width: 100%; clear: both; overflow: hidden }
.toppic ul li a:hover{ text-decoration:none;}
.toppic li p { color: #B5783E; padding-left: 110px; margin-top: 5px; }
.toppic li:first-child p { background-position: 90px -263px; }
.toppic li:nth-child(2) p { background-position: 90px -283px; }
.toppic li:last-child p { background-position: 90px -301px; }
#ds-reset{padding-left:20px;}
扫一扫
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
