看雪时间轴个人博客模板,女生唯美简洁个人博客静态页面模板，蓝色时间轴个人网页模板，下雪空间个人模板代码.
1、html页面代码
<html><head><metacharset="gb2312"><title>看雪时间轴个人博客模板 - bokequ.com</title><metaname="keywords"content="蓝色模板,个人网站模板,个人博客模板,博客模板,css3,html5,网站模板"/><metaname="description"content="这是一个有关看雪时间轴的css3 html5 网站模板"/><linkhref="css/styles.css"rel="stylesheet"><linkhref="css/animation.css"rel="stylesheet"><!-- 返回顶部调用 begin --><linkhref="css/lrtk.css"rel="stylesheet"/><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/js.js"></script><!-- 返回顶部调用 end--><!--[if lt IE 9]><script src="js/modernizr.js"></script><![endif]--></head><body><header><imgsrc="http://www.bokequ.com/winter/templets/xq/images/logo.png"alt="看雪个人空间"width="170"height="60"><h1><ahref="http://www.bokequ.com/winter/">看雪时间轴个人博客模板</a></h1><p>看雪,是一种唯美的心境。这个冬季，放下疲惫的自己，一起看雪吧</p></header><divclass="b_nav"></div><divid="nav"><ul><li><ahref="#">网站首页</a></li><li><ahref="http://www.bokequ.com/blog/1/"target="_blank"title="个人博客模板">个人博客模板</a></li><li><ahref="#"title="图书推荐">图书推荐</a></li><li><ahref="#"title="网站建设">网站建设</a></li><li><ahref="http://www.bokequ.com/category/web"target="_blank"title="HTML5 / CSS3">HTML5/CSS3</a></li><li><ahref="#"target="_blank"title="技术探讨">技术探讨</a></li><li><ahref="http://www.bokequ.com/wo/life/man/"target="_blank"title="慢生活">慢生活</a></li><li><ahref="http://www.bokequ.com/wo/newstalk/"target="_blank"title="碎言碎语">碎言碎语</a></li></ul><!--获取当前页导航 高亮显示标题--></div><!--header end--><divid="mainbody"><divclass="info"><figure><imgsrc="images/art1.jpg"alt="看雪，是一种唯美的心境"><figcaption><strong>看雪，是一种唯美的心境</strong> 喜欢雪，没有理由，只是爱它的轻盈，却不张扬;痴迷于它的典雅，却不做作。纯纯的颜色，洁白如晶，如天使，似鹅毛，飘飘洒洒，漫天飞舞。它虽没有华丽的外套，白色却是最好的衣冠;它虽称不上雍容华贵，素雅却是最佳的装扮。带着它的雅致，迈着绝美的舞姿，随着冬的到来而翩翩起舞，洋洋洒洒，一泻千里。 </figcaption></figure><divclass="card"><h1>关于我</h1><p>网名：keyboard | 草戊水来</p><p>职业：Web前端设计师、网页设计</p><p>电话：18666888333</p><p>Email：snow@qq.com</p><ulclass="linkmore"><li><ahref="#"class="talk"title="给我留言"></a></li><li><ahref="#"class="address"title="联系地址"></a></li><li><ahref="#"class="email"title="给我写信"></a></li><li><ahref="#"class="photos"title="生活照片"></a></li><li><ahref="#"class="heart"title="关注我"></a></li></ul></div></div><!--info end--><divclass="blank"></div><divclass="blogs"><ulclass="bloglist"><li><divclass="arrow_box"><divclass="ti"></div><!--三角形--><divclass="ci"></div><!--圆形--><h2class="title"><ahref="http://www.bokequ.com/blog/12/1.html"target="_blank">雪，温暖了整个冬天。</a></h2><ulclass="textinfo"><atarget="_blank"href="http://www.bokequ.com/blog/12/1.html"><imgsrc="images/11.jpg"></a><p> 冬天总是不如夏春秋一般柔软多情，既然来了，就让人记得刻苦铭心。人生如此般，雪一般的岁月，苦中作乐，暂不说这是那些文人雅客笔下描写的那样如诗如画，却也是每一个人的雪景中总有一处属于自己建立起的一片天地。如痴如醉的自己，看不清别人，也看不清自己，倒也是一种境界，让人有点糊涂，有点执迷。 </p></ul><ulclass="details"><liclass="likes"><ahref="#">喜欢 10</a></li><liclass="comments"><ahref="#">评论 34</a></li><liclass="icon-time"><ahref="#">时间 2016-12-1</a></li></ul></div><!--arrow_box end--></li><li><divclass="arrow_box"><divclass="ti"></div><!--三角形--><divclass="ci"></div><!--圆形--><h2class="title"><ahref="http://www.bokequ.com/wo/"target="_blank">说好陪我看第一场雪。雪下了，你在哪？</a></h2><ulclass="textinfo"><ahref="#"><imgsrc="images/s5.jpg"></a><p> 1、雪很美， 当它落下来的那一刻，就注定要化成水。2、世界上没有不融化的雪，也没有永远不变的爱情，人心都是会变的。3、纯洁的雪，洗濯了肮脏的世界，邂逅的只是安静的大地。4、冬天下雪的时候他会背我走 可是我们分手了。5、冬天的早晨， 晴朗的阳光， 洁净安宁的雪， 一切美的就像我喜欢的她。6、当赤道留住雪花。眼泪融掉细沙，你肯珍惜我吗?</p></ul><ulclass="details"><liclass="likes"><ahref="#">喜欢 102</a></li><liclass="comments"><ahref="#">评论 58</a></li><liclass="icon-time"><ahref="#">时间 2016-12-2</a></li></ul></div><!--arrow_box end--></li><li><divclass="arrow_box"><divclass="ti"></div><!--三角形--><divclass="ci"></div><!--圆形--><h2class="title"><ahref="http://www.bokequ.com/wo/"target="_blank">风劲吹，雪漫舞</a></h2><ulclass="textinfo"><ahref="#"><imgsrc="images/s3.jpg"></a><p> 雪花漫天卷地落下来，犹如鹅毛一般，纷纷扬扬。轻轻地轻轻地落在房顶上，落在草地上，落在山峰上。一会儿，大地一片雪白，好象整个世界都是银白色的，闪闪发光。雪落在地上，那么纯洁，那么晶莹，真使人不忍心踩上去...</p></ul><ulclass="details"><liclass="likes"><ahref="#">喜欢 15</a></li><liclass="comments"><ahref="#">评论 2</a></li><liclass="icon-time"><ahref="#">时间 2016-12-3</a></li></ul></div><!--arrow_box end--></li><li><divclass="arrow_box"><divclass="ti"></div><!--三角形--><divclass="ci"></div><!--圆形--><h2class="title"><ahref="http://www.bokequ.com/wo/"target="_blank">北京下雪了</a></h2><ulclass="textinfo"><ahref="#"><imgsrc="images/s4.jpg"></a><p> 雪中的北京，好美，下雪天，是不是应该得到一个大大的拥抱，一杯喜欢的咖啡，牵手去踩踩雪，听着咯吱咯吱的声音。每年下雪的时候，都是我最想家的时候，以前北京下雪总是没有大连下的那么痛快，所以最冷的时候最怀念家乡的大学和温暖的被窝，原来寒冷真的会加重思乡之情……小伙伴们，你们还好吗?!</p></ul><ulclass="details"><liclass="likes"><ahref="#">喜欢 102</a></li><liclass="comments"><ahref="#">评论 58</a></li><liclass="icon-time"><ahref="#">时间 2016-12-4</a></li></ul></div><!--arrow_box end--></li><li><divclass="arrow_box"><divclass="ti"></div><!--三角形--><divclass="ci"></div><!--圆形--><h2class="title"><ahref="http://www.bokequ.com/wo/"target="_blank">看雪赏雪心情说说</a></h2><ulclass="textinfo"><ahref="#"><imgsrc="images/s1.jpg"></a><p> 踏上由雪铺砌的小路，独自漫步，踩上去听那咯吱咯吱的乐声，真比那天籁之音还要醉人，难怪有诗这样写到“此曲只应天上有，人间哪得几回闻。”你瞧，远出那被雪覆盖的枯枝，似开出了一朵朵白色的小花，真有点“忽如一夜春风来，千树万树梨花开”的味道，却又好似玉雕的一般，晶莹剔透。还有那房屋上，也都披上了厚厚的雪戎装。</p></ul><ulclass="details"><liclass="likes"><ahref="#">喜欢 15</a></li><liclass="comments"><ahref="#">评论 2</a></li><liclass="icon-time"><ahref="#">时间 2016-12-5</a></li></ul></div><!--arrow_box end--></li><li><divclass="arrow_box"><divclass="ti"></div><!--三角形--><divclass="ci"></div><!--圆形--><h2class="title"><ahref="http://www.bokequ.com/wo/"target="_blank">因为爱你，更是因为懂你</a></h2><ulclass="textinfo"><ahref="#"><imgsrc="images/12.jpg"></a><p> 外边仍然飘着转身急逝的雪花，多想在看看落满操场的雪花，多想和你踏着，听着雪碎的声音，如今只剩下惨淡的雪还在下，只能听见自己心碎的声音还在颤抖。望着你离开的背影，我告诉自己要坚强，不哭，是因为爱你，更是因为懂你。 </p></ul><ulclass="details"><liclass="likes"><ahref="#">喜欢 15</a></li><liclass="comments"><ahref="#">评论 2</a></li><liclass="icon-time"><ahref="#">时间 2016-12-6</a></li></ul></div><!--arrow_box end--></li><li><divclass="arrow_box"><divclass="ti"></div><!--三角形--><divclass="ci"></div><!--圆形--><h2class="title"><ahref="http://www.bokequ.com/wo/"target="_blank">长大后看雪，看的是心境</a></h2><ulclass="textinfo"><ahref="#"><imgsrc="images/art2.jpg"></a><p> 许多人看雪会看出许多往事，像小时候看雪，看的就是纯净，长大后看雪，看的是心境。不同的人生阶段看到的雪花固然不同，有看出惊艳的，有看出伤感的，有看出华丽的，有看出苍白的，不论看到了什么样的心境，雪还是雪，只是落在谁的心上，就堆积成什么样的形状。我到真心认为，雪就是雪，季节的使者，有它的时经典散文摘抄:候，证明这个季节是狂欢的，没它的时候，这个季节会显得格外冷清。</p></ul><ulclass="details"><liclass="likes"><ahref="#">喜欢 15</a></li><liclass="comments"><ahref="#">评论 2</a></li><liclass="icon-time"><ahref="#">时间 2016-12-7</a></li></ul></div><!--arrow_box end--></li><li><divclass="arrow_box"><divclass="ti"></div><!--三角形--><divclass="ci"></div><!--圆形--><h2class="title"><ahref="http://www.bokequ.com/wo/"target="_blank">雪景清纯美女图片下载</a></h2><ulclass="textinfo"><ahref="#"><imgsrc="images/13.jpg"></a><p> 雪,带着那冬季的清寒悄然飘落,雪花是多么美好,它纯净了整个世界,纯净了我们的心灵中的每一个角落。一起徒步看雪景也许最美的不是天长地久,而是和你一起坐在长椅上,看远处的雪景,天空很冷,我们却很幸福!</p></ul><ulclass="details"><liclass="likes"><ahref="#">喜欢 15</a></li><liclass="comments"><ahref="#">评论 2</a></li><liclass="icon-time"><ahref="#">时间 2016-12-8</a></li></ul></div><!--arrow_box end--></li><divclass="post-nav-right"><p><atarget="_blank"href="http://www.bokequ.com/blog/12/1.html">点击阅读更多</a></p></div></ul><!--bloglist end--><aside><divclass="search"><formclass="searchform"method="get"action="#"><inputtype="text"name="s"value="Search"onFocus="this.value=''"onBlur="this.value='Search'"></form></div><divclass="viny"><dl><dtclass="art"><imgsrc="images/13.jpg"alt="歌曲专辑"></dt><ddclass="icon-song"><span></span>我很快乐</dd><ddclass="icon-artist"><span></span>歌手：刘惜君</dd><ddclass="icon-album"><span></span>专辑：《我很快乐》</dd><ddclass="icon-like"><span></span><ahref="#">喜欢</a></dd><ddclass="music"><audiosrc="http://www.bokequ.com/blog/12/images/kuaile.mp3"controlsautoplay></audio></dd><!--也可以添加loop属性 音频加载到末尾时，会重新播放--></dl></div><divclass="tuijian"><h2>推荐文章</h2><ol><li><span><strong>1</strong></span><atarget="_blank"href="http://www.bokequ.com/blog/summer/biye.html">广东省电子商务技师学院</a></li><li><span><strong>2</strong></span><atarget="_blank"href="http://www.bokequ.com/shuo/">浅蓝色小清新说说文章类织梦CMS个人博客模板</a></li><li><span><strong>3</strong></span><atarget="_blank"href="http://www.bokequ.com/blog/8/">花开花落—古典个人博客模板</a></li><li><span><strong>4</strong></span><atarget="_blank"href="http://www.bokequ.com/winter/">心情日记_心情语录随笔个人博客模板</a></li><li><span><strong>5</strong></span><atarget="_blank"href="http://www.bokequ.com/blog/sep/">九月.梦见夏天结束的样子个人博客</a></li><li><span><strong>6</strong></span><atarget="_blank"href="http://www.bokequ.com/time/">小清新个人博客主页模板 - 用照片记录时光</a></li><li><span><strong>7</strong></span><atarget="_blank"href="http://www.bokequ.com/blog/bozhao/index.html">广州博兆集团—五龙山庄拓展训练</a></li><li><span><strong>8</strong></span><atarget="_blank"href="http://www.bokequ.com/wo/">个人生活点滴记录博客</a></li><li><span><strong>9</strong></span><atarget="_blank"href="http://www.bokequ.com/blog/22/index.html">毕业了，一起看看青春期那些糟心大片！</a></li></ol></div><divclass="toppic"><h2>图文推荐</h2><ul><li><ahref="#"><imgsrc="images/k01.jpg">唯美雪景意境图片,唯美雪景意境图片壁纸！ <p>点击阅读更多...</p></a></li><li><ahref="#"><imgsrc="images/10.jpg">浪漫唯美雪景图片_下雪浪漫唯美图片下载 <p>点击阅读更多...</p></a></li><li><ahref="#"><imgsrc="images/k03.jpg">唯美人物雪景图片:冬天要是有雪才完美。 <p>点击阅读更多...</p></a></li><li><ahref="#"><imgsrc="images/12.jpg">最美冬天雪景图片大全。 <p>点击阅读更多...</p></a></li><li><ahref="#"><imgsrc="images/13.jpg">世上所谓幸福，就是一个笨蛋遇到一个傻瓜。 <p>点击阅读更多...</p></a></li></ul></div><divclass="clicks"><h2>热门点击</h2><ol><li><span><ahref="#">慢生活</a></span><ahref="http://www.bokequ.com/wo/share/">有一种思念，是淡淡的幸福,一个心情一行文字</a></li><li><span><ahref="#">爱情美文</a></span><ahref="http://www.bokequ.com/wo/share/">励志人生-要做一个潇洒的女人</a></li><li><span><ahref="#">慢生活</a></span><ahref="http://www.bokequ.com/wo/share/">女孩都有浪漫的小情怀——浪漫的求婚词</a></li><li><span><ahref="#">博客模板</a></span><ahref="http://www.bokequ.com/wo/share/">Green绿色小清新的夏天-个人博客模板</a></li><li><span><ahref="#">女生个人博客</a></span><ahref="http://www.bokequ.com/wo/share/">女生清新个人博客网站模板</a></li><li><span><ahref="#">Wedding</a></span><ahref="http://www.bokequ.com/wo/share/">Wedding-婚礼主题、情人节网站模板</a></li><li><span><ahref="#">三栏布局</a></span><ahref="http://www.bokequ.com/wo/share/">Column 三栏布局 个人网站模板</a></li><li><span><ahref="#">个人网站模板</a></span><ahref="http://www.bokequ.com/wo/share/">时间煮雨-个人网站模板</a></li><li><span><ahref="#">古典风格</a></span><ahref="http://www.bokequ.com/wo/share/">花气袭人是酒香—个人网站模板</a></li></ol></div><divclass="visitors"><h2>最新评论</h2><dl><dt><imgsrc="images/s8.jpg"alt="看雪个人博客模板"><dt><dd>DanceSmile <time>38分钟前</time></dd><dd>在 <ahref="http://www.yangqq.com/jstt/bj/2013-07-28/530.html"class="title">如果要学习web前端开发，需要学习什么？ </a>中评论：</dd><dd>文章非常详细，我很喜欢.前端的工程师很少，我记得几年前yahoo花高薪招聘前端也招不到</dd></dl><dl><dt><imgsrc="images/s7.jpg"alt="看雪个人博客模板"><dt><dd>yisa <time>2小时前</time></dd><dd>在 <ahref="http://www.bokequ.com/blog/7/"class="title">>青春往事个人博客模板 - bokequ.com</a>中评论：</dd><dd>我要下载个人博客模板</dd></dl><dl><dt><imgsrc="images/s6.jpg"alt="看雪个人博客模板"><dt><dd>个人博客 <time>12月7日</time></dd><dd>在 <ahref="http://www.bokequ.com/wo/"class="title">如果个人博客网站再没有价值，你还会坚持吗？ </a>中评论：</dd><dd>博客色彩丰富，很是好看</dd></dl><dl><dt><imgsrc="images/s2.jpg"alt="看雪个人博客模板"><dt><dd>小林博客 <time>12月7日</time></dd><dd>在 <ahref="http://www.bokequ.com/wo/"class="title">如果个人博客网站再没有价值，你还会坚持吗？ </a>中评论：</dd><dd>博客色彩丰富，很是好看</dd></dl><dl><dt><imgsrc="images/s5.jpg"alt="看雪个人博客模板"><dt><dd>MAOLAI博客 <time>12月7日</time></dd><dd>在 <ahref="http://www.bokequ.com/wo/"class="title">如果个人博客网站再没有价值，你还会坚持吗？ </a>中评论：</dd><dd>博客色彩丰富，很是好看</dd></dl></div><divclass="flickr"><h2>最近访客</h2><ul><li><ahref="#"rel="nofollw"title="梦想霞个人博客"><imgsrc="images/s5.jpg"></a></li><li><atarget="_blank"href="http://www.xuanfengge.com/"rel="nofollw"title="轩枫阁"><imgsrc="images/s2.jpg"></a></li><li><atarget="_blank"href="http://www.onmpw.com/index.html"rel="nofollw"title="迹忆博客"><imgsrc="images/03.jpg"></a></li><li><atarget="_blank"href="http://m.bokequ.com/"rel="nofollw"title="草根站长目录"><imgsrc="images/04.jpg"></a></li><li><ahref="#"rel="nofollw"title="艺小昔个人博客"><imgsrc="images/05.jpg"></a></li><li><atarget="_blank"href="http://www.bokequ.com/wo/newstalk/"rel="nofollw"title="心情说说"><imgsrc="images/06.jpg"></a></li><li><atarget="_blank"href="http://www.bokequ.com/wo/comic/"rel="nofollw"title="动漫资讯"><imgsrc="images/s6.jpg"></a></li><li><ahref="#"rel="nofollw"title="超神学院"><imgsrc="images/08.jpg"></a></li><li><atarget="_blank"href="http://www.bokequ.com/shuo/"rel="nofollw"title="唯美说说乐园"><imgsrc="images/09.jpg"></a></li></ul></div></aside></div><!--blogs end--></div><!--mainbody end--><footer><divclass="footer-bottom"><p>Copyright 2016 时间：大约在冬季 Design by <ahref="http://www.bokequ.com">MAOLAI博客(bokequ.com)</a> 模板下载地址：更新中...</p></div></footer><!-- jQuery仿腾讯回顶部和建议 代码开始 --><divid="tbox"><aid="togbook"href="#"></a><aid="gotop"href="javascript:void(0)"></a></div><!-- 代码结束 --></body></html>
2、css样式
@charset"gb2312"; /* CSS Document */* { margin: 0; padding: 0 } body { font: 14px"宋体", "Arial Narrow", HELVETICA; color: #3F3E3C; line-height: 1.5; background:url(../images/bg1.jpg)} img { border: 0; vertical-align: middle } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1 { font: 24px"微软雅黑", "Microsoft YaHei", Arial, Helvetica, sans-serif } p { word-wrap: break-word } ul, ol { list-style: none; } a { color: #111; text-decoration: none; transition: All1sease; transition: All1sease; transition: All1sease; transition: All1sease; transition: All1sease; } a:hover { color: #111; } /* -----------------------nav 一级导航----------------- */header { padding:133px000; width:100%; height:380px; margin:auto; background:url(../images/top.jpg) center0scrollno-repeat;} headerimg { float:left; margin:020px066px; animation:'flipInX'1sease1sbackwards; animation:'flipInX'1sease1sbackwards; animation:'flipInX'1sease1sbackwards; animation:'flipInX'1sease1sbackwards; animation:'flipInX'1sease1sbackwards; } headerh1 { font-size:16px; font-weight:normal; text-shadow:#fff1px1px1px; } .b_nav{background:url(../images/menu_bg.png) 50%0%;width:100%; margin-top:-160px;height:50px;} headerh1a { color:#000} headerh1a:hover { text-decoration:underline} headerp { margin:17px000; text-shadow:#0001px1px1px; color:#fff} #nav { width:100%; line-height:40px; height:40px; margin-top:-86px; } #navul { list-style:none; margin:auto; width:1030px} #navulli { float:left; width:100px; text-align:center; text-shadow:#3331px1px1px; } #navullia { display:block; color:#FFF; cursor:pointer; font-weight:bold; } #navullia:hover { background:#6983d7; color:#FFF; font-weight:bold; border-radius:50px0} #navullia#nav_current { background:#6983d7; color:#FFF; font-weight:bold; border-radius:50px0} #mainbody { width: 100%;clear: both; overflow: hidden; } /* ---------------------info------------------------- */.info { width: 1000px; margin:50pxauto; overflow: hidden; clear: both } /* 图片向上翻转的动画效果 */.infofigure { display: inline-block; width: 630px; height: 250px; position: relative; float: left; } .infofigcaption { padding: 20px; position: absolute; top: 20%; left: 0; background: rgba(153,153,153,.8); color: white; opacity: 0; transition: opacity.75sease-out; transition: opacity.75sease-out; transition: opacity.75sease-out; transition: opacity.75sease-out; } .infofigure:hoverfigcaption { opacity: 1; } /* 用opacity 设置鼠标放上去显示文字的效果 */.infofigcaptionstrong { display: block; line-height: 40px } /* card */.card { box-shadow: 0px1px0pxrgba(255,255,255,.1), inset0px1px1pxrgba(0,0,0,.7); border-radius: 6px; background:#fffurl(../images/quote-bg.png) no-repeattopright; width: 350px; float: right; height: 250px; overflow: hidden } .cardh1 { padding: 10px } .cardp:first-child { padding: 40px0040px } /* 结构性伪类选择符 选择第一个p标签，并且设置上、左距离是40px*/.cardp { padding: 00040px; line-height: 28px; color: #111;} .linkmore { margin: 15px0015px } .linkmorelia { height: 50px; width: 50px; display: block; overflow: hidden; box-shadow: 0px1px0pxrgba(255,255,255,.1), inset0px1px1pxrgba(0,0,0,.7); border-radius: 50%; float: left; margin: 06px; } .linkmorelia:hover { opacity: 0.5; transform: rotate(30deg); transform: rotate(30deg); transform: rotate(30deg); transform: rotate(30deg); transform: rotate(30deg); } .talk, .address, .email, .photos, .heart { background: url(../images/icons.png) no-repeat; } .talk { background-position: 13px18px } .address { background-position: 12px-22px } .email { background-position: 12px-60px } .photos { background-position: 12px-137px } .heart { background-position: 13px-99px } /* --------------------博客列表-------------------- */.blogs { width: 1000px; margin: 0auto20px; } .bloglist {margin-top:-33px; width: 666px; float: left; } .bloglist>li { border-right: #fff2pxsolid; padding: 20px0; } .arrow_box { background: #fff; box-shadow: 0px1px0pxrgba(255,255,255,.1), inset0px1px1pxrgba(0,0,0,.7); width: 630px; color: #b9b9b9; border-radius: 6px; position: relative } .ti { width: 0px; height: 0px; border-style: solid; border-width: 0px020px22px; border-color: transparenttransparenttransparent#fff; position: absolute; left: 630px; top: 20px; }/* 三角形 */.ci { width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 658px; top: 16px; background: #fff; border: 2pxsolid#fff; } /* 圆形定义边框色与背景一致 */.ci:hover { border: 2pxsolid#B9B9B9; } .arrow_boxh2.title { padding: 00020px; font: 16px/50px"微软雅黑", "Microsoft YaHei", Arial, Helvetica, sans-serif } .arrow_boxh2a:hover { padding-left: 20px } .textinfo { overflow: hidden; } .arrow_boximg { width:200px; padding: 4px; float: left; transition: All1sease; transition: All1sease; transition: All1sease; transition: All1sease; border-radius: 4px; margin: 020px20px; } .arrow_boximg:hover { opacity: 0.6; } .arrow_boxp {color:#111; line-height: 24px; padding: 020px20px } .details { background:#fafafa; border-radius: 006px6px; padding: 010px } .detailsli { line-height: 26px; display: inline; font-size:14px; margin-right: 10px; } .detailslia { color: #3F3E3C } .detailslia:hover { color: #933 } .icon-time, .likes, .comments { background: url(../images/icons.png) no-repeat } .icon-time { background-position: 0-208px; padding: 00018px; } .likes, .comments { float: right; padding: 00014px; } .likes { background-position: 0-240px; } .comments { background-position: 0-220px; } .post-nav-right{height:68px} .post-nav-rightp{text-align:center;line-height:60px;font-size:16px;} .post-nav-righta{ padding: 10px10px; color: #222; background: #fff; border-radius: 3px;} /*-------------------aside侧边栏--------------------------*/aside { width: 310px; float: right; margin:-12px0; } asideh2{ font-weight:bold;font-size: 16px; margin-bottom: 10px;color: #222 } asidediv { box-shadow: 0px1px0pxrgba(255,255,255,.1), inset0px1px1pxrgba(0,0,0,.7); border-radius: 6px; padding: 15px; background: #fff; margin-bottom: 20px; overflow: hidden; } .tuijianli, .clicksli { white-space: nowrap; text-overflow: ellipsis; overflow: hidden } .tuijianlia:hover { padding-left: 10px } .tuijianlispan:before { content: "0"; }/* 数字列表前面统一加0 */.tuijianlispan { margin-right: 10px; font-size: 14px; font-family: "微软雅黑"; } .tuijianli:nth-child(-n+3) span { width: 39px; color: #999 } /* 选择从第3个开始倒数也就是第三个前面的 */.tuijianli:nth-child(-n+3) strong { font-size: 24px; font-weight: normal; } .tuijianli:first-childspan { color: #f8490b; } /* 选择第一个 */.tuijianli:nth-child(n+3) { line-height: 24px } /* 选择从第3个开始往后数 */.tuijianli:nth-child(4) { margin: 5px000 } /* 选择第四个 *//* 图文推荐 */.toppicli{margin:10px0;} .toppicliimg { width:100px; float: left; margin-right: 10px; } .toppiculli:nth-child(2) { margin: 15px0; } .toppicullia { display: block; width: 100%; clear: both; overflow: hidden } .toppiclip { color: #B5783E; padding-left: 110px; margin-top: 5px; } .toppicli:first-childp { background-position: 90px-263px; } .toppicli:nth-child(2) p { background-position: 90px-283px; } .toppicli:last-childp { background-position: 90px-301px; } /* 热门点击 */.clicksli { line-height: 24px; } .clickslispan:before { content: "【"; } .clickslispan:after { content: "】"; } .clickslispana { padding: 05px; color: #366 } .clickslia:hover { text-decoration: underline } /* search */.searchform { overflow: hidden; padding: 10px; } .searchforminput { background:#fdfdfdurl(../images/icons.png) no-repeat3px-318px; border: 1pxsolid#111; width: 220px; line-height: 30px; color: #b9b9b9; padding-left: 30px; } /* music */.vinydldd { color: #b9b9b9; line-height: 24px; } .art { background: url(../images/vinyl.png) no-repeatleft; width: 130px; float: left; background-size: 120px; } .viny.artimg { width: 90px; height: 90px; margin-left: 11px } .vinyddspan { width: 12px; height: 24px; margin-right: 7px; float: left; display: block; } .icon-songspan, .icon-artistspan, .icon-albumspan, .icon-likespan { background: url(../images/icons.png) no-repeat } .icon-songspan { background-position: -33px-344px } .icon-artistspan { background-position: -16px-344px } .icon-albumspan { background-position: 0-344px } .icon-likespan { background-position: -1px-299px; } .icon-likea { color: #B5783E } .icon-likea:hover { color: #FFF; text-decoration: underline } .musicaudio { width: 100%; padding-top: 10px } /* 最新评论 */.visitorsdl { display: block; overflow: hidden; margin-bottom: 12px } .visitorsdd { line-height: 22px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden } .visitorsdd:last-child { color: #6A9150; } .visitorstime { color: #066; margin-left: 10px } .visitorsdt { float: left; } .visitorsdtimg { width: 67px; height: 67px; margin-right: 10px; } /* 最近访客 */.flickrulli { margin: 011px11px0; float: left; background: #000; } .flickrulliimg { width: 67px; height: 67px; border: #111solid1px; } .flickrulliimg:hover { opacity: 0.6 } /* --------------------------footer----------------------- */.footer-bottom {margin-top:38px;overflow: hidden; } .footer-bottomp { font-size:14px;text-align:center;color:#fff; width: 1000px; margin: 0auto; padding: 10px0; }
看雪时间轴个人博客模板代码演示 http://www.bokequ.com/blog/12/
