这是一款关于心情日记随笔个人博客模板，心情语录随笔个人博客模板主要记录心情日记的博客网站。采用html5+css3设计，模板基于dedecms程序搭建测试。
1、主页html代码
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="gb2312">
<title>心情日记_心情语录随笔 - 个人博客模板</title>
<meta name="keywords" content="心情语录随笔,个人博客模板" />
<meta name="description" content="心情日记,总有一些文字,触动心灵,总有一句情话美到窒息,总有一段心语,痛彻心扉,总有一些句子,说到你的心坎。" />
<link href="http://www.bokequ.com/winter/templets/xq/style/base.css" rel="stylesheet">
<link href="http://www.bokequ.com/winter/templets/xq/style/index.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://www.bokequ.com/winter/templets/xq/js/modernizr.js"></script>
<![endif]-->
</head>
<body>
<header>
<img src="http://www.bokequ.com/winter/templets/xq/images/logo.png" alt="心情语录随笔" width="170" height="60">
<h1><a href="http://www.bokequ.com/winter/">心情日记_心情语录随笔-个人博客模板</a></h1>
<p>看了太多的励志故事,突然发现梦想还是与自己都无关。</p>
</header>
<nav id="nav">
<ul>
<li><a href="http://www.bokequ.com/winter/" >网站首页</a></li>
<li><a href="http://www.bokequ.com/winter/wmyl/" title="唯美语录">唯美语录</a></li>
<li><a href="http://www.bokequ.com/winter/xqsb/" title="心情随笔">心情随笔</a></li>
<li><a href="#" title="心情语录">心情语录</a></li>
<li><a href="http://www.bokequ.com/wo/life/diary/" target="_blank" title="生活笔记">生活笔记</a></li>
<li><a href="http://www.bokequ.com/wo/life/man/" target="_blank" title="慢生活">慢生活</a></li>
<li><a href="http://www.bokequ.com/wo/e/tool/gbook/?bid=1" title="留言板">给我留言</a></li>
</ul>
</nav>
<div class="article">
<div class="content">
<h3><p><span>推荐</span>文章 New Blog</p></h3>
<a href="http://www.bokequ.com/winter/xqsb/9.html" target="_blank"><img src="http://www.bokequ.com/winter/uploads/allimg/160206/1-160206150424-lp.png" alt="男女清晨4不要，晚上5不要！" title="男女清晨4不要，晚上5不要！" width="315" height="205" class="topimg"></a>
<ul class="topblog">
<li><a href="http://www.bokequ.com/winter/xqsb/14.html" title="你人再好有屁用！" target="_blank">你人再好有屁用！<span>你人再好： 不是每个人都会喜欢你， 有人羡慕你，...</span></a></li>
<li><a href="http://www.bokequ.com/winter/xqsb/10.html" title="致自己—真的好累！！" target="_blank">致自己—真的好累！！<span>有时候, 我真想喝醉一回， 因为太多无奈。 就是想...</span></a></li>
<li><a href="http://www.bokequ.com/winter/xqsb/8.html" title="你越是对别人好，别人越是不懂珍惜！" target="_blank">你越是对别人好，别人越是不懂珍<span>有时候也有点恨自己 怎么就这么好欺负 总是轻易就...</span></a></li>
</ul>
<h3><p><span>美文</span> Share</p></h3>
<ul class="template">
<li><a href="http://www.bokequ.com/winter/xqsb/37.html" title="这世界上有两种东西，是别人抢不走的！" target="_blank"><img src="http://www.bokequ.com/winter/uploads/allimg/160924/1-1609240U433.jpg" alt="这世界上有两种东西，是别人抢不走的！"></a><span></span></li>
<li><a href="http://www.bokequ.com/winter/wmyl/36.html" title="手机被偷，一个短信让小偷跑步送回" target="_blank"><img src="http://www.bokequ.com/winter/uploads/allimg/160816/1-160Q60H537.jpg" alt="手机被偷，一个短信让小偷跑步送回"></a><span></span></li>
<li><a href="http://www.bokequ.com/winter/xqsb/35.html" title="我 累 了 ……" target="_blank"><img src="http://www.bokequ.com/winter/uploads/allimg/160816/1-160Q60GR9.jpg" alt="我 累 了 ……"></a><span></span></li>
<li><a href="http://www.bokequ.com/winter/wmyl/34.html" title="忙是为了生活，慢是为了享受生活" target="_blank"><img src="http://www.bokequ.com/winter/uploads/allimg/160815/1-160Q50Z244.jpg" alt="忙是为了生活，慢是为了享受生活"></a><span></span></li>
</ul>
<h2 class="newt"><span>♡</span>最新文章：<a href="http://www.bokequ.com/winter/xqsb/37.html">这世界上有两种东西，是别人抢不走</a>
</h2>
<div class="bloglist">
<h2><a title="手机被偷，一个短信让小偷跑步送回" href="http://www.bokequ.com/winter/wmyl/36.html" target="_blank">手机被偷，一个短信让小偷跑步送回</a></h2>
<ul>
<p>01. 一哥们在火车站附近手机被偷了，马上请朋友给自己手机发了一条信息：哥，火车快开了，我等不到你，先上车了!欠你的两万块钱，我放在火车站寄存处A19号柜子里 ，密码是1685。 半小时后，偷手机的二货在火车站寄存处A19号柜子前被生擒......</p>
<p class="readmore"><a title="手机被偷，一个短信让小偷跑步送回" href="http://www.bokequ.com/winter/wmyl/36.html" target="_blank">阅读全文>></a></p>
<p class="dateview"><span>16-08-16</span><span>作者：心情语录随笔</span><span>文章来源：网络搜集</span><span>分类：[<a href='http://www.bokequ.com/winter/wmyl/'>唯美语录</a>]</span></p>
</ul>
<h2><a title="我 累 了 ……" href="http://www.bokequ.com/winter/xqsb/35.html" target="_blank">我 累 了 ……</a></h2>
<ul>
<p>人这一生活得不容易： 从早晨到天黑， 忙忙碌碌就是一天; 从年初到年尾， 奔奔波波就是一年。 人这一辈子过得很吃力： 脚下的路， 步履艰辛也要走完; 肩上的担， 纵有千斤也要承担。 为了一家老小， 常常忙得疲惫不堪; 为了生活富裕， 总......</p>
<p class="readmore"><a title="我 累 了 ……" href="http://www.bokequ.com/winter/xqsb/35.html" target="_blank">阅读全文>></a></p>
<p class="dateview"><span>16-08-16</span><span>作者：心情语录随笔</span><span>文章来源：网络搜集</span><span>分类：[<a href='http://www.bokequ.com/winter/xqsb/'>心情随笔</a>]</span></p>
</ul>
<h2><a title="忙是为了生活，慢是为了享受生活" href="http://www.bokequ.com/winter/wmyl/34.html" target="_blank">忙是为了生活，慢是为了享受生活</a></h2>
<ul>
<p>在这个快速多变的社会，人们崇拜效率和高产，认为忙才能证明一个人的价值，人们恐惧无所事事，因为那意味着自己毫无价值，人们一有空闲时间就迫不及待地用各种忙来“充实”自己的生活，追赶社会的步伐。......</p>
<p class="readmore"><a title="忙是为了生活，慢是为了享受生活" href="http://www.bokequ.com/winter/wmyl/34.html" target="_blank">阅读全文>></a></p>
<p class="dateview"><span>16-08-15</span><span>作者：心情语录随笔</span><span>文章来源：网络搜集</span><span>分类：[<a href='http://www.bokequ.com/winter/wmyl/'>唯美语录</a>]</span></p>
</ul>
<h2><a title="成熟的标志不是年龄，而是心态！" href="http://www.bokequ.com/winter/wmyl/33.html" target="_blank">成熟的标志不是年龄，而是心态！</a></h2>
<ul>
<p>人的成熟不是年龄， 而是心态; 心的成熟不是遇到的事情多， 而是对待事情的态度。 人活在群体中， 看看别人的错，再想想自己的过; 看看他人的非，再谅谅他人的难。 人心越淡，伤害就越少; 心有多宽，快乐就有多少。 人生， 不可能时时顺......</p>
<p class="readmore"><a title="成熟的标志不是年龄，而是心态！" href="http://www.bokequ.com/winter/wmyl/33.html" target="_blank">阅读全文>></a></p>
<p class="dateview"><span>16-08-15</span><span>作者：心情语录随笔</span><span>文章来源：网络搜集</span><span>分类：[<a href='http://www.bokequ.com/winter/wmyl/'>唯美语录</a>]</span></p>
</ul>
<h2><a title="人生没有假如……" href="http://www.bokequ.com/winter/wmyl/32.html" target="_blank">人生没有假如……</a></h2>
<ul>
<p>假如早一点明白， 假如那时更努力一点 假如更沉得住一点，假如不那么任性 假如大度一点 假如能好好地对待对方 假如我们能够重来 如果这世界上真的有假如存在 那会是怎样的情景 是好的，还是坏的 我们只能想象 生活在没有假如的世界 我们......</p>
<p class="readmore"><a title="人生没有假如……" href="http://www.bokequ.com/winter/wmyl/32.html" target="_blank">阅读全文>></a></p>
<p class="dateview"><span>16-08-14</span><span>作者：心情语录随笔</span><span>文章来源：网络搜集</span><span>分类：[<a href='http://www.bokequ.com/winter/wmyl/'>唯美语录</a>]</span></p>
</ul>
<h2><a title="活着就是胜利，挣钱只是游戏！" href="http://www.bokequ.com/winter/xqsb/31.html" target="_blank">活着就是胜利，挣钱只是游戏！</a></h2>
<ul>
<p>活着就是胜利，挣钱只是游戏， 健康才是目的，快乐更是真谛! 百年之后，你睡你的，我睡我的， 再美丽的语言也无法跟你沟通， 因为我们要沉睡，睡很久，很久 所以，身边的人要相互珍惜， 因为每个世人的时间都越來越少， 最终还是要互相分......</p>
<p class="readmore"><a title="活着就是胜利，挣钱只是游戏！" href="http://www.bokequ.com/winter/xqsb/31.html" target="_blank">阅读全文>></a></p>
<p class="dateview"><span>16-08-14</span><span>作者：心情语录随笔</span><span>文章来源：网络搜集</span><span>分类：[<a href='http://www.bokequ.com/winter/xqsb/'>心情随笔</a>]</span></p>
</ul>
<h2><a title="相遇在天，相守在人，珍惜在心！" href="http://www.bokequ.com/winter/wmyl/30.html" target="_blank">相遇在天，相守在人，珍惜在心！</a></h2>
<ul>
<p>再好的朋友，缺少联系也会淡; 再深的感情，不懂经营也会断。多少已散的宴席，是望不到深情而后会无期;多少擦肩的缘分，是得不到在乎而悄然离去。......</p>
<p class="readmore"><a title="相遇在天，相守在人，珍惜在心！" href="http://www.bokequ.com/winter/wmyl/30.html" target="_blank">阅读全文>></a></p>
<p class="dateview"><span>16-08-13</span><span>作者：心情语录随笔</span><span>文章来源：网络搜集</span><span>分类：[<a href='http://www.bokequ.com/winter/wmyl/'>唯美语录</a>]</span></p>
</ul>
<h2><a title="人生不求完美，但求无悔。" href="http://www.bokequ.com/winter/xqsb/29.html" target="_blank">人生不求完美，但求无悔。</a></h2>
<ul>
<p>一个人，就算再留念，如果你抓不住，就要适时放手，久了你会神伤，会心碎。任何事，任何人，都会成为过去，不要跟它过不去，无论多难，我们都要学会抽身而退。......</p>
<p class="readmore"><a title="人生不求完美，但求无悔。" href="http://www.bokequ.com/winter/xqsb/29.html" target="_blank">阅读全文>></a></p>
<p class="dateview"><span>16-08-13</span><span>作者：心情语录随笔</span><span>文章来源：网络搜集</span><span>分类：[<a href='http://www.bokequ.com/winter/xqsb/'>心情随笔</a>]</span></p>
</ul>
<h2><a title="你越是迁就，别人越是得寸进尺" href="http://www.bokequ.com/winter/wmyl/28.html" target="_blank">你越是迁就，别人越是得寸进尺</a></h2>
<ul>
<p>对待朋友，宽容却不纵容;对待感情，珍惜却别肆宠。你不得已的苦衷，也需要有人懂;你不想说的心情，更需要有人疼。......</p>
<p class="readmore"><a title="你越是迁就，别人越是得寸进尺" href="http://www.bokequ.com/winter/wmyl/28.html" target="_blank">阅读全文>></a></p>
<p class="dateview"><span>16-06-26</span><span>作者：心情日记</span><span>文章来源：网络搜集</span><span>分类：[<a href='http://www.bokequ.com/winter/wmyl/'>唯美语录</a>]</span></p>
</ul>
<h2><a title="回忆，就让它停在过去。" href="http://www.bokequ.com/winter/xqsb/27.html" target="_blank">回忆，就让它停在过去。</a></h2>
<ul>
<p>有些人，虽然淡出了你的视线，有些事，虽然模糊了你的记忆，可是，忘不掉的始终还会牵挂，远了也是烙印，久了依然惦记。......</p>
<p class="readmore"><a title="回忆，就让它停在过去。" href="http://www.bokequ.com/winter/xqsb/27.html" target="_blank">阅读全文>></a></p>
<p class="dateview"><span>16-06-26</span><span>作者：心情日记</span><span>文章来源：网络搜集</span><span>分类：[<a href='http://www.bokequ.com/winter/xqsb/'>心情随笔</a>]</span></p>
</ul>
</div>
</div>
<aside>
<nav>
<ul>
<li><a href="http://www.bokequ.com/category/web" title="html" target="_blank">HTML</a></li>
<li><a href="http://www.bokequ.com/tag/html-css" title="CSS" target="_blank">CSS</a></li>
<li><a href="http://www.bokequ.com/tag/wordpress" title="WORDPRESS" target="_blank">WORDPRESS</a></li>
<li><a href="http://www.bokequ.com/tag/dedecms" title="织梦CMS" target="_blank">织梦CMS</a></li>
<li><a href="http://www.bokequ.com/" title="个人博客网站" target="_blank">个人博客网站</a></li>
<li><a href="http://www.bokequ.com/wo/" title="关于我" target="_blank">关于我</a></li>
</ul>
</nav>
<p class="slider">
我们都在改变，从简单到复杂，从单纯到圆滑;我们都想不变，一直的善良着，永远的耿直着。
</p>
<div class="vcard">
<a href="#" target="_blank" title="个人档案"><img src="http://www.bokequ.com/winter/templets/xq/images/photo.jpg" alt="MAOLAI博客" class="photo" height="128" width="126"></a>
<p class="nickname">网名：草戊水来</p>
<p class="role">职业：网站运营</p>
<p class="role">爱好：上网、骑自行车</p>
<p class="url">主页：bokequ.com</p>
<p class="address">现居：广州天河</p>
</div>
<p class="qun">一种快乐，一种美德</p>
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_weixin" data-cmd="weixin" title=""></a><a href="#" class="bds_qzone" data-cmd="qzone" title="QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="豆瓣网"></a><a href="#" class="bds_renren" data-cmd="renren" title="人人网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{},"image":{"viewList":["weixin","qzone","tsina","douban","renren"],"viewText":"到：","viewSize":"24"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["weixin","qzone","tsina","douban","renren"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
<div class="hotcomm">
<h2>精彩文章推荐</h2>
<ul><li><a title="人生就像蒲公英， 看似自由，却身不由己。" href="http://www.bokequ.com/winter/xqsb/26.html">人生就像蒲公英， 看似自由，却</a></li>
<li><a title="不必仰望别人，自己亦是风景。" href="http://www.bokequ.com/winter/xqsb/24.html">不必仰望别人，自己亦是风景。</a></li>
<li><a title="如果2016年可以放纵一回,你最想做什么？" href="http://www.bokequ.com/winter/wmyl/23.html">如果2016年可以放纵一回,你最想</a></li>
<li><a title="很漂亮的六段话，送给崭新的自己。" href="http://www.bokequ.com/winter/wmyl/21.html">很漂亮的六段话，送给崭新的自己</a></li>
<li><a title="和什么样的人在一起，真的很重要。" href="http://www.bokequ.com/winter/xqsb/16.html">和什么样的人在一起，真的很重要</a></li>
<li><a title="做人，自己强，比什么都强！" href="http://www.bokequ.com/winter/wmyl/13.html">做人，自己强，比什么都强！</a></li>
</ul>
</div>
<div class="newbolg">
<h2>随机阅读</h2>
<ul class="rank">
<li><a title="这世界上有两种东西，是别人抢不走的！" href="http://www.bokequ.com/winter/xqsb/37.html">这世界上有两种东西，是别人抢不</a></li>
<li><a title="手机被偷，一个短信让小偷跑步送回" href="http://www.bokequ.com/winter/wmyl/36.html">手机被偷，一个短信让小偷跑步送</a></li>
<li><a title="我 累 了 ……" href="http://www.bokequ.com/winter/xqsb/35.html">我 累 了 ……</a></li>
<li><a title="忙是为了生活，慢是为了享受生活" href="http://www.bokequ.com/winter/wmyl/34.html">忙是为了生活，慢是为了享受生活</a></li>
<li><a title="成熟的标志不是年龄，而是心态！" href="http://www.bokequ.com/winter/wmyl/33.html">成熟的标志不是年龄，而是心态！</a></li>
<li><a title="人生没有假如……" href="http://www.bokequ.com/winter/wmyl/32.html">人生没有假如……</a></li>
<li><a title="活着就是胜利，挣钱只是游戏！" href="http://www.bokequ.com/winter/xqsb/31.html">活着就是胜利，挣钱只是游戏！</a></li>
<li><a title="相遇在天，相守在人，珍惜在心！" href="http://www.bokequ.com/winter/wmyl/30.html">相遇在天，相守在人，珍惜在心！</a></li>
<li><a title="人生不求完美，但求无悔。" href="http://www.bokequ.com/winter/xqsb/29.html">人生不求完美，但求无悔。</a></li>
<li><a title="你越是迁就，别人越是得寸进尺" href="http://www.bokequ.com/winter/wmyl/28.html">你越是迁就，别人越是得寸进尺</a></li>
<li><a title="回忆，就让它停在过去。" href="http://www.bokequ.com/winter/xqsb/27.html">回忆，就让它停在过去。</a></li>
<li><a title="人生就像蒲公英， 看似自由，却身不由己。" href="http://www.bokequ.com/winter/xqsb/26.html">人生就像蒲公英， 看似自由，却</a></li>
</ul>
<h2>点击排行</h2>
<ul class="rank">
<li><a title="这世界上有两种东西，是别人抢不走的！" href="http://www.bokequ.com/winter/xqsb/37.html">这世界上有两种东西，是别人抢不</a></li>
<li><a title="手机被偷，一个短信让小偷跑步送回" href="http://www.bokequ.com/winter/wmyl/36.html">手机被偷，一个短信让小偷跑步送</a></li>
<li><a title="我 累 了 ……" href="http://www.bokequ.com/winter/xqsb/35.html">我 累 了 ……</a></li>
<li><a title="忙是为了生活，慢是为了享受生活" href="http://www.bokequ.com/winter/wmyl/34.html">忙是为了生活，慢是为了享受生活</a></li>
<li><a title="成熟的标志不是年龄，而是心态！" href="http://www.bokequ.com/winter/wmyl/33.html">成熟的标志不是年龄，而是心态！</a></li>
<li><a title="人生没有假如……" href="http://www.bokequ.com/winter/wmyl/32.html">人生没有假如……</a></li>
<li><a title="活着就是胜利，挣钱只是游戏！" href="http://www.bokequ.com/winter/xqsb/31.html">活着就是胜利，挣钱只是游戏！</a></li>
<li><a title="相遇在天，相守在人，珍惜在心！" href="http://www.bokequ.com/winter/wmyl/30.html">相遇在天，相守在人，珍惜在心！</a></li>
<li><a title="人生不求完美，但求无悔。" href="http://www.bokequ.com/winter/xqsb/29.html">人生不求完美，但求无悔。</a></li>
<li><a title="你越是迁就，别人越是得寸进尺" href="http://www.bokequ.com/winter/wmyl/28.html">你越是迁就，别人越是得寸进尺</a></li>
<li><a title="回忆，就让它停在过去。" href="http://www.bokequ.com/winter/xqsb/27.html">回忆，就让它停在过去。</a></li>
<li><a title="人生就像蒲公英， 看似自由，却身不由己。" href="http://www.bokequ.com/winter/xqsb/26.html">人生就像蒲公英， 看似自由，却</a></li>
</ul>
</div>
<div class="tag_yun">
<h2>热门标签</h2>
<div class="tag_yun_list">
<a style="font-size:22.3316356371px;color:#c22153;" title="自己(17)" rel="nofollow" href="#2.html">自己</a>
<a style="font-size:23.2139116933px;color:#5f67ef;" title="生活(15)" rel="nofollow" href="#1.html">生活</a>
<a style="font-size:17.2958202921px;color:#ac23e8;" title="清晨(1)" rel="nofollow" href="#5.html">清晨</a>
<a style="font-size:12.6943027133px;color:#49a8e4;" title="珍惜(3)" rel="nofollow" href="#3.html">珍惜</a>
<a style="font-size:13.735254477px;color:#dc8645;" title="男女(1)" rel="nofollow" href="#4.html">男女</a>
<a style="font-size:19.5245757142px;color:#e897a;" title="人生(5)" rel="nofollow" href="#10.html">人生</a>
<a style="font-size:24.6616347675px;color:#c2575;" title="今天(1)" rel="nofollow" href="#15.html">今天</a>
<a style="font-size:21.9936621054px;color:#642e19;" title="幸福(2)" rel="nofollow" href="#11.html">幸福</a>
<a style="font-size:20.3682852731px;color:#2f2f94;" title="朋友(2)" rel="nofollow" href="#8.html">朋友</a>
<a style="font-size:19.4007247636px;color:#747068;" title="我们(1)" rel="nofollow" href="#6.html">我们</a>
<a style="font-size:16.327059663px;color:#2a4094;" title="时间(2)" rel="nofollow" href="#7.html">时间</a>
<a style="font-size:24.0387292838px;color:#7d8a1b;" title="风景(1)" rel="nofollow" href="#19.html">风景</a>
<a style="font-size:18.8024140998px;color:#6d4a49;" title="旅行(1)" rel="nofollow" href="#18.html">旅行</a>
<a style="font-size:16.6234506805px;color:#558225;" title="自由(1)" rel="nofollow" href="#21.html">自由</a>
<a style="font-size:12.2360842618px;color:#3a67d4;" title="明天(2)" rel="nofollow" href="#14.html">明天</a>
<a style="font-size:23.3266672604px;color:#7f7287;" title="微笑(1)" rel="nofollow" href="#12.html">微笑</a>
<a style="font-size:23.7573133154px;color:#fa438f;" title="随缘(1)" rel="nofollow" href="#9.html">随缘</a>
<a style="font-size:23.223801394px;color:#6f90cb;" title="离别(1)" rel="nofollow" href="#23.html">离别</a>
<a style="font-size:24.1475157798px;color:#88b58;" title="2016(1)" rel="nofollow" href="#16.html">2016</a>
<a style="font-size:19.1757021789px;color:#1d499a;" title="回忆(1)" rel="nofollow" href="#22.html">回忆</a>
<a style="font-size:13.4820058526px;color:#866aee;" title="游戏(1)" rel="nofollow" href="#25.html">游戏</a>
<a style="font-size:18.4151002483px;color:#1b6a2;" title="拒绝(1)" rel="nofollow" href="#20.html">拒绝</a>
<a style="font-size:12.0116849373px;color:#375a4;" title="你(2)" rel="nofollow" href="#17.html">你</a>
<a style="font-size:12.8341487017px;color:#809cae;" title="努力(1)" rel="nofollow" href="#13.html">努力</a>
<a style="font-size:21.9513079633px;color:#a5434;" title="年龄(1)" rel="nofollow" href="#27.html">年龄</a>
<a style="font-size:22.2070941769px;color:#7a66ca;" title="成熟(1)" rel="nofollow" href="#26.html">成熟</a>
<a style="font-size:20.5869010215px;color:#16221;" title="心态(1)" rel="nofollow" href="#28.html">心态</a>
<a style="font-size:15.6373947253px;color:#91b8dd;" title="短信(1)" rel="nofollow" href="#30.html">短信</a>
<a style="font-size:16.4652507009px;color:#5c5cc9;" title="胜利(1)" rel="nofollow" href="#24.html">胜利</a>
<a style="font-size:21.8612570712px;color:#657329;" title="手机(1)" rel="nofollow" href="#29.html">手机</a>
<a style="font-size:12.2911257623px;color:#ff15b4;" title="知识(1)" rel="nofollow" href="#32.html">知识</a>
<a style="font-size:13.1129185642px;color:#ed2abc;" title="梦想(1)" rel="nofollow" href="#31.html">梦想</a>
</div>
</div>
</aside>
</div>
<footer>
<div id="copright"><span>本站基于dedecms程序搭建，用于个人博客模板测试，内容均来源于网络搜集。
<a target="_blank" href="http://m.bokequ.com/moban/1229.html">模板源码下载</a>
</div>
</footer>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.bokequ.com/winter/templets/xq/js/snowy.js"></script>
<style type="text/css">.snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}</style>
<div class="snow-container"></div>
<script language="javascript">
var obj=null;
var As=document.getElementById('nav').getElementsByTagName('a');
obj = As[0];
for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0)
obj=As[i];}
obj.id='nav_current'
</script>
</body>
</html>2、css样式
@charset "gb2312";h3{border-bottom:#FFF 1px solid;width:100%;overflow:hidden;font-size:14px;margin:0 0 10px;font-family:"微软雅黑";display:block;clear:both}h3 p{background:#474645;width:180px;height:25px;margin:15px 0 0 10px;line-height:25px;color:#fff;text-align:center;box-shadow:#999 4px 5px 1px;}h3 p span{color:#fd5daa}h3:nth-child(2n) p span{color:#38b3d4}.topimg{margin-left:10px;clear:left;float:left}.topblog{background:url(http://www.bokequ.com/winter/images/libg.png) no-repeat 15px 15px;border:#dddddd 1px solid;border-left:0;border-bottom:0;line-height:26px;float:right;width:55%;margin-right:5px;overflow:hidden;}.topblog li{text-align:center;border-bottom:#dddddd 1px solid;border-top:#FFF 1px solid;font-family:"微软雅黑"}.topblog li span{display:block;font-size:12px;color:#999999;font-weight:normal}.topblog li a{color:#ef7000;font-size:20px;font-weight:bold;display:block;height:52px;padding:7px 0;}.topblog li a:hover{background:rgba(255,255,255,0.5);color:#000}.template{padding:0 0 0 20px;overflow:hidden;margin:0 5px}.template li{margin:11px;float:left;}.template li img{width:142px;height:80px;background:#FFF;padding:4px;box-shadow:0px 0px 2px rgba(0,0,0,.5);display:block;transition:All 1s ease;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease;}.template li img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);}.tags{overflow:hidden;}.tags section{width:330px;float:left;font-family:"微软雅黑";margin:15px 20px;display:inline}.tags h2{color:#333;font-size:18px;border-bottom:#b4b1af 2px solid;background:url(../images/libg.png) -60px -243px no-repeat;line-height:40px;height:40px;}.tags h2 a{float:right;background:url(../images/libg.png) 0 -258px no-repeat;width:20px;height:30px}.tags h2 span{color:#b41828;}.tags ul{margin:10px;border-bottom:#bebdbb 1px dashed;overflow:hidden;padding:10px 0 20px 0}.tags ul li{color:#FFF;display:inline;line-height:30px;height:30px}.tags ul li a{color:#575654;padding:3px 6px;}.tags ul li a:hover{color:#F00;text-decoration:underline}.tags section:nth-child(1) ul li:nth-child(1) a{background:#f11139;color:#FFF}.tags section:nth-child(2) ul li:nth-child(1) a{background:#00b6e5;color:#FFF}.newt{padding-left:20px;font-size:16px;font-family:"微软雅黑";}.newt span{color:#E7005C;padding-right:10px;}.newt a{color:#524141;text-shadow:1px 1px #fff;font-size:16px;}.newt a:after{content:url(../images/new.gif);}.bloglist{width:99%;background:#f1f1f1;margin:20px 5px;border-top:#383838 4px solid;clear:both;overflow:hidden;padding:20px 0 0 0}.bloglist h2{background:url(../images/libg.png) 10px -294px no-repeat;line-height:29px;height:29px;font-size:14px;color:#3b3b3b;padding:10px 0 10px 50px;}.bloglist h2 a{color:#3b3b3b;display:block;width:80%;}.bloglist h2 a:hover{width:90%;background:#ccc;cursor:pointer;text-shadow:#fff 1px 1px 1px;padding-left:40px}.bloglist ul{line-height:24px;padding:0 10px;margin-bottom:20px}.bloglist ul p{text-indent:2em}.readmore{margin:10px}.readmore a{color:#e84545;}.readmore a:hover{color:#333}.dateview{background:#f6f6f6 url(../images/libg.png) 10px -340px no-repeat;line-height:24px;height:24px;color:#838383;margin:0 10px}.dateview a{color:#838383;}.dateview a:hover{color:#333;}.dateview span{margin:0 10px}aside nav{height:150px;overflow:hidden;}aside nav ul{list-style-type:none;text-align:center;}aside nav ul li{float:left;width:90px;line-height:74px;height:74px;margin-right:2px;margin-bottom:2px;}aside nav ul li a{display:block;color:#FFF;transition:All 1s ease;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease;}aside nav ul li a:hover{background:rgba(255,255,255,0.2);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}aside nav ul li:nth-child(1){background:#71a532;}aside nav ul li:nth-child(2){background:#ff9900}aside nav ul li:nth-child(3){background:#8c49ad}aside nav ul li:nth-child(4){background:#e7769e}aside nav ul li:nth-child(5){background:#a98659}aside nav ul li:nth-child(6){background:#63a8e8}.slider{overflow:hidden;padding:40px 20px;line-height:25px;background:#a6926c;margin:10px 0;font-size:15px;}.slider a{color:#FFF;}.slider a:hover{color:#FFC}.vcard img{float:left;clear:right;margin-right:5px}.vcard p{line-height:25px}.newbolg{margin:10px 0 0 0;}.newbolg h2{color:#FFF;background:#a6926c;line-height:36px;font-weight:normal;padding:0 0 0 15px;height:36px;font-size:14px;}.newbolg h2 a{color:#FFF}.newbolg ul{padding-left:20px;background:url(../images/hot_title_bg.gif) 0 8px no-repeat}.newbolg ul li{line-height:31px;clear:both;padding-left:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.newbolg ul li a{color:#333;}.newbolg ul li a:hover{color:#F00;text-decoration:underline}.hotcomm{clear:both;}.hotcomm h2{border-bottom:#333 2px solid;font-size:14px;line-height:40px;height:40px;color:#383734}.hotcomm ul{list-style-type:none;background:url(../images/libg.png) 0 -395px no-repeat;margin-top:10px}.hotcomm ul li a{display:block;color:#525252;padding-left:30px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:36px;height:36px;overflow:hidden}.hotcomm ul li a:hover{text-decoration:underline;color:#F00}.tag_yun{margin:10px 0 0 0;border:#a6926c;}.tag_yun h2{color:#FFF;background:#a6926c;line-height:36px;font-size:14px;font-weight:normal;padding:0 0 0 15px;height:36px}.tag_yun h2 a{color:#FFF}.tag_yun_list{margin:10px;}.tag_yun_list a{padding-right:5px;}.qun{background:#a6926c;color:#fff;line-height:40px;text-align:center;margin:10px 0;-webkit-animation:'flipInX' 1s ease 1s backwards;-moz-animation:'flipInX' 1s ease 1s backwards;-ms-animation:'flipInX' 1s ease 1s backwards;-o-animation:'flipInX' 1s ease 1s backwards;animation:'flipInX' 1s ease 1s backwards;}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-webkit-transform:perspective(400px) rotateX(-10deg);}70%{-webkit-transform:perspective(400px) rotateX(10deg);}100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}}@-moz-keyframes flipInX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-moz-transform:perspective(400px) rotateX(-10deg);}70%{-moz-transform:perspective(400px) rotateX(10deg);}100%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;}}@-ms-keyframes flipInX{0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-ms-transform:perspective(400px) rotateX(-10deg);}70%{-ms-transform:perspective(400px) rotateX(10deg);}100%{-ms-transform:perspective(400px) rotateX(0deg);opacity:1;}}@-o-keyframes flipInX{0%{-o-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-o-transform:perspective(400px) rotateX(-10deg);}70%{-o-transform:perspective(400px) rotateX(10deg);}100%{-o-transform:perspective(400px) rotateX(0deg);opacity:1;}}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0;}40%{transform:perspective(400px) rotateX(-10deg);}70%{transform:perspective(400px) rotateX(10deg);}100%{transform:perspective(400px) rotateX(0deg);opacity:1;}}.template li:nth-child(1){-webkit-animation:'fadeInRight' 2s 1;-moz-animation:'fadeInRight' 2s 1;-ms-animation:'fadeInRight' 2s 1;-o-animation:'fadeInRight' 2s 1;animation:'fadeInRight' 2s 1;}.template li:nth-child(2){-webkit-animation:'fadeInRight' 3s 1;-moz-animation:'fadeInRight' 3s 1;-ms-animation:'fadeInRight' 3s 1;-o-animation:'fadeInRight' 3s 1;animation:'fadeInRight' 3s 1;}.template li:nth-child(3){-webkit-animation:'fadeInRight' 4s 1;-moz-animation:'fadeInRight' 4s 1;-ms-animation:'fadeInRight' 4s 1;-o-animation:'fadeInRight' 4s 1;animation:'fadeInRight' 4s 1;}.template li:nth-child(4){-webkit-animation:'fadeInRight' 5s 1;-moz-animation:'fadeInRight' 5s 1;-ms-animation:'fadeInRight' 5s 1;-o-animation:'fadeInRight' 5s 1;animation:'fadeInRight' 5s 1;}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);}100%{opacity:1;-webkit-transform:translateX(0);}}@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(20px);}100%{opacity:1;-moz-transform:translateX(0);}}@-ms-keyframes fadeInRight{0%{opacity:0;-ms-transform:translateX(20px);}100%{opacity:1;-ms-transform:translateX(0);}}@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(20px);}100%{opacity:1;-o-transform:translateX(0);}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px);}100%{opacity:1;transform:translateX(0);}}心情日记_心情语录随笔个人博客模板演示http://www.bokequ.com/winter/
标签：fadeInRight,唯美,color,transform,height,源码,li,animation,模板 From： https://blog.51cto.com/bokequ/9158670