整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
雪時(shí)間軸個(gè)人博客模板,女生唯美簡(jiǎn)潔個(gè)人博客靜態(tài)頁面模板，藍(lán)色時(shí)間軸個(gè)人網(wǎng)頁模板，下雪空間個(gè)人模板代碼
1、html頁面代碼
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>看雪時(shí)間軸個(gè)人博客模板 - bokequ.com</title>
<meta name="keywords" content="藍(lán)色模板,個(gè)人網(wǎng)站模板,個(gè)人博客模板,博客模板,css3,html5,網(wǎng)站模板" />
<meta name="description" content="這是一個(gè)有關(guān)看雪時(shí)間軸的css3 html5 網(wǎng)站模板" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/animation.css" rel="stylesheet">
<!-- 返回頂部調(diào)用 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>
<!-- 返回頂部調(diào)用 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="看雪個(gè)人空間" width="170" height="60">
<h1><a href="http://www.bokequ.com/winter/">看雪時(shí)間軸個(gè)人博客模板</a></h1>
<p>看雪,是一種唯美的心境。這個(gè)冬季，放下疲憊的自己，一起看雪吧</p>
</header>
<div class="b_nav"></div>
<div id="nav">
<ul>
<li><a href="#">網(wǎng)站首頁</a></li>
<li><a href="http://www.bokequ.com/blog/1/" target="_blank" title="個(gè)人博客模板">個(gè)人博客模板</a></li>
<li><a href="#" title="圖書推薦">圖書推薦</a></li>
<li><a href="#" title="網(wǎng)站建設(shè)">網(wǎng)站建設(shè)</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="技術(shù)探討">技術(shù)探討</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>
<!--獲取當(dāng)前頁導(dǎo)航 高亮顯示標(biāo)題-->
</div>
<!--header end-->
<div id="mainbody">
<div class="info">
<figure> <img src="images/art1.jpg" alt="看雪，是一種唯美的心境">
<figcaption><strong>看雪，是一種唯美的心境</strong> 喜歡雪，沒有理由，只是愛它的輕盈，卻不張揚(yáng);癡迷于它的典雅，卻不做作。純純的顏色，潔白如晶，如天使，似鵝毛，飄飄灑灑，漫天飛舞。它雖沒有華麗的外套，白色卻是最好的衣冠;它雖稱不上雍容華貴，素雅卻是最佳的裝扮。帶著它的雅致，邁著絕美的舞姿，隨著冬的到來而翩翩起舞，洋洋灑灑，一瀉千里。 </figcaption>
</figure>
<div class="card">
<h1>關(guān)于我</h1>
<p>網(wǎng)名：keyboard | 草戊水來</p>
<p>職業(yè)：Web前端設(shè)計(jì)師、網(wǎng)頁設(shè)計(jì)</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="聯(lián)系地址"></a></li>
<li><a href="#" class="email" title="給我寫信"></a></li>
<li><a href="#" class="photos" title="生活照片"></a></li>
<li><a href="#" class="heart" title="關(guān)注我"></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">雪，溫暖了整個(gè)冬天。</a></h2>
<ul class="textinfo">
<a target="_blank" href="http://www.bokequ.com/blog/12/1.html"><img src="images/11.jpg"></a>
<p> 冬天總是不如夏春秋一般柔軟多情，既然來了，就讓人記得刻苦銘心。人生如此般，雪一般的歲月，苦中作樂，暫不說這是那些文人雅客筆下描寫的那樣如詩如畫，卻也是每一個(gè)人的雪景中總有一處屬于自己建立起的一片天地。如癡如醉的自己，看不清別人，也看不清自己，倒也是一種境界，讓人有點(diǎn)糊涂，有點(diǎn)執(zhí)迷。 </p>
</ul>
<ul class="details">
<li class="likes"><a href="#">喜歡 10</a></li>
<li class="comments"><a href="#">評(píng)論 34</a></li>
<li class="icon-time"><a href="#">時(shí)間 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">說好陪我看第一場(chǎng)雪。雪下了，你在哪？</a></h2>
<ul class="textinfo">
<a href="#"><img src="images/s5.jpg"></a>
<p> 1、雪很美， 當(dāng)它落下來的那一刻，就注定要化成水。2、世界上沒有不融化的雪，也沒有永遠(yuǎn)不變的愛情，人心都是會(huì)變的。3、純潔的雪，洗濯了骯臟的世界，邂逅的只是安靜的大地。4、冬天下雪的時(shí)候他會(huì)背我走 可是我們分手了。5、冬天的早晨， 晴朗的陽光， 潔凈安寧的雪， 一切美的就像我喜歡的她。6、當(dāng)赤道留住雪花。眼淚融掉細(xì)沙，你肯珍惜我嗎?</p>
</ul>
<ul class="details">
<li class="likes"><a href="#">喜歡 102</a></li>
<li class="comments"><a href="#">評(píng)論 58</a></li>
<li class="icon-time"><a href="#">時(shí)間 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">風(fēng)勁吹，雪漫舞</a></h2>
<ul class="textinfo">
<a href="#"><img src="images/s3.jpg"></a>
<p> 雪花漫天卷地落下來，猶如鵝毛一般，紛紛揚(yáng)揚(yáng)。輕輕地輕輕地落在房頂上，落在草地上，落在山峰上。一會(huì)兒，大地一片雪白，好象整個(gè)世界都是銀白色的，閃閃發(fā)光。雪落在地上，那么純潔，那么晶瑩，真使人不忍心踩上去...</p>
</ul>
<ul class="details">
<li class="likes"><a href="#">喜歡 15</a></li>
<li class="comments"><a href="#">評(píng)論 2</a></li>
<li class="icon-time"><a href="#">時(shí)間 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> 雪中的北京，好美，下雪天，是不是應(yīng)該得到一個(gè)大大的擁抱，一杯喜歡的咖啡，牽手去踩踩雪，聽著咯吱咯吱的聲音。每年下雪的時(shí)候，都是我最想家的時(shí)候，以前北京下雪總是沒有大連下的那么痛快，所以最冷的時(shí)候最懷念家鄉(xiāng)的大學(xué)和溫暖的被窩，原來寒冷真的會(huì)加重思鄉(xiāng)之情……小伙伴們，你們還好嗎?!</p>
</ul>
<ul class="details">
<li class="likes"><a href="#">喜歡 102</a></li>
<li class="comments"><a href="#">評(píng)論 58</a></li>
<li class="icon-time"><a href="#">時(shí)間 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> 踏上由雪鋪砌的小路，獨(dú)自漫步，踩上去聽那咯吱咯吱的樂聲，真比那天籟之音還要醉人，難怪有詩這樣寫到“此曲只應(yīng)天上有，人間哪得幾回聞。”你瞧，遠(yuǎn)出那被雪覆蓋的枯枝，似開出了一朵朵白色的小花，真有點(diǎn)“忽如一夜春風(fēng)來，千樹萬樹梨花開”的味道，卻又好似玉雕的一般，晶瑩剔透。還有那房屋上，也都披上了厚厚的雪戎裝。</p>
</ul>
<ul class="details">
<li class="likes"><a href="#">喜歡 15</a></li>
<li class="comments"><a href="#">評(píng)論 2</a></li>
<li class="icon-time"><a href="#">時(shí)間 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">因?yàn)閻勰悖且驗(yàn)槎?lt;/a></h2>
<ul class="textinfo">
<a href="#"><img src="images/12.jpg"></a>
<p> 外邊仍然飄著轉(zhuǎn)身急逝的雪花，多想在看看落滿操場(chǎng)的雪花，多想和你踏著，聽著雪碎的聲音，如今只剩下慘淡的雪還在下，只能聽見自己心碎的聲音還在顫抖。望著你離開的背影，我告訴自己要堅(jiān)強(qiáng)，不哭，是因?yàn)閻勰悖且驗(yàn)槎恪?</p>
</ul>
<ul class="details">
<li class="likes"><a href="#">喜歡 15</a></li>
<li class="comments"><a href="#">評(píng)論 2</a></li>
<li class="icon-time"><a href="#">時(shí)間 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">長(zhǎng)大后看雪，看的是心境</a></h2>
<ul class="textinfo">
<a href="#"><img src="images/art2.jpg"></a>
<p> 許多人看雪會(huì)看出許多往事，像小時(shí)候看雪，看的就是純凈，長(zhǎng)大后看雪，看的是心境。不同的人生階段看到的雪花固然不同，有看出驚艷的，有看出傷感的，有看出華麗的，有看出蒼白的，不論看到了什么樣的心境，雪還是雪，只是落在誰的心上，就堆積成什么樣的形狀。我到真心認(rèn)為，雪就是雪，季節(jié)的使者，有它的時(shí)經(jīng)典散文摘抄:候，證明這個(gè)季節(jié)是狂歡的，沒它的時(shí)候，這個(gè)季節(jié)會(huì)顯得格外冷清。</p>
</ul>
<ul class="details">
<li class="likes"><a href="#">喜歡 15</a></li>
<li class="comments"><a href="#">評(píng)論 2</a></li>
<li class="icon-time"><a href="#">時(shí)間 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> 雪,帶著那冬季的清寒悄然飄落,雪花是多么美好,它純凈了整個(gè)世界,純凈了我們的心靈中的每一個(gè)角落。一起徒步看雪景也許最美的不是天長(zhǎng)地久,而是和你一起坐在長(zhǎng)椅上,看遠(yuǎn)處的雪景,天空很冷,我們卻很幸福!</p>
</ul>
<ul class="details">
<li class="likes"><a href="#">喜歡 15</a></li>
<li class="comments"><a href="#">評(píng)論 2</a></li>
<li class="icon-time"><a href="#">時(shí)間 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" >點(diǎn)擊閱讀更多</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屬性 音頻加載到末尾時(shí)，會(huì)重新播放-->
</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">廣東省電子商務(wù)技師學(xué)院</a></li>
<li><span><strong>2</strong></span><a target="_blank" href="http://www.bokequ.com/shuo/">淺藍(lán)色小清新說說文章類織夢(mèng)CMS個(gè)人博客模板</a></li>
<li><span><strong>3</strong></span><a target="_blank" href="http://www.bokequ.com/blog/8/">花開花落—古典個(gè)人博客模板</a></li>
<li><span><strong>4</strong></span><a target="_blank" href="http://www.bokequ.com/winter/">心情日記_心情語錄隨筆個(gè)人博客模板</a></li>
<li><span><strong>5</strong></span><a target="_blank" href="http://www.bokequ.com/blog/sep/">九月.夢(mèng)見夏天結(jié)束的樣子個(gè)人博客</a></li>
<li><span><strong>6</strong></span><a target="_blank" href="http://www.bokequ.com/time/">小清新個(gè)人博客主頁模板 - 用照片記錄時(shí)光</a></li>
<li><span><strong>7</strong></span><a target="_blank" href="http://www.bokequ.com/blog/bozhao/index.html">廣州博兆集團(tuán)—五龍山莊拓展訓(xùn)練</a></li>
<li><span><strong>8</strong></span><a target="_blank" href="http://www.bokequ.com/wo/">個(gè)人生活點(diǎn)滴記錄博客</a></li>
<li><span><strong>9</strong></span><a target="_blank" href="http://www.bokequ.com/blog/22/index.html">畢業(yè)了，一起看看青春期那些糟心大片！</a></li>
</ol>
</div>
<div class="toppic">
<h2>圖文推薦</h2>
<ul>
<li><a href="#"><img src="images/k01.jpg">唯美雪景意境圖片,唯美雪景意境圖片壁紙！
<p>點(diǎn)擊閱讀更多...</p>
</a></li>
<li><a href="#"><img src="images/10.jpg">浪漫唯美雪景圖片_下雪浪漫唯美圖片下載
<p>點(diǎn)擊閱讀更多...</p>
</a></li>
<li><a href="#"><img src="images/k03.jpg">唯美人物雪景圖片:冬天要是有雪才完美。
<p>點(diǎn)擊閱讀更多...</p>
</a></li>
<li><a href="#"><img src="images/12.jpg">最美冬天雪景圖片大全。
<p>點(diǎn)擊閱讀更多...</p>
</a></li>
<li><a href="#"><img src="images/13.jpg">世上所謂幸福，就是一個(gè)笨蛋遇到一個(gè)傻瓜。
<p>點(diǎn)擊閱讀更多...</p>
</a></li>
</ul>
</div>
<div class="clicks">
<h2>熱門點(diǎn)擊</h2>
<ol>
<li><span><a href="#">慢生活</a></span><a href="http://www.bokequ.com/wo/share/">有一種思念，是淡淡的幸福,一個(gè)心情一行文字</a></li>
<li><span><a href="#">愛情美文</a></span><a href="http://www.bokequ.com/wo/share/">勵(lì)志人生-要做一個(gè)瀟灑的女人</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綠色小清新的夏天-個(gè)人博客模板</a></li>
<li><span><a href="#">女生個(gè)人博客</a></span><a href="http://www.bokequ.com/wo/share/">女生清新個(gè)人博客網(wǎng)站模板</a></li>
<li><span><a href="#">Wedding</a></span><a href="http://www.bokequ.com/wo/share/">Wedding-婚禮主題、情人節(jié)網(wǎng)站模板</a></li>
<li><span><a href="#">三欄布局</a></span><a href="http://www.bokequ.com/wo/share/">Column 三欄布局 個(gè)人網(wǎng)站模板</a></li>
<li><span><a href="#">個(gè)人網(wǎng)站模板</a></span><a href="http://www.bokequ.com/wo/share/">時(shí)間煮雨-個(gè)人網(wǎng)站模板</a></li>
<li><span><a href="#">古典風(fēng)格</a></span><a href="http://www.bokequ.com/wo/share/">花氣襲人是酒香—個(gè)人網(wǎng)站模板</a></li>
</ol>
</div>
<div class="visitors">
<h2>最新評(píng)論</h2>
<dl>
<dt><img src="images/s8.jpg" alt="看雪個(gè)人博客模板">
<dt>
<dd>DanceSmile
<time>38分鐘前</time>
</dd>
<dd>在 <a href="http://www.yangqq.com/jstt/bj/2013-07-28/530.html" class="title">如果要學(xué)習(xí)web前端開發(fā)，需要學(xué)習(xí)什么？ </a>中評(píng)論：</dd>
<dd>文章非常詳細(xì)，我很喜歡.前端的工程師很少，我記得幾年前yahoo花高薪招聘前端也招不到</dd>
</dl>
<dl>
<dt><img src="images/s7.jpg" alt="看雪個(gè)人博客模板">
<dt>
<dd>yisa
<time>2小時(shí)前</time>
</dd>
<dd>在 <a href="http://www.bokequ.com/blog/7/" class="title">>青春往事個(gè)人博客模板 - bokequ.com</a>中評(píng)論：</dd>
<dd>我要下載個(gè)人博客模板</dd>
</dl>
<dl>
<dt><img src="images/s6.jpg" alt="看雪個(gè)人博客模板">
<dt>
<dd>個(gè)人博客
<time>12月7日</time>
</dd>
<dd>在 <a href="http://www.bokequ.com/wo/" class="title">如果個(gè)人博客網(wǎng)站再?zèng)]有價(jià)值，你還會(huì)堅(jiān)持嗎？ </a>中評(píng)論：</dd>
<dd>博客色彩豐富，很是好看</dd>
</dl>
<dl>
<dt><img src="images/s2.jpg" alt="看雪個(gè)人博客模板">
<dt>
<dd>小林博客
<time>12月7日</time>
</dd>
<dd>在 <a href="http://www.bokequ.com/wo/" class="title">如果個(gè)人博客網(wǎng)站再?zèng)]有價(jià)值，你還會(huì)堅(jiān)持嗎？ </a>中評(píng)論：</dd>
<dd>博客色彩豐富，很是好看</dd>
</dl>
<dl>
<dt><img src="images/s5.jpg" alt="看雪個(gè)人博客模板">
<dt>
<dd>MAOLAI博客
<time>12月7日</time>
</dd>
<dd>在 <a href="http://www.bokequ.com/wo/" class="title">如果個(gè)人博客網(wǎng)站再?zèng)]有價(jià)值，你還會(huì)堅(jiān)持嗎？ </a>中評(píng)論：</dd>
<dd>博客色彩豐富，很是好看</dd>
</dl>
</div>
<div class="flickr">
<h2>最近訪客</h2>
<ul>
<li><a href="#" rel="nofollw" title="夢(mèng)想霞個(gè)人博客"><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="草根站長(zhǎng)目錄"><img src="images/04.jpg"></a></li>
<li><a href="#" rel="nofollw" title="藝小昔個(gè)人博客"><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="動(dòng)漫資訊"><img src="images/s6.jpg"></a></li>
<li><a href="#" rel="nofollw" title="超神學(xué)院"><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 時(shí)間：大約在冬季 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>
<!-- 代碼結(jié)束 -->
</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 一級(jí)導(dǎo)航----------------- */
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 }
/* 圖片向上翻轉(zhuǎn)的動(dòng)畫效果 */
.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 設(shè)置鼠標(biāo)放上去顯示文字的效果 */
.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 } /* 結(jié)構(gòu)性偽類選擇符 選擇第一個(gè)p標(biāo)簽，并且設(shè)置上、左距離是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側(cè)邊欄--------------------------*/
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"; }/* 數(shù)字列表前面統(tǒng)一加0 */
.tuijian li span { margin-right: 10px; font-size: 14px; font-family: "微軟雅黑"; }
.tuijian li:nth-child(-n+3) span { width: 39px; color: #999 } /* 選擇從第3個(gè)開始倒數(shù)也就是第三個(gè)前面的 */
.tuijian li:nth-child(-n+3) strong { font-size: 24px; font-weight: normal; }
.tuijian li:first-child span { color: #f8490b; } /* 選擇第一個(gè) */
.tuijian li:nth-child(n+3) { line-height: 24px } /* 選擇從第3個(gè)開始往后數(shù) */
.tuijian li:nth-child(4) { margin: 5px 0 0 0 } /* 選擇第四個(gè) */
/* 圖文推薦 */
.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; }
/* 熱門點(diǎn)擊 */
.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 }
/* 最新評(píng)論 */
.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; }看雪時(shí)間軸個(gè)人博客模板代碼演示http://www.bokequ.com/blog/12/
億互聯(lián)網(wǎng)用戶需求，促使300萬WEB前端人才缺口。HTML5的蔓延讓不少開發(fā)商發(fā)現(xiàn)了機(jī)遇，HTML5開發(fā)人才也遭受瘋搶，但傳統(tǒng)前端人才很難駕馭移動(dòng)端，因此，HTML5開發(fā)人才出現(xiàn)嚴(yán)重緊缺狀態(tài)，很多企業(yè)陷入兩難境地。
據(jù)統(tǒng)計(jì)，我國對(duì)于高級(jí)HTML5開發(fā)人員的缺口將達(dá)到12萬左右。目前，北京、上海、廣州、深圳等地HTML5開發(fā)人員的薪資待遇更是一高再高。想成為一名優(yōu)秀的HTML5開發(fā)人員嗎？那么這份學(xué)習(xí)資料值得大家收藏學(xué)習(xí)了。
一.HTML5初級(jí)開發(fā)工程師
1.HTML5介紹
互聯(lián)網(wǎng)發(fā)展趨勢(shì)
H5語言的優(yōu)勢(shì)
簡(jiǎn)單易學(xué)人人都能編程
H5就業(yè)和薪資情況
H5常見的項(xiàng)目與產(chǎn)品
H5的未來與方向
2.HTML基礎(chǔ)
HTML簡(jiǎn)介與歷史版本
常用開發(fā)軟件
常見標(biāo)簽與屬性
表格與表單
標(biāo)簽規(guī)范與標(biāo)簽語義化
實(shí)戰(zhàn)：網(wǎng)頁結(jié)構(gòu)布局
3.CSS基礎(chǔ)
css簡(jiǎn)介與基本語法
常見的各種樣式屬性
CSS選擇器與標(biāo)簽類型
理解盒子模型與CSS重置
浮動(dòng)與定位
利用photoshop工具測(cè)量樣式
HTML+CSS開發(fā)網(wǎng)頁
實(shí)戰(zhàn)：高仿電商首頁效果
4.CSS3基礎(chǔ)
css3常見樣式
css3選擇器
變形與動(dòng)畫
3D效果與關(guān)鍵幀
彈性盒模型
5.移動(dòng)端布局
移動(dòng)端基本概念
viewport窗口設(shè)置
移動(dòng)端布局方案
rem、vh、vw等單位
響應(yīng)式布局
bootstrap框架
6.JavaScript基礎(chǔ)
JS簡(jiǎn)介
JS變量
數(shù)據(jù)類型與類型轉(zhuǎn)換
運(yùn)算符與優(yōu)先級(jí)
流程控制-if..else
流程控制-switch...case
流程控制-while、do..while、for循環(huán)
break、continue語法
函數(shù)定義與調(diào)用
全局變量與局部變量
函數(shù)傳參與返回值
函數(shù)作用域與變量作用域
DOM的基本操作
定時(shí)器使用
this指向與修改指向
數(shù)組、字符串等方法操作
時(shí)間對(duì)象與正則對(duì)象
掌握常見BOM操作
常見事件與事件細(xì)節(jié)
JSON與AJAX
JSONP跨域操作
前端cookie的使用
實(shí)戰(zhàn)：JS配合HTML與CSS完成電商項(xiàng)目
7.jquery框架
jquery框架介紹及優(yōu)勢(shì)介紹
jquery核心思想
jquery常見方法
jquery動(dòng)畫操作
jqueryAJAX操作
jquery工具方法
利用jquery快速開發(fā)網(wǎng)頁
8.PHP基礎(chǔ)
PHP簡(jiǎn)介與基本語法
mysql數(shù)據(jù)庫及sql語法
apache服務(wù)器與集成開發(fā)工具
PHP鏈接數(shù)據(jù)庫
PHP與AJAX交互
實(shí)戰(zhàn)：留言板、登錄、注冊(cè)等
9.H5基礎(chǔ)項(xiàng)目
項(xiàng)目簡(jiǎn)介
項(xiàng)目功能演示
項(xiàng)目劃分及框架
編寫HTML頁面結(jié)構(gòu)
設(shè)置CSS樣式
添加JS交互
可選框架：bootstrap、jquery、PHP等
項(xiàng)目調(diào)試及兼容
項(xiàng)目驗(yàn)收
二.HTML5中高級(jí)開發(fā)工程師
1.面向?qū)ο蠡A(chǔ)
面向?qū)ο蟾攀?/p>
對(duì)象和構(gòu)造函數(shù)（類）之間的關(guān)系
對(duì)象的屬性和方法
原型與原型鏈
包裝對(duì)象與內(nèi)部實(shí)現(xiàn)
對(duì)象中實(shí)現(xiàn)繼承方式
設(shè)計(jì)模式及實(shí)際運(yùn)用
2.JavaScript高級(jí)
JS算法與排序算法
promise異步處理
運(yùn)動(dòng)與tween算法
閉包與模塊化
JS組件開發(fā)
打造小型jquery框架
JS性能優(yōu)化
ES6新增功能
3.前端工程化
gulp基本使用
less、sass、babel等預(yù)編譯框架
理解模塊概念，AMD與CMD規(guī)范
前端模塊框架seaJS、requireJS
webpack基本使用
4.多人協(xié)作
svn基本用法與可視化工具
多人開發(fā)流程
git基本用法
命令行操作
分區(qū)及分支等概念
遠(yuǎn)程github操作
實(shí)戰(zhàn)：多人協(xié)作開發(fā)項(xiàng)目
5.HTML5新功能
canvas繪圖
svg繪圖
音頻與視頻
本地存儲(chǔ)與離線存儲(chǔ)
地理信息
web Worker
web Socket
6.NodeJS基礎(chǔ)
node與npm概念及使用
node模塊方式
node常用內(nèi)置模塊
node爬蟲與文件自動(dòng)化處理
node搭建服務(wù)器與簡(jiǎn)單路由
mongodb非關(guān)系數(shù)據(jù)庫
mongodb安裝與db操作
mongodb增刪改查
mongodb與node結(jié)合開發(fā)
mongoose數(shù)據(jù)建模
mongoose與node結(jié)合開發(fā)
express框架
中間件與ejs模板引擎
Robomongo與postman工具
express+mongoose搭建后端框架
設(shè)計(jì)Restful API
實(shí)戰(zhàn)：前后端分離式開發(fā)
7.微信端開發(fā)
移動(dòng)端交互與移動(dòng)端事件
微信場(chǎng)景與swiper框架
微信公眾號(hào)介紹
網(wǎng)頁授權(quán)與JSSDK
微信web開發(fā)者工具使用
微信小程序開發(fā)
實(shí)戰(zhàn)：公眾號(hào)與小程序項(xiàng)目同步開發(fā)
三.HTML5大神級(jí)開發(fā)工程師
1.VueJS框架
Vue框架簡(jiǎn)介
漸進(jìn)式與響應(yīng)式
模板語法與計(jì)算屬性
指令與數(shù)據(jù)處理器
生命周期
組件與組件通信
Vuex狀態(tài)管理
Vue動(dòng)畫與路由
單文件組件與腳手架
基于Vue的組件框架
實(shí)戰(zhàn)：Vue與Node全棧開發(fā)
2.ReactJS框架
React框架簡(jiǎn)介
JSX語法
組件與組件通信
屬性與狀態(tài)設(shè)置
虛擬DOM
生命周期
redux架構(gòu)
react-redux使用
react-router使用
Mem腳手架使用
實(shí)戰(zhàn)：React與Node全棧開發(fā)
3.AngularJS框架
Angular框架簡(jiǎn)介
TypeScript基礎(chǔ)與進(jìn)階
開發(fā)環(huán)境配置
架構(gòu)、模塊與組件
模板、元數(shù)據(jù)與數(shù)據(jù)顯示
服務(wù)于指令
依賴注入
路由
實(shí)戰(zhàn)：Angular與Node全棧開發(fā)
4.Hybrid App開發(fā)
App介紹與分類
Android/ios與H5通信
Cordova/Phonegap框架
HTML5+基于HB工具
React Native
5.前端架構(gòu)
單元測(cè)試與編寫測(cè)試用例
自動(dòng)化測(cè)試方案
前端安全與HTTP協(xié)議
項(xiàng)目上線與一鍵部署
數(shù)據(jù)統(tǒng)計(jì)與SEO優(yōu)化
搭建組件庫與按需載入
瀏覽器渲染與瀏覽器引擎
深入理解后端開發(fā)模式
更多學(xué)習(xí)資料，戳左下角哦~
TML5 提供了播放音頻文件的標(biāo)準(zhǔn)。
互聯(lián)網(wǎng)上的音頻
直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁上播放音頻的標(biāo)準(zhǔn)。
今天，大多數(shù)音頻是通過插件（比如 Flash）來播放的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規(guī)定了在網(wǎng)頁上嵌入音頻元素的標(biāo)準(zhǔn)，即使用 <audio> 元素。
瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.
注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.
HTML5 Audio - 如何工作
如需在 HTML5 中播放音頻，你需要使用以下代碼：
實(shí)例
<audiocontrols><sourcesrc="horse.ogg"type="audio/ogg"><sourcesrc="horse.mp3"type="audio/mpeg">您的瀏覽器不支持 audio 元素。</audio>
control 屬性供添加播放、暫停和音量控件。
在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。
<audio> 元素允許使用多個(gè) <source> 元素. <source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個(gè)支持的音頻文件
音頻格式及瀏覽器支持
目前, <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 標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <audio> | 定義了聲音內(nèi)容 |
| <source> | 規(guī)定了多媒體資源, 可以是多個(gè)，在 <video> 與 <audio>標(biāo)簽中使用 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
