純干貨！CSS3實(shí)現(xiàn)黑膠唱片效果

信很多小伙伴對(duì)黑膠唱片的動(dòng)態(tài)效果的實(shí)現(xiàn)方法非常好奇，今天我們就從四個(gè)方面講解如何用CSS3去實(shí)現(xiàn)這個(gè)效果。

transform屬性

Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個(gè)屬性允許你將元素旋轉(zhuǎn)，縮放，移動(dòng)，傾斜等。

?? Translate函數(shù)

定義元素偏移方向以及偏移距離的大小。

● translateX(x)

定義X軸轉(zhuǎn)換，即僅在水平方向移動(dòng)，正值向右移動(dòng)，負(fù)值向左移動(dòng)，原理如下圖：

元素向右移動(dòng)了30px

● translateY(y)

定義Y軸轉(zhuǎn)換，即僅在垂直方向移動(dòng)，也就是下面正方體的前后移動(dòng)，正值垂直方向向下，負(fù)值垂直方向向上，原理如下圖：

元素向下移動(dòng)了30px

● translate(x,y)

定義2D轉(zhuǎn)換，即水平方向和垂直方向同時(shí)移動(dòng)，原理如下圖：

元素分別向右、向下移動(dòng)了30px

?? Scale函數(shù)

定義元素放大或縮小的大小。

● scaleX(x)

通過(guò)設(shè)置X軸值來(lái)定義縮放轉(zhuǎn)換，效果如下圖：

沿著X軸縮小0.8倍

● scaleY(y)

通過(guò)設(shè)置y軸值來(lái)定義縮放轉(zhuǎn)換，效果圖如下圖：

沿著Y軸縮小0.8倍

● scale(x,y)

定義2D縮放轉(zhuǎn)換，默認(rèn)值為1，當(dāng)大于1時(shí)，元素放大，當(dāng)小于1大于0時(shí)，元素縮小。效果如下：

沿著X和Y軸縮小0.8倍

?? Rotate函數(shù)

定義元素按規(guī)定角度進(jìn)行旋轉(zhuǎn)。將元素看做成一個(gè)正方體。

● rotateX(angle)

定義沿著X軸的3D旋轉(zhuǎn)：

第一張為俯視圖，第二張是3D視圖

沿X軸順時(shí)針旋轉(zhuǎn)30度，它俯視圖的寬度應(yīng)該為（width*cos(pi/6)）。

● rotateY(angle)

定義沿著y軸的3D旋轉(zhuǎn)：

第一張為俯視圖，第二張是3D視圖

沿Y軸順時(shí)針旋轉(zhuǎn)30度，它俯視圖的長(zhǎng)度度應(yīng)該為（height*cos(pi/6)）。

● rotateZ(angle)

定義沿著z軸的3D旋轉(zhuǎn)：

沿著z軸順時(shí)針旋轉(zhuǎn)30度，它的長(zhǎng)度和寬度是不變的，就相當(dāng)于你轉(zhuǎn)動(dòng)了一個(gè)方形的轉(zhuǎn)盤，它的方向沿著順時(shí)針?lè)较蜣D(zhuǎn)30度。

● rotate(angle)

定義2D旋轉(zhuǎn)，正值順時(shí)針，負(fù)值逆時(shí)針，使元素旋轉(zhuǎn)，但是不變形：

俯視圖和3D視圖相同，它是2D旋轉(zhuǎn)，即在平面旋轉(zhuǎn)，效果和rotateZ(angle)相似。

?? transform-origin屬性

transform-origin 屬性允許您改變被轉(zhuǎn)換元素的位置。2D 轉(zhuǎn)換元素能夠改變?cè)?x 和 y 軸。3D 轉(zhuǎn)換元素還能改變其 Z 軸。

語(yǔ)法：

transform-origin：x-axis y-axis z-axis；

默認(rèn)值：

transform-origin 50% 50% 0

注釋：該屬性必須與 transform 屬性一同使用。

transition屬性

transition 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置四個(gè)過(guò)渡屬性：

● transition-property

● transition-duration

● transition-timing-function

● transition-delay

注釋：請(qǐng)始終設(shè)置 transition-duration 屬性，否則時(shí)長(zhǎng)為0，就不會(huì)產(chǎn)生過(guò)渡效果。

語(yǔ)法：

transition：property duration timing-function delay；

?? transition-property 屬性

語(yǔ)法：

transition-property: none | all | property;

?? transition-timing-function 屬性

屬性規(guī)定過(guò)渡效果的速度曲線。

語(yǔ)法：

animation屬性

animation 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置六個(gè)動(dòng)畫屬性：

● animation-name

● animation-duration

● animation-timing-function

● animation-delay

● animation-iteration-count

● animation-direction

注釋：請(qǐng)始終規(guī)定 animation-duration 屬性，否則時(shí)長(zhǎng)為0，就不會(huì)播放動(dòng)畫了。

語(yǔ)法：

animation：name duration timing-function delay iteration-count direction；

?? animation-iteration-count 屬性

語(yǔ)法：

animation-iteration-count: n | infinite;

?? animation-direction 屬性

定義是否應(yīng)該輪流反向播放動(dòng)畫。

語(yǔ)法：

animation-direction: normal | alternate;

?? animation-play-state屬性

animation-play-state 屬性規(guī)定動(dòng)畫正在運(yùn)行還是暫停。

* 注意：若不設(shè)置animation-play-state頁(yè)面加載后就執(zhí)行，且沒(méi)有定義animation-iteration-count動(dòng)畫的播放次數(shù)，播放一次就結(jié)束。

語(yǔ)法：

animation-play-state：paused | running；

默認(rèn)值：

animation-play-state: running；

@keyframes規(guī)則

通過(guò) @keyframes規(guī)則，您能夠創(chuàng)建動(dòng)畫。創(chuàng)建動(dòng)畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。在動(dòng)畫過(guò)程中，您能夠多次改變這套 CSS 樣式。

以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞 "from" 和 "to"，等價(jià)于 0% 和 100%。0% 是動(dòng)畫的開(kāi)始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。

* 注釋：請(qǐng)使用動(dòng)畫屬性來(lái)控制動(dòng)畫的外觀，同時(shí)將動(dòng)畫與選擇器綁定。

語(yǔ)法：

@keyframes animationname {@keyframes-selector {css-styles;}}

完整代碼：

<title>H5黑膠唱片效果</title>

<style>

@-webkit-keyframes soundPaying { from {

-webkit-transform:rotate(0deg);

transform:rotate(0deg)

}

to { -webkit-transform: rotate(360deg); transform: rotate(360deg) }

}

@keyframes soundPaying { from {

-webkit-transform:rotate(0deg);

transform:rotate(0deg)

}

to { -webkit-transform: rotate(360deg); transform: rotate(360deg) }

}

.cover.SE_ {

cursor: pointer;

position: relative;

float: left;

width: 180px;

height: 180px;

background: url(jp.png) center no-repeat;

background-size: 100%

}

.cover.SE_::before {

content: '';

position: absolute;

right: 0;

top: 0;

width: 18px;

height: 18px;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAA51BMVEUGBgYAAAAAAADh4eHT09PBwcEAAAC2trbl5eUAAAAAAAC6urrHx8fm5ubk5OT9/f339/f19fXv7+/h4eHs7Oza2trd3d3k5OTMzMy6urrk5OTc3Ny2trbk5OTg4OCtra1ISEjPz88NDQ3v7+/39/fv7+/l5eX19fXn5+fV1dXS0tLFxcXn5+fAwMDg4ODBwcHR0dHi4uLe3t7h4eHMzMzCwsLY2Ni1tbXJycne3t7S0tLKysrg4OCgoKDZ2dmNjY2AgIDe3t7Pz8/////19fX09PTs7Oz39/f6+vr5+fnx8fHw8PDv7+/BEK5NAAAAQ3RSTlMCAASBhYsGjoALCY2Jemrx5NG4srGDfHVwZ2JdU0YpHw4KB97azcvKyry2pJ6dm5iWjYqJgmloWVFOST45MygmGhcQS+x9PgAAANpJREFUGNM1z9dywjAQhWGhldzt0FsgBNJ77z1HNmnv/zzRLvCPNKP9Zm+kapx6HuZ5MZ4uBr4fRRQRUdTbkNGfz5yovddoXlHkzZNSQ7qow7d2TL2pYnqlzjYwd94uaSz0QKfAX1VVQLNTKG7dtIHfsvxxaJjuklqAc678xo7paqZHcw58OTcHWuZWaGKyfUh1a56E9H2W7rJsnWX9mRLa7Nvw5PDgKLTXE16qsY1sGoapvXkPVhQkb6PB4O4lnmkPTErrJInjOJEd+bZgEGgtwiQmiQitdPn+B3YeGfBlRw3fAAAAAElFTkSuQmCC) center no-repeat;

background-size: 100%

}

.cover.SE_::after {

content: '';

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

width: 24px;

height: 24px;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAALVBMVEUAAAD///////////////////////////////////////////////////////+hSKubAAAADnRSTlMAgBwPy8SPdm5VRwPjfW3Ql2wAAACDSURBVBjTYwCDzdYMMMC0QlCwSwHCZp4oCASSBmCOuiAYFIEVXRRMffcuTFAWpNBcUOQdEDgKFgM5EwXPgThvBCWBqkASECkFBi7BPAjnmeACBg7BOAjnqWADw0bBd1AgKM1giOAIo3BQlKEYgGI0iqXIzkF3KMILaJ5DeBszQBBBBQBsk3H1FEaVjAAAAABJRU5ErkJggg==) center no-repeat;

background-size: 100%

}

.cover .needle.SE_ {

position: absolute;

right: 7px;

top: 10px;

display: block;

width: 27px;

height: 109px;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABtCAMAAABnceq7AAABlVBMVEUAAAAAAADl5eUAAADm5uYAAAAAAAAAAADm5uYAAADl5eUAAAAAAAAAAAAAAADg4ODKysoAAAAAAAAUFBQAAAAAAADs7OwAAADh4eHe3t7n5+fl5eXz8/P39/f8/Pzw8PDj4+Pg4ODv7+/g4ODq6urh4eHs7Ozr6+vh4eHt7e3MzMzZ2dnm5ubf39/R0dHl5eXj4+OMjIzh4eHr6+vl5eW9vb3p6enk5OSKiorh4eHn5+ccHBzp6ekUFBT////w8PDw8PDh4eH5+fnu7u7t7e3z8/Pf39/Pz8/y8vLs7Ozm5ubf39/q6urt7e3f39/s7Oyfn5/i4uLt7e3r6+vMzMzFxcXs7OzW1tbFxcXt7e2hoaHs7OzIyMitra3j4+Pr6+vr6+tnZ2d3d3fm5uZ+fn7u7u6fn5/s7OwiIiJRUVETExNubm7k5OTs7Ow3Nzfs7OxZWVkjIyPq6urz8/Py8vL////t7e3////s7Ozv7+/19fXw8PDr6+vk5OTn5+fp6enm5ubX19fU1NT5+fng4ODPz8/MzMyqvMvXAAAAdnRSTlMAAocFvwkUDJEQtxYrGyHApCUYNC8oIB74w7+9Ggn+/vzy8ejl393Zz8O9tqqmnp2XkpGLfnlrYl5VRTYuLAP59/Xx6ufl2NPSy8vHube3rq2opqKhm5aWko2IhoODd3RycmlnW1hST0tCQjo5NyooKB0YFRMGlwdhPwAAAgRJREFUSMft01dT20AQB/BclJMi5BLZsZ1gQ0JCILQQSgg9vffee+/9TudTcWzgc7PDADMn3fqBNxj/X3+zq93Z0zYsY3cqGE34bBCz7R5rb2I7Wtaylm06a9+QMVbGbCfz2jAbZt4gZleFfxSzHhkdR+gHE0EFsTHhHUKo46wIsc89Ed6eop6KB0TtFlJ2TUZdf/X0TrDgOTJItwgPIx3vwyCzevp2ggXDSNklGR2c19MLwfZP6akCq2WRjjek3/VbTx/2sWBcT/96RHQe6fgIVvuqp9mTLBhCyvpgtQ49TcBqyCP5c0aEV5COt6V/Cjn2NKw2qqf5XhlhT+slHHsKsV7pY8cuejKcRuyNJ7qxf2PcY5fxf5GVm1jbljbfR4yQ0TC8bhCiIYM+WFgYoIAasu/V6/02YMKo/au/Xr/wEzBuhuW8r0KO5SyDJCw9uWIlO2l2ZlIKIZ+5Jo0ZoWbhdVirhY9TuZgRwyrlX/2HjOQz0FQ10/08sri0tHjzY8qhRC1LfzrHV3L6bUmZlMAkD/lqBlxTNbOwa82yKZhUmTK1bnt3O00styHLJnoW7vKG5LxahVni5h7h1YBzn/FsAUzdb93KrqmalX66ZkOxKxnU/N7X2eC80Xnxi2OBKYVOZi4/M5Ofy+QSdzAs00lDHNOiYArCO6MWhFJD89CAIYSosgxfKLJmNrwaGwAAAABJRU5ErkJggg==) center no-repeat;

background-size: 100%;

-webkit-transition: all .3s;

-o-transition: all .3s;

transition: all .3s;

-webkit-transform-origin: top;

-ms-transform-origin: top;

transform-origin: top;

-webkit-transform: rotateZ(-20deg);

-ms-transform: rotate(-20deg);

transform: rotateZ(-20deg);

}

.cover.playing .img.SE_ {

-webkit-animation-play-state: running;

animation-play-state: running;

}

.cover.playing .needle.SE_ {

-webkit-transform: rotateZ(0);

-ms-transform: rotate(0);

transform: rotateZ(0);

}

.cover .img.SE_ {

position: absolute;

left: 50%;

top: 50%;

margin-top: -59.2px;

margin-left: -59.2px;

width: 118.4px;

height: 118.4px;

border-radius: 50%;

-webkit-animation: soundPaying 7s linear infinite ;

animation: soundPaying 7s linear infinite ;

-webkit-animation-play-state: paused;

animation-play-state: paused;

}

.play-btn.fR_ {

float: left;

cursor: pointer;

margin-top: 70px;

margin-left: 50px;

}

.play-btn .icon.fR_ {

border-radius: 50%;

-webkit-box-shadow:0 4px 8px 0 rgba(252,88,50,.5);

box-shadow:0 4px 8px 0 rgba(252,88,50,.5);

display: inline-block;

vertical-align: middle;

width: 45px;

height: 45px;

margin-right: 20px;

}

.play-btn .play-icon.fR_ {

background: url(play.png) no-repeat 0 0;

background-size: 100%

}

.play-btn .pause-icon.fR_ {

background: url(pause.png) no-repeat 0 0;

background-size: 100%

}

</style>

</head>

<body>

</div>

function play(obj){

var status=$(obj).attr("status");

if(status=='pause'){

$(obj).find('i').addClass('pause-icon');

$('.cover').addClass('playing');

$(obj).attr("status",'playing')

}else{

$('.cover').removeClass('playing');

$(obj).find('i').removeClass('pause-icon').addClass('play-icon');

$(obj).attr("status",'pause')

}

</script>

</body></html>

快運(yùn)用上面的知識(shí)點(diǎn)去實(shí)現(xiàn)黑膠唱片效果吧，相信你一定可以完成的很棒～

雪時(shí)間軸個(gè)人博客模板,女生唯美簡(jiǎn)潔個(gè)人博客靜態(tài)頁(yè)面模板，藍(lán)色時(shí)間軸個(gè)人網(wǎng)頁(yè)模板，下雪空間個(gè)人模板代碼

1、html頁(yè)面代碼

<!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)站首頁(yè)</a></li>
    <li><a href="http://www.bokequ.com/blog/1/" target="_blank" title="個(gè)人博客模板">個(gè)人博客模板</a></li>
    <li><a href="#"  title="圖書(shū)推薦">圖書(shū)推薦</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="碎言碎語(yǔ)">碎言碎語(yǔ)</a></li>
  </ul>
  <!--獲取當(dāng)前頁(yè)導(dǎo)航 高亮顯示標(biāo)題-->
</div>
<!--header end-->
<div id="mainbody">
  <div class="info">
    <figure> <img src="images/art1.jpg"  alt="看雪，是一種唯美的心境">
      <figcaption><strong>看雪，是一種唯美的心境</strong> 　　喜歡雪，沒(méi)有理由，只是愛(ài)它的輕盈，卻不張揚(yáng);癡迷于它的典雅，卻不做作。純純的顏色，潔白如晶，如天使，似鵝毛，飄飄灑灑，漫天飛舞。它雖沒(méi)有華麗的外套，白色卻是最好的衣冠;它雖稱不上雍容華貴，素雅卻是最佳的裝扮。帶著它的雅致，邁著絕美的舞姿，隨著冬的到來(lái)而翩翩起舞，洋洋灑灑，一瀉千里。 </figcaption>
    </figure>
    <div class="card">
      <h1>關(guān)于我</h1>
      <p>網(wǎng)名：keyboard | 草戊水來(lái)</p>
      <p>職業(yè)：Web前端設(shè)計(jì)師、網(wǎng)頁(yè)設(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> 　　冬天總是不如夏春秋一般柔軟多情，既然來(lái)了，就讓人記得刻苦銘心。人生如此般，雪一般的歲月，苦中作樂(lè)，暫不說(shuō)這是那些文人雅客筆下描寫的那樣如詩(shī)如畫，卻也是每一個(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">說(shuō)好陪我看第一場(chǎng)雪。雪下了，你在哪？</a></h2>
          <ul class="textinfo">
            <a href="#"><img src="images/s5.jpg"></a>
            <p> 　　1、雪很美， 當(dāng)它落下來(lái)的那一刻，就注定要化成水。2、世界上沒(méi)有不融化的雪，也沒(méi)有永遠(yuǎn)不變的愛(ài)情，人心都是會(huì)變的。3、純潔的雪，洗濯了骯臟的世界，邂逅的只是安靜的大地。4、冬天下雪的時(shí)候他會(huì)背我走 可是我們分手了。5、冬天的早晨， 晴朗的陽(yáng)光， 潔凈安寧的雪， 一切美的就像我喜歡的她。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> 　　雪花漫天卷地落下來(lái)，猶如鵝毛一般，紛紛揚(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è)大大的擁抱，一杯喜歡的咖啡，牽手去踩踩雪，聽(tīng)著咯吱咯吱的聲音。每年下雪的時(shí)候，都是我最想家的時(shí)候，以前北京下雪總是沒(méi)有大連下的那么痛快，所以最冷的時(shí)候最懷念家鄉(xiāng)的大學(xué)和溫暖的被窩，原來(lái)寒冷真的會(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">看雪賞雪心情說(shuō)說(shuō)</a></h2>
          <ul class="textinfo">
            <a href="#"><img src="images/s1.jpg"></a>
            <p> 　　踏上由雪鋪砌的小路，獨(dú)自漫步，踩上去聽(tīng)那咯吱咯吱的樂(lè)聲，真比那天籟之音還要醉人，難怪有詩(shī)這樣寫到“此曲只應(yīng)天上有，人間哪得幾回聞。”你瞧，遠(yuǎn)出那被雪覆蓋的枯枝，似開(kāi)出了一朵朵白色的小花，真有點(diǎn)“忽如一夜春風(fēng)來(lái)，千樹(shù)萬(wàn)樹(shù)梨花開(kāi)”的味道，卻又好似玉雕的一般，晶瑩剔透。還有那房屋上，也都披上了厚厚的雪戎裝。</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)閻?ài)你，更是因?yàn)槎?lt;/a></h2>
          <ul class="textinfo">
            <a href="#"><img src="images/12.jpg"></a>
            <p> 　　外邊仍然飄著轉(zhuǎn)身急逝的雪花，多想在看看落滿操場(chǎng)的雪花，多想和你踏著，聽(tīng)著雪碎的聲音，如今只剩下慘淡的雪還在下，只能聽(tīng)見(jiàn)自己心碎的聲音還在顫抖。望著你離開(kāi)的背影，我告訴自己要堅(jiān)強(qiáng)，不哭，是因?yàn)閻?ài)你，更是因?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)大后看雪，看的是心境。不同的人生階段看到的雪花固然不同，有看出驚艷的，有看出傷感的，有看出華麗的，有看出蒼白的，不論看到了什么樣的心境，雪還是雪，只是落在誰(shuí)的心上，就堆積成什么樣的形狀。我到真心認(rèn)為，雪就是雪，季節(jié)的使者，有它的時(shí)經(jīng)典散文摘抄:候，證明這個(gè)季節(jié)是狂歡的，沒(méi)它的時(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>我很快樂(lè)</dd>
          <dd class="icon-artist"><span></span>歌手：劉惜君</dd>
          <dd class="icon-album"><span></span>專輯：《我很快樂(lè)》</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)色小清新說(shuō)說(shuō)文章類織夢(mèng)CMS個(gè)人博客模板</a></li>
          <li><span><strong>3</strong></span><a target="_blank" href="http://www.bokequ.com/blog/8/">花開(kāi)花落—古典個(gè)人博客模板</a></li>
          <li><span><strong>4</strong></span><a target="_blank" href="http://www.bokequ.com/winter/">心情日記_心情語(yǔ)錄隨筆個(gè)人博客模板</a></li>
          <li><span><strong>5</strong></span><a target="_blank" href="http://www.bokequ.com/blog/sep/">九月.夢(mèng)見(jiàn)夏天結(jié)束的樣子個(gè)人博客</a></li>
          <li><span><strong>6</strong></span><a target="_blank" href="http://www.bokequ.com/time/">小清新個(gè)人博客主頁(yè)模板 - 用照片記錄時(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="#">愛(ài)情美文</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前端開(kāi)發(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="心情說(shuō)說(shuō)"><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="唯美說(shuō)說(shuō)樂(lè)園"><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仿騰訊回頂部和建議 代碼開(kāi)始 -->
<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è)開(kāi)始倒數(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è)開(kāi)始往后數(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/

為一位企業(yè)主或網(wǎng)站管理員，相信你一定聽(tīng)過(guò)SEO，也就是搜索引擎優(yōu)化。這個(gè)東西的作用就是幫助你的網(wǎng)站在相關(guān)關(guān)鍵字的搜索引擎結(jié)果頁(yè)面 (SERP) 上排名更靠前。而想要做到更好的SEO，就必須得對(duì)你網(wǎng)站的HTML代碼有個(gè)透徹的理解。

所謂HTML，就是超文本標(biāo)記語(yǔ)言。這個(gè)東西是用來(lái)創(chuàng)建網(wǎng)頁(yè)的編程語(yǔ)言。HTML代碼主要是由不同的元素或標(biāo)簽組成，用來(lái)定義網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容。只要用對(duì)了HTML標(biāo)簽，就可以大幅提升你網(wǎng)站的搜索引擎優(yōu)化啦！因?yàn)樗阉饕嫠惴ǘ际怯眠@些標(biāo)簽來(lái)理解你頁(yè)面的內(nèi)容滴~

今天我們要聊的話題是：讓你的網(wǎng)站 SEO 更上一層樓的前10個(gè)HTML標(biāo)記！相信你們聽(tīng)到這個(gè)，肯定都迫不及待地想知道是哪些標(biāo)記了吧！那就跟我一起來(lái)看看這10個(gè)HTML標(biāo)記的代碼和如何有效地使用它們吧！

1、標(biāo)題標(biāo)簽：

要讓你的網(wǎng)站在搜索引擎里更出風(fēng)頭，<title> 標(biāo)簽可是超重要的哦！因?yàn)樗阉饕婢褪峭ㄟ^(guò)這個(gè)標(biāo)簽來(lái)展示你的網(wǎng)頁(yè)標(biāo)題的。所以，一定要在<title> 標(biāo)簽里面包含頁(yè)面的主要關(guān)鍵字，這樣才能更好地優(yōu)化你的SEO哦~

例子：

<head>
<title>最佳 SEO 技巧 | 艾編程博客</title>
</head>

2、元描述標(biāo)簽：

寶貝們，要想在搜索引擎里面脫穎而出，<meta name="description"> 標(biāo)簽可是必不可少的哦！它可以提供網(wǎng)頁(yè)的簡(jiǎn)短描述，讓搜索引擎在搜索結(jié)果中展示哦所以，千萬(wàn)不要忘了在這個(gè)標(biāo)簽里面包含頁(yè)面的主要關(guān)鍵字，這樣才能更好地優(yōu)化你的SEO呢。

例子：

<head>
<meta name="description" content="學(xué)習(xí)最好的 SEO 技巧和技巧，讓您的網(wǎng)站在搜索引擎中排名更高。">
</head>

3、H標(biāo)簽：

<h1>標(biāo)簽可是超級(jí)重要的哦！它可以用來(lái)定義網(wǎng)頁(yè)的主標(biāo)題，幫助搜索引擎更好地理解頁(yè)面的主要主題。當(dāng)然，在 <h1>標(biāo)簽中也要包含頁(yè)面的主要關(guān)鍵字才能更好地優(yōu)化SEO哦！不過(guò)要記得，標(biāo)題標(biāo)簽有六個(gè)，按照重要性降序使用。比如說(shuō)，H1用于頁(yè)面的主標(biāo)題，H2用于副標(biāo)題，H3用于子標(biāo)題，這樣就可以更好地優(yōu)化你的頁(yè)面哦！`

例子：

< h1 >最佳 SEO 技巧</ h1 >

4、圖片替代文字標(biāo)簽：

圖像替代文本img標(biāo)簽可是非常有用的哦！它可以用來(lái)描述網(wǎng)頁(yè)上圖像的內(nèi)容。如果無(wú)法顯示圖像，它會(huì)顯示為文本。而且，它還能幫助搜索引擎更好地了解圖像的上下文和相關(guān)性呢！替代文本應(yīng)該是描述性的，包括主要關(guān)鍵字，并且長(zhǎng)度不要超過(guò) 125 個(gè)字符哦！這樣可以更好地優(yōu)化你的SEO，讓你的頁(yè)面在搜索引擎里面更加突出！

例子：

<img src="image.jpg" alt="最佳 SEO 技巧">

5、錨文本標(biāo)簽

今天我們來(lái)聊聊<a>標(biāo)簽，它可是超級(jí)有用的哦！它可以用來(lái)創(chuàng)建指向其他網(wǎng)頁(yè)的鏈接。這樣一來(lái)，不僅能豐富你的頁(yè)面內(nèi)容，還能幫助搜索引擎更好地了解頁(yè)面之間的關(guān)系呢！而且，錨文本也非常重要，它應(yīng)該包含所鏈接頁(yè)面的主要關(guān)鍵字，這樣才能更好地優(yōu)化你的SEO哦！所以，記得在<a>標(biāo)簽中，添加準(zhǔn)確且豐富的錨文本，讓你的頁(yè)面更加突出吧！

例子：

<a href="https://www.arryblog.com/guide/standard/seo.html">SEO 搜索引擎網(wǎng)頁(yè)代碼優(yōu)化
</a>

6、頁(yè)腳標(biāo)簽

來(lái)聊一下<footer>標(biāo)簽，這里可以成為你網(wǎng)站一個(gè)非常重要的名片，也是給搜索引擎更好認(rèn)識(shí)你網(wǎng)站價(jià)值的關(guān)鍵！！它可以用來(lái)定義網(wǎng)頁(yè)的頁(yè)腳部分。通過(guò)在頁(yè)腳中添加相關(guān)信息，可以讓搜索引擎更好地了解網(wǎng)站及其內(nèi)容。另外，頁(yè)腳也可以包含指向相關(guān)頁(yè)面和社交媒體資料的鏈接，這樣一來(lái)，不僅可以增加頁(yè)面的互動(dòng)性，還能幫助優(yōu)化你的SEO哦！所以，記得在頁(yè)面的底部添加一個(gè)漂亮而實(shí)用的<footer>標(biāo)簽吧！

例子：

<footer>
<p>Copyright ? arryblog.com</p>
<a href="https://www.icodingedu.com">艾編程商城</a>
<a href="https://www.arryblog.com/plan/">前端新手30天挑戰(zhàn)計(jì)劃</a>
</footer>

7、架構(gòu)標(biāo)記

架構(gòu)標(biāo)記是一種結(jié)構(gòu)化數(shù)據(jù)，可以讓搜索引擎更好地理解網(wǎng)頁(yè)內(nèi)容。它可以提供頁(yè)面類型、作者、日期、位置等額外信息。添加架構(gòu)標(biāo)記可以提高頁(yè)面在SERP中的可見(jiàn)度和相關(guān)性，從而提高點(diǎn)擊率，讓您的網(wǎng)站更具吸引力。

例子：

<div itemscope itemtype="http://schema.org/Recipe">
 <h1 itemprop="name">Recipe Title Here</h1>
 <img itemprop="image" src="image.jpg">
 <p itemprop="description">Recipe description here.</p>
 <ul>
   <li itemprop="recipeIngredient">Ingredient 1</li>
   <li itemprop="recipeIngredient">Ingredient 2</li>
 </ul>
 <ul>
   <li itemprop="recipeInstructions">Step 1</li>
   <li itemprop="recipeInstructions">Step 2</li>
 </ul>
</div>

8、列表標(biāo)簽

列表標(biāo)簽可用于在網(wǎng)頁(yè)上創(chuàng)建項(xiàng)目列表。總共有三種列表標(biāo)簽，<ul>和 <ol>分別用于無(wú)序列表和有序列表，<li> 用于列出單個(gè)項(xiàng)目。列表有助于組織頁(yè)面內(nèi)容，使用戶更容易瀏覽和閱讀。

例子：

<ul>
 <li>List Item 1</li>
 <li>List Item 2</li>
</ul>

<ol>
 <li>List Item 1</li>
 <li>List Item 2</li>
</ol>

9、規(guī)范標(biāo)簽

Canonical標(biāo)簽用于指示同一頁(yè)面的多個(gè)版本中的首選 URL。它有助于解決重復(fù)內(nèi)容的問(wèn)題，并確保搜索引擎正確索引和排名首選頁(yè)面。規(guī)范標(biāo)簽應(yīng)添加到首選 URL 的頭部。

例子：

<link rel="canonical" href="https://www.arryblog.com/guide/vscode.html">

10、移動(dòng)端友好標(biāo)簽

移動(dòng)友好性是 SEO 的一個(gè)關(guān)鍵因素，因?yàn)樵絹?lái)越多的用戶通過(guò)移動(dòng)設(shè)備訪問(wèn)網(wǎng)絡(luò)。為了提供更好的用戶體驗(yàn)，您需要確保您的網(wǎng)頁(yè)在移動(dòng)設(shè)備上能夠正常顯示并具有良好的響應(yīng)性。這包括使用移動(dòng)友好的設(shè)計(jì)和布局、優(yōu)化頁(yè)面加載速度、調(diào)整字體和按鈕大小等。通過(guò)提高移動(dòng)友好性，您可以為用戶提供更好的體驗(yàn)，并在移動(dòng)搜索結(jié)果中獲得更高的排名。

例子：

< meta  name="viewport"  content="width=device-width, initial-scale=1" >
< link  rel="stylesheet"  href="mobile.css"  media="screen and (max-width: 768px)" >

總結(jié)

簡(jiǎn)單易懂的 HTML 標(biāo)簽使用可以顯著提高您網(wǎng)站的搜索引擎優(yōu)化，讓您的網(wǎng)站在搜索結(jié)果中更具優(yōu)勢(shì)。在這里，我為您總結(jié)了前 10 個(gè)必要的 HTML 標(biāo)簽，讓您的網(wǎng)站更友好、更容易被搜索引擎和用戶發(fā)現(xiàn)，讓您的網(wǎng)站領(lǐng)先于競(jìng)爭(zhēng)對(duì)手。

記住，使用正確的標(biāo)簽，避免濫用標(biāo)簽或不相關(guān)關(guān)鍵字。除此之外，您需要持續(xù)更新網(wǎng)站內(nèi)容，提高用戶體驗(yàn)，才能獲得持久的 SEO 成功。

溫馨提示：最近很多人都在聊前端，的確現(xiàn)實(shí)環(huán)境中很多人求職，沒(méi)講到企業(yè)回應(yīng)，所以就出現(xiàn)了“前端已死”的話題，那么今天我想借助SEO這篇文章聊的是，前端為何不能是復(fù)合型人才，如果你懂得一點(diǎn)SEO優(yōu)化，能夠快速讓企業(yè)獲得流量獲得用戶？如果你懂得產(chǎn)品，會(huì)設(shè)計(jì)營(yíng)銷專輯到制作營(yíng)銷專題，如果你懂得一點(diǎn)美工設(shè)計(jì)……那是不是更好！

當(dāng)然前提還是要把前端學(xué)好！

如果你才開(kāi)始學(xué)習(xí)前端，那么就可以按照標(biāo)準(zhǔn)規(guī)范進(jìn)行做開(kāi)發(fā)，可以讓你得到更好的收獲！我們這邊有一套課程，就是嚴(yán)格按照代碼規(guī)范和SEO優(yōu)化標(biāo)準(zhǔn)做的課程體系，包含了html+css+云端部署的課程體系，可以通過(guò)釘釘群里學(xué)習(xí)，有問(wèn)題在群里可以提問(wèn)，同時(shí)每節(jié)課還安排有作業(yè)，配套有階段項(xiàng)目練習(xí)和綜合項(xiàng)目實(shí)戰(zhàn)，目的是幫助大家夯實(shí)前端基礎(chǔ)，輕松入門到前端行業(yè)。

為幫助到一部分同學(xué)不走彎路，真正達(dá)到一線互聯(lián)網(wǎng)大廠前端項(xiàng)目研發(fā)要求，首次實(shí)力寵粉，打造了《30天挑戰(zhàn)學(xué)習(xí)計(jì)劃》，內(nèi)容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實(shí)企業(yè)項(xiàng)目開(kāi)發(fā)，云服務(wù)器部署上線，從入門到精通

PC端項(xiàng)目開(kāi)發(fā)（1個(gè)）
移動(dòng)WebApp開(kāi)發(fā)（2個(gè)）
多端響應(yīng)式開(kāi)發(fā)（1個(gè)）

共4大完整的項(xiàng)目開(kāi)發(fā) ！一行一行代碼帶領(lǐng)實(shí)踐開(kāi)發(fā)，實(shí)際企業(yè)開(kāi)發(fā)怎么做我們就是怎么做。從學(xué)習(xí)一開(kāi)始就進(jìn)入工作狀態(tài)，省得浪費(fèi)時(shí)間。

從學(xué)習(xí)一開(kāi)始就同步使用 Git 進(jìn)行項(xiàng)目代碼的版本的管理，Markdown 記錄學(xué)習(xí)筆記，包括真實(shí)大廠項(xiàng)目的開(kāi)發(fā)標(biāo)準(zhǔn)和設(shè)計(jì)規(guī)范，命名規(guī)范，項(xiàng)目代碼規(guī)范，SEO優(yōu)化規(guī)范

從藍(lán)湖UI設(shè)計(jì)稿到 PC端，移動(dòng)端，多端響應(yīng)式開(kāi)發(fā)項(xiàng)目開(kāi)發(fā)

真機(jī)調(diào)試，云服務(wù)部署上線；
Linux環(huán)境下的 Nginx 部署，Nginx 性能優(yōu)化；
Gzip 壓縮，HTTPS 加密協(xié)議，域名服務(wù)器備案，解析；
企業(yè)項(xiàng)目域名跳轉(zhuǎn)的終極解決方案，多網(wǎng)站、多系統(tǒng)部署；
使用使用 Git 在線項(xiàng)目部署；

這些內(nèi)容在《30天挑戰(zhàn)學(xué)習(xí)計(jì)劃》中每一個(gè)細(xì)節(jié)都有講到，包含視頻+圖文教程+項(xiàng)目資料素材等。只為實(shí)力寵粉，真正一次掌握企業(yè)項(xiàng)目開(kāi)發(fā)必備技能，不走彎路！

過(guò)程中【不涉及】任何費(fèi)用和利益，非誠(chéng)勿擾。

詳細(xì)進(jìn)入了解：30 天挑戰(zhàn)學(xué)習(xí)計(jì)劃 Web 前端從入門到實(shí)戰(zhàn) | arry老師的博客-艾編程

在線咨詢

上一篇：html元素分類及其樣式特性整理
下一篇：HTML屬性及實(shí)例

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

純干貨！CSS3實(shí)現(xiàn)黑膠唱片效果

1、標(biāo)題標(biāo)簽：

例子：

2、元描述標(biāo)簽：

例子：

3、H標(biāo)簽：

例子：

4、 圖片替代文字標(biāo)簽：

例子：

5、錨文本標(biāo)簽

例子：

6、頁(yè)腳標(biāo)簽

例子：

7、架構(gòu)標(biāo)記

例子：

8、列表標(biāo)簽

例子：

9、規(guī)范標(biāo)簽

例子：

10、移動(dòng)端友好標(biāo)簽

例子：

總結(jié)

您的項(xiàng)目需求

4、圖片替代文字標(biāo)簽：