整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

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

          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:

          瀏覽器MP3WavOgg
          Internet Explorer 9+YESNONO
          Chrome 6+YESYESYES
          Firefox 3.6+YESYESYES
          Safari 5+YESYESNO
          Opera 10+YESYESYES

          音頻格式的MIME類型

          FormatMIME-type
          MP3audio/mpeg
          Oggaudio/ogg
          Wavaudio/wav

          HTML5 Audio 標簽

          標簽描述
          <audio>定義了聲音內容
          <source>規定了多媒體資源, 可以是多個,在 <video> 與 <audio>標簽中使用

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!


          主站蜘蛛池模板: 久久人妻内射无码一区三区| 自拍日韩亚洲一区在线| 99久久国产精品免费一区二区| 亚洲福利秒拍一区二区| 精品日本一区二区三区在线观看| 国产精品合集一区二区三区| 国产伦理一区二区| 亚洲国产成人久久一区久久| 国产成人精品视频一区| 中文字幕精品一区二区| 色噜噜狠狠一区二区三区| 久久99精品一区二区三区| 中文字幕一区二区三区日韩精品| 日韩经典精品无码一区| 美女福利视频一区二区| 精品一区二区三区影院在线午夜| 国产在线不卡一区| 视频一区在线播放| 国产AⅤ精品一区二区三区久久| 能在线观看的一区二区三区| 国产aⅴ精品一区二区三区久久| 无码少妇一区二区三区芒果| 国模无码视频一区| 国产成人一区二区三区电影网站 | 精品国产一区二区三区久久久狼 | 三上悠亚国产精品一区| 精品日韩在线视频一区二区三区| 一区二区三区视频免费观看| 国产精品一区二区三区99| 国产精品亚洲产品一区二区三区| 丰满人妻一区二区三区视频53| 精品亚洲一区二区三区在线播放| 日本高清成本人视频一区| 国产一区二区电影| 蜜臀AV在线播放一区二区三区| 99精品国产一区二区三区2021| 韩国精品一区视频在线播放| 无码人妻一区二区三区免费视频| 国产伦精品一区二区三区视频金莲| 国产一区二区三区在线2021| 老熟女五十路乱子交尾中出一区|