藍色時間軸個人博客網頁模板代碼

雪時間軸個人博客模板,女生唯美簡潔個人博客靜態頁面模板，藍色時間軸個人網頁模板，下雪空間個人模板代碼

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小時內與您取得聯系。

整合營銷服務商

藍色時間軸個人博客網頁模板代碼

您的項目需求