蓝色时间轴个人博客网页模板代码

雪时间轴个人博客模板,女生唯美简洁个人博客静态页面模板，蓝色时间轴个人网页模板，下雪空间个人模板代码

1、html页面代码

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

看雪时间轴个人博客模板代码演示http://www.bokequ.com/blog/12/

亿互联网用户需求，促使300万WEB前端人才缺口。HTML5的蔓延让不少开发商发现了机遇，HTML5开发人才也遭受疯抢，但传统前端人才很难驾驭移动端，因此，HTML5开发人才出现严重紧缺状态，很多企业陷入两难境地。

据统计，我国对于高级HTML5开发人员的缺口将达到12万左右。目前，北京、上海、广州、深圳等地HTML5开发人员的薪资待遇更是一高再高。想成为一名优秀的HTML5开发人员吗？那么这份学习资料值得大家收藏学习了。

一.HTML5初级开发工程师

1.HTML5介绍

互联网发展趋势

H5语言的优势

简单易学人人都能编程

H5就业和薪资情况

H5常见的项目与产品

H5的未来与方向

2.HTML基础

HTML简介与历史版本

常用开发软件

常见标签与属性

表格与表单

标签规范与标签语义化

实战：网页结构布局

3.CSS基础

css简介与基本语法

常见的各种样式属性

CSS选择器与标签类型

理解盒子模型与CSS重置

浮动与定位

利用photoshop工具测量样式

HTML+CSS开发网页

实战：高仿电商首页效果

4.CSS3基础

css3常见样式

css3选择器

变形与动画

3D效果与关键帧

弹性盒模型

5.移动端布局

移动端基本概念

viewport窗口设置

移动端布局方案

rem、vh、vw等单位

响应式布局

bootstrap框架

6.JavaScript基础

JS简介

JS变量

数据类型与类型转换

运算符与优先级

流程控制-if..else

流程控制-switch...case

流程控制-while、do..while、for循环

break、continue语法

函数定义与调用

全局变量与局部变量

函数传参与返回值

函数作用域与变量作用域

DOM的基本操作

定时器使用

this指向与修改指向

数组、字符串等方法操作

时间对象与正则对象

掌握常见BOM操作

常见事件与事件细节

JSON与AJAX

JSONP跨域操作

前端cookie的使用

实战：JS配合HTML与CSS完成电商项目

7.jquery框架

jquery框架介绍及优势介绍

jquery核心思想

jquery常见方法

jquery动画操作

jqueryAJAX操作

jquery工具方法

利用jquery快速开发网页

8.PHP基础

PHP简介与基本语法

mysql数据库及sql语法

apache服务器与集成开发工具

PHP链接数据库

PHP与AJAX交互

实战：留言板、登录、注册等

9.H5基础项目

项目简介

项目功能演示

项目划分及框架

编写HTML页面结构

设置CSS样式

添加JS交互

可选框架：bootstrap、jquery、PHP等

项目调试及兼容

项目验收

二.HTML5中高级开发工程师

1.面向对象基础

面向对象概述

对象和构造函数（类）之间的关系

对象的属性和方法

原型与原型链

包装对象与内部实现

对象中实现继承方式

设计模式及实际运用

2.JavaScript高级

JS算法与排序算法

promise异步处理

运动与tween算法

闭包与模块化

JS组件开发

打造小型jquery框架

JS性能优化

ES6新增功能

3.前端工程化

gulp基本使用

less、sass、babel等预编译框架

理解模块概念，AMD与CMD规范

前端模块框架seaJS、requireJS

webpack基本使用

4.多人协作

svn基本用法与可视化工具

多人开发流程

git基本用法

命令行操作

分区及分支等概念

远程github操作

实战：多人协作开发项目

5.HTML5新功能

canvas绘图

svg绘图

音频与视频

本地存储与离线存储

地理信息

web Worker

web Socket

6.NodeJS基础

node与npm概念及使用

node模块方式

node常用内置模块

node爬虫与文件自动化处理

node搭建服务器与简单路由

mongodb非关系数据库

mongodb安装与db操作

mongodb增删改查

mongodb与node结合开发

mongoose数据建模

mongoose与node结合开发

express框架

中间件与ejs模板引擎

Robomongo与postman工具

express+mongoose搭建后端框架

设计Restful API

实战：前后端分离式开发

7.微信端开发

移动端交互与移动端事件

微信场景与swiper框架

微信公众号介绍

网页授权与JSSDK

微信web开发者工具使用

微信小程序开发

实战：公众号与小程序项目同步开发

三.HTML5大神级开发工程师

1.VueJS框架

Vue框架简介

渐进式与响应式

模板语法与计算属性

指令与数据处理器

生命周期

组件与组件通信

Vuex状态管理

Vue动画与路由

单文件组件与脚手架

基于Vue的组件框架

实战：Vue与Node全栈开发

2.ReactJS框架

React框架简介

JSX语法

组件与组件通信

属性与状态设置

虚拟DOM

生命周期

redux架构

react-redux使用

react-router使用

Mem脚手架使用

实战：React与Node全栈开发

3.AngularJS框架

Angular框架简介

TypeScript基础与进阶

开发环境配置

架构、模块与组件

模板、元数据与数据显示

服务于指令

依赖注入

路由

实战：Angular与Node全栈开发

4.Hybrid App开发

App介绍与分类

Android/ios与H5通信

Cordova/Phonegap框架

HTML5+基于HB工具

React Native

5.前端架构

单元测试与编写测试用例

自动化测试方案

前端安全与HTTP协议

项目上线与一键部署

数据统计与SEO优化

搭建组件库与按需载入

浏览器渲染与浏览器引擎

深入理解后端开发模式

更多学习资料，戳左下角哦~

TML5 提供了播放音频文件的标准。

互联网上的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。

今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.

注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.

HTML5 Audio - 如何工作

如需在 HTML5 中播放音频，你需要使用以下代码：

实例

<audiocontrols><sourcesrc="horse.ogg"type="audio/ogg"><sourcesrc="horse.mp3"type="audio/mpeg">您的浏览器不支持 audio 元素。</audio>

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

音频格式及浏览器支持

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

音频格式的MIME类型

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

HTML5 Audio 标签

标签	描述
<audio>	定义了声音内容
<source>	规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：HTML table表格固定表头 tbody加滚动条
下一篇：前端基础 - Javascript函数传值的方式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

蓝色时间轴个人博客网页模板代码

您的项目需求