吐血大奉獻，打造cnblogs最新最火辣的css3模板（IE9如下請勿入內） -- 初版

時間  2019-11-18
標籤 吐血 打造 cnblogs 最新 火辣 css3 css 模板 ie9 如下 請勿 入內 初版 欄目 CSS 简体版
原文   原文鏈接

一直本身都想給本身的博客打造一個獨一無二的皮膚，可是一直沒有強勁的動力去完成這件事情。後來憑藉着工做上面的需求（涉及到css3），就把本身的博客當成一個最好的試驗場地。從而產生了你如今所看到的這個模板，強烈建議你們到個人博客首頁轉一圈。這個模板是自適應的，暫時沒有作太多的自適應處理，可是也知足了基本的分辨率變化。（特別註明一下，首頁是三欄結構的和文章內頁的兩欄結構是不同的，由於我但願突出做者最新、最優秀的文章給讀者第一時間關注）javascript

好很差看這是一個見仁見智的問題了，不過爲了製做這套模板確實花費了我許多功夫去找素材、去構思整個模板的風格。其中最困難的莫過因而受限於園子給的默認html結構。只能用各類佈局方式來實現我想要的結果，如今想起來也許用其餘模板做爲基礎更加合適。固然若是可以本身自定義html結構是最完美的方式了。css

順帶在這裏推薦一下我以前寫的一篇關於佈局方面的文章：對CSS中的Position、Float屬性的一些深刻探討html

這但是最開始的默認皮膚喲！java

OK，閒話很少說。如何將這套皮膚設置成你的博客皮膚呢？css3

1）設置默認模板爲Custom

在後臺管理的「設置」處中選擇默認模板爲「Custom」web

2）在「頁首Html代碼「中引入文件

<link type="text/css" rel="stylesheet" href="http://files.cnblogs.com/coffeedeveloper/coffee.css" />
<script src="http://files.cnblogs.com/coffeedeveloper/Modernizr.js"></script>

由於目前這套模板尚未徹底達到我想要的效果，在將來的一段時間裏，我還會對這套模板進行修改，若是你想第一時間享受到這套模板，那麼請引用我上傳的css文件。若是想本身在這套模板的基礎上面再進行修改也是能夠的，下面是css代碼。瀏覽器

/*blobal*/
body { background: #fff url(http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_bg.png) repeat 0 0; font-family: 'Microsoft YaHei',Verdana,Arial,Helvetica,sans-serif; }
#home { min-width: 0; width: 100%; }
/*blobal end*/

/*
**header begin
*/
#header { border: none; margin: 0; padding: 0; }

/*blog title*/
#blogTitle {
    background: url(http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_labelbg.png) no-repeat right top;
    height: 130px;
    left: 0;
    padding: 0 68px 0 24px;
    position: absolute;
    top: 120px;
    z-index: 2;
    color: #fff;
}
#blogTitle #lnkBlogLogo { display: none; }
#blogTitle h1 {
    float: none;
    font-size: 1.8em;
    margin: 20px 0 0 0;
    width: 100%;
}
#blogTitle h1 a { 
    color: #fff;
    text-shadow: 1px 1px 1px #696969;
}
#blogTitle h1 a:hover { color: #f7781f; text-decoration: none; }
#blogTitle h2 {
    float: none;
    font-size: 1.5em;
    margin: 7px 0 0 0;
    width: 100%;
    text-shadow: 1px 1px 1px #696969;
    font-weight: bold;
}
/*blog title end*/

/*navigator*/
#navigator { background: rgba(0,0,0,0.6); border-bottom: 1px solid #000; height: auto; }
#navigator #navList { float: none; text-align: center; width: 100%; }
#navigator #navList li {display: inline-block; float: none; height: 80px; line-height: 80px; width: 10%; }
#navigator #navList a {border: none; color: #fff; display: inline-block; line-height: 132px; float: none; font-size: 12pt; font-weight: bold; height: 80px; padding: 0; width: 100%; }
#navigator #navList a:hover { border-bottom-style: solid; border-bottom-width: 8px; }
#navigator #navList a.aHeaderXML { display: none; }

#navigator #navList li:nth-of-type(1) a { 
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_cnblogs4.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_cnblogs3.png") ;
    background-repeat: no-repeat;
    background-position: center 5px, center -80px; 
}

@keyframes nav1 {
    from { background-color: #FD3F49; border-color: #FD3F49; background-position: center 5px, center -80px;  } 
    to { background-color: #BC2F36; border-color: #A30008; background-position: center 80px, center 5px;  } 
}
@-webkit-keyframes nav1 {
    from { background-color: #FD3F49; border-color: #FD3F49; background-position: center 5px, center -80px;  } 
    to { background-color: #BC2F36; border-color: #A30008; background-position: center 80px, center 5px;  } 
}
#navigator #navList li:nth-of-type(1) a:hover {
    -webkit-animation: nav1 1s ;
    animation: nav1 1s ;
    background-color: #BC2F36;
    background-repeat: no-repeat;
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_cnblogs4.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_cnblogs3.png") ;
    background-position: center 80px, center 5px; 
    border-color: #A30008;
}

#navigator #navList li:nth-of-type(2) a {
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_index1.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_index2.png");
    background-repeat: no-repeat;
    background-position: center 3px, center -80px; 
}
@keyframes nav2 {
    from { background-color: #7F3E00; background-position: center 3px, center -80px; border-color: #FFA34C; } 
    to { background-color: #FFA34C; background-position: center 80px, center -5px; border-color: #FF7B00; } 
}
@-webkit-keyframes nav2 {
    from { background-color: #7F3E00; background-position: center 3px, center -80px; border-color: #FFA34C; } 
    to { background-color: #FFA34C; background-position: center 80px, center 3px; border-color: #FF7B00; } 
}
#navigator #navList li:nth-of-type(2) a:hover {
    -webkit-animation: nav2 1s ;
    animation: nav2 1s ;
    background-color: #FFA34C;
    background-repeat: no-repeat;
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_index1.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_index2.png");
    background-position: center 80px, center 3px;
    border-color: #FF7B00;
}

#navigator #navList li:nth-of-type(3) a {
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_question3.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_question4.png");
    background-repeat: no-repeat;
    background-position: center 3px, center -80px; 
}
@keyframes nav3 {
    from { background-color: #83F03C; background-position: center 3px, center -80px; border-color: #A0F06C; } 
    to { background-color: #5CA82A; background-position: center 80px, center 3px; border-color: #399200; } 
}
@-webkit-keyframes nav3 {
    from { background-color: #83F03C; background-position: center 3px, center -80px; border-color: #A0F06C; } 
    to { background-color: #5CA82A; background-position: center 80px, center 3px; border-color: #399200; } 
}
#navigator #navList li:nth-of-type(3) a:hover {
    -webkit-animation: nav3 1s;
    animation: nav3 1s;
    background-color: #5CA82A;
    background-repeat: no-repeat;
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_question3.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_question4.png");
    background-position: center 80px, center 3px;
    border-color: #399200;
}

#navigator #navList li:nth-of-type(4) a {
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_twitter1.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_twitter2.png");
    background-repeat: no-repeat;
    background-position: center 3px, center -80px; 
}
@keyframes nav4 {
    from { background-color: #34D0B6; background-position: center 3px, center -80px; border-color: #006957; } 
    to { background-color: #00A287; background-position: center 80px, center 3px; border-color: #1E796A; } 
}
@-webkit-keyframes nav4 {
    from { background-color: #34D0B6; background-position: center 3px, center -80px; border-color: #006957; } 
    to { background-color: #00A287; background-position: center 80px, center 3px; border-color: #1E796A; } 
}
#navigator #navList li:nth-of-type(4) a:hover {
    -webkit-animation: nav4 1s ;
    animation: nav4 1s ;
    background-color: #00A287;
    background-repeat: no-repeat;
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_twitter1.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_twitter2.png");
    background-position: center 80px, center 3px;
    border-color: #1E796A;
}

#navigator #navList li:nth-of-type(5) a {
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_document1.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_document2.png");
    background-repeat: no-repeat;
    background-position: center 3px, center -80px; 
}
@keyframes nav5 {
    from { background-color: #64A8D1; background-position: center 3px, center -80px; border-color: #245A7A; } 
    to { background-color: #3D9AD1; background-position: center 80px, center 3px border-color: #03436A; } 
}
@-webkit-keyframes nav5 {
    from { background-color: #64A8D1; background-position: center 3px, center -80px; border-color: #245A7A; } 
    to { background-color: #3D9AD1; background-position: center 80px, center 3px; border-color: #03436A; } 
}
#navigator #navList li:nth-of-type(5) a:hover {
    -webkit-animation: nav5 1s ;
    animation: nav5 1s ;
    background-color: #3D9AD1;
    background-repeat: no-repeat;
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_document1.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_document2.png");
    background-position: center 80px, center 3px;
    border-color: #03436A;
}

#navigator #navList li:nth-of-type(6) a {
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_user1.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_user2.png");
    background-repeat: no-repeat;
    background-position: center 3px, center -80px; 
}
@keyframes nav6 {
    from { background-color: #6D87D6; background-position: center 3px, center -80px; border-color: #133AAC; } 
    to { background-color: #476BD6; background-position: center 80px, center 3px; border-color: #2B4181; } 
}
@-webkit-keyframes nav6 {
    from { background-color: #6D87D6; background-position: center 3px, center -80px; border-color: #133AAC; } 
    to { background-color: #476BD6; background-position: center 80px, center 3px; border-color: #2B4181; } 
}
#navigator #navList li:nth-of-type(6) a:hover {
    -webkit-animation: nav6 1s ;
    animation: nav6 1s ;
    background-color: #476BD6;
    background-repeat: no-repeat;
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_user1.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_user2.png");
    background-position: center 80px, center 3px;
    border-color: #2B4181;
}

#navigator #navList li:nth-of-type(7) a {
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_rss1.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_rss2.png");
    background-repeat: no-repeat;
    background-position: center 3px, center -80px; 
}
@keyframes nav7 {
    from { background-color: #956BD6; background-position: center 3px, center -80px; border-color: #4C2982; } 
    to { background-color: #7D44D6; background-position: center 80px, center 3px; border-color: #2F0571; } 
}
@-webkit-keyframes nav7 {
    from { background-color: #956BD6; background-position: center 3px, center -80px; border-color: #4C2982; } 
    to { background-color: #7D44D6; background-position: center 80px, center 3px; border-color: #2F0571; } 
}
#navigator #navList li:nth-of-type(7) a:hover {
    -webkit-animation: nav7 1s ;
    animation: nav7 1s ;
    background-color: #7D44D6;
    background-repeat: no-repeat;
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_rss1.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_rss2.png");
    background-position: center 80px, center 3px;
    border-color: #2F0571;
}

#navigator #navList li:nth-of-type(8) a {
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_settings1.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_settings2.png");
    background-repeat: no-repeat;
    background-position: center 3px, center -80px; 
}
@keyframes nav8 {
    from { background-color: #D636C9; background-position: center 3px, center -80px; border-color: #82217A; } 
    to { background-color: #AD009F; background-position: center 80px, center 3px; border-color: #710067; } 
}
@-webkit-keyframes nav8 {
    from { background-color: #D636C9; background-position: center 3px, center -80px; border-color: #82217A; } 
    to { background-color: #AD009F; background-position: center 80px, center 3px; border-color: #710067; } 
}
#navigator #navList li:nth-of-type(8) a:hover {
    -webkit-animation: nav8 1s;
    animation: nav8 1s;
    background-color: #AD009F;
    background-repeat: no-repeat;
    background-image: url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_settings1.png"), url("http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_settings2.png");
    background-position: center 80px, center 3px;
    border-color: #710067;
}
/*navigator end*/

/*blog stats*/
@keyframes blogStats {from { top: 0; } to { top: 86px; } }
@-moz-keyframes blogStats {from { top: 0; } to { top: 86px; } }
@-webkit-keyframes blogStats {from { top: 0; } to { top: 86px; } }
@-ms-keyframes blogStats {from { top: 0; } to { top: 86px; } }
@-o-keyframes blogStats {from { top: 0; } to { top: 86px; } }
.blogStats {
    -webkit-animation: blogStats 3s;
    -moz-animation: blogStats 3s;
    -ms-animation: blogStats 3s;
    -o-animation: blogStats 3s;
    animation: blogStats 3s;
    background: rgba(243, 243, 243, 0.8);
    border: 1px solid #666;
    border-radius: 5px;
    color: #000;
    font-size: 1.2em;
    padding: 8px;
    position: absolute;
    right: 12px;
    text-shadow: 1px 1px 1px rgb(180, 159, 159);
    top: 86px;
    z-index: -2;
}
/*blog stats end*/

/*
* header end
*/


/*=================================================================*/


/*
*content begin
 */

/*main begin*/
#main {
    margin-top: 128px;
    min-width: 680px;
    position: relative;
    z-index: 1;
}
#mainContent {
    border: 1px solid #A0A0A0;
    border-radius: 5px;
    box-shadow: 0 0 8px #777;
    float: none;
    margin: 0 auto;
    min-width: 680px;
    overflow: visible;
    padding: 8px;
    width: 86%;
}
#mainContent .forFlow { background-color: #fff; margin: 0; padding-top: 52px; }
#mainContent .forFlow > div { margin-bottom: 60pt; padding: 0 0 0 12pt; width: 55%; }

/*main end*/

/*post*/
.day { position: relative; }
.dayTitle {
    background: #c0bbb9;
    border: none;
    border-radius: 60px;
    color: #434343;
    height: 60px;
    left: -80px;
    line-height: 28px;
    padding: 10px;
    position: absolute;
    text-align: center;
    width: 60px;
    z-index: -1;
}
.day .postSeparator { border: none; }
.postTitle { border: none; float: none; line-height: 2.6em; }
.postTitle a:link, .postTitle a:visited { color: #428cb2; font-size: 200%; }
.postTitle a:hover { color: #f7781f; text-decoration: underline; }
#mainContent .forFlow > div.topicListFooter {font-size: 1em; margin: 0; padding: 18px; text-align: left; }

.c_b_p_desc {
    line-height: 1.8em;
    font-size: 1.1em;
}
.topicListFooter a {
    padding: 10px;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #515253;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #382B2B;
    background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);
    background-image: -moz-linear-gradient(to bottom,#5bc0de,#2f96b4);
    background-image: -webkit-linear-gradient(to bottom,#5bc0de,#2f96b4);
    background-image: -ms-linear-gradient(to bottom,#5bc0de,#2f96b4);
}
.topicListFooter a:hover{
    background-image: linear-gradient(to bottom,#2f96b4,#5bc0de);
    background-image: -moz-linear-gradient(to bottom,#2f96b4,#5bc0de);
    background-image: -webkit-linear-gradient(to bottom,#2f96b4,#5bc0de);
    background-image: -ms-linear-gradient(to bottom,#2f96b4,#5bc0de);
}
/*post end*/

/*sidebar begin*/
#sideBar {
    box-shadow: 0 0 8px #555;
    margin: 0;
    overflow: visible;
    padding: 8px;
    position: absolute;
    right: 2%;
    top: 36px;
    width: 20%;
}
#sideBar #sideBarMain { background: #fff url(http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_bg2.png) repeat 0 0; padding: 4px; }
#leftcontentcontainer h3 {
    border-bottom: 1px solid #d85c30;
    color: #d85c30;
    font-size: 1.5em;
    line-height: 1.5em;
    margin: 4px 0 10px 0;
    text-align: left;
    text-indent: 0.2em;
}
#leftcontentcontainer li {
    height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.catListView,.catListFeedback,.catListComment {
    background: #fff url(http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_bg2.png) repeat 0 0;
    border: 8px solid #fff;
    box-shadow: 0 0 8px #777;
    left: -94%;
    padding: 4px;
    position: absolute;
    top: 0;
    width: 80%;
}
.catListView { height: 260px; }
.catListFeedback, .catListComment { border-top: none; box-shadow: 0 8px 8px #777; }
.catListFeedback { height: 260px; top: 275px; z-index: 2; }
.catListComment { top: 542px; z-index: 3; }
#calendar { width: 100%; }
.CalTitle { background: none; }
#calendar .CalNextPrev a:link, #calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active,#calendar .CalNextPrev a:link, #calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active { background: none; }

#leftcontentcontainer li.recent_comment_body {
    height: auto;
}
#sideBarMain .newsItem img {
    border: 4px solid #fff;
    max-height: 180px;
    max-width: 180px;
    position: absolute;
    z-index: -1;
}
#sideBarMain .newsItem img:nth-of-type(1) {
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
    right: 110px;
    top: -120px;
}
#sideBarMain .newsItem img:nth-of-type(2) {
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
    right: 280px;
    top: -120px;
}

@keyframes headImg {from { top: -120px; } to { top: -190px; } }
@-webkit-keyframes headImg {from { top: -120px; } to { top: -190px; } }
@-moz-keyframes headImg {from { top: -120px; } to { top: -190px; } }
@-o-keyframes headImg {from { top: -120px; } to { top: -190px; } }
@-ms-keyframes headImg {from { top: -120px; } to { top: -190px; } }
#sideBarMain .newsItem img:hover {
    -webkit-animation: headImg 3s;
    -o-animation: headImg 3s;
    -ms-animation: headImg 3s;
    -moz-animation: headImg 3s;
    animation: headImg 3s;
    cursor: pointer;
    top: -190px;
}
/*sidebar end*/

/*
content end
 */

/*==========================================================*/

/*
*footer begin
 */
#footer {background: rgba(0,0,0, 0.6); border: none; color: #fff; margin: 0; margin-top: 24px; min-height: 0; padding: 12px 0; }
/*
*footer end
 */



@media screen and (max-width: 1024px) {
    .catListView, .catListFeedback, .catListComment {
        border: 0;
        box-shadow: none;
        padding: 0;
        position: static;
        width: 100%;
    }

    #mainContent .forFlow > div { width: 75%; }
}

@media screen and (max-width: 680px) {
    #sideBar {
        box-shadow: none;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;;
        box-sizing: border-box;
        position: static;
        width: 100%;
    }
    #sideBar #sideBarMain,.catListView, .catListFeedback, .catListComment { background: #fff; }
    #navigator #navList li { height: 40px; line-height: 40px; width: 20%; }
    #navigator #navList li a { height: 40px; line-height: 40px; background-image:none !important; }
    #navigator #navList li a:hover { border: none; }
    #main {
        margin-top: 68px;
    }
    #mainContent { 
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;;
        box-sizing: border-box;
    }
    #mainContent .forFlow > div { 
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;;
        box-sizing: border-box;
        padding: 0 12px; 
        width: 100%; }
    .dayTitle {
        background: none;
        border-bottom: 1px solid #666;
        border-radius: 0;
        height: auto;
        padding: 0;
        position: static;
        text-align: left;
        width: auto;
    }
    #blogTitle {
        background: none repeat scroll 0 0 transparent;
        height: auto;
        padding: 1em;
        position: static;
    }
    .blogStats {
        float: left;
        position: static;
    }
    #sideBarMain .newsItem img {
        display: none;
    }
}

/*
===================================
 */
/*
* Article begin
 */


#topics .postTitle {line-height: 2em;border:none; }
.postBody h2 {
    color: #343434;
    border: 1px solid #666;
    background: rgba(68, 199, 250, 0.3);
    border-radius: 5px;
    text-shadow: 1px 1px 1px rgb(206, 206, 206);
    box-shadow: 1px 1px 2px rgb(163, 163, 163);
    line-height: 1.5em;
}
.postBody h3 {
    border-bottom: 2px solid rgb(201, 163, 10);
    font-size: 1.3em;
    line-height: 2em;
}
.postBody h4 {
    font-size: 1.4em;
    text-shadow: 1px 1px 0 rgb(185, 185, 185);
    line-height: 1.8em;
}
#mainContent .forFlow > div#comment_form{
    margin:0;
}
/*
* Article end
 */
View Code

3）在「頁腳Html代碼「中引入文件

<script type="text/javascript" src="http://files.cnblogs.com/coffeedeveloper/coffee.js"></script>

這個js主要是處理因爲默認模板html結構實在是沒有辦法用css來調整樣式所作的處理。在這裏強烈吐槽一下Custom模板的一點：body下面的直接子元素div的id一直爲home而不會根據頁面類型來更換，這點我認爲是很是糟糕的一點。爲何在文章詳細頁這個div的id不爲article之類的，讓我被迫去用javascript來判斷是不是文章詳細頁。ide

個人最愛彩蛋系列！

若是有細心的朋友估計已經都發現了，呃，好吧也沒有多少東東。佈局

有趣加好玩的導航條

  1. 漂亮變化的導航條變化顏色（這裏顏色我但是調了老半天了- -！）
  2. 可愛的導航圖標（話說圖標我也是找了很久的...）
  3. 若是你沒開聲音你就吃虧了，把你的鼠標依次滑過各個導航條裏面的選項，有木有頗有童趣？好吧，雖然我沒有音樂天賦，可是各位看官你未必沒有呀！

囂張的我的宣傳

雖然我不帥，可是不影響我對本身的熱愛。哇卡卡！移上去有精彩！！post

你也想要這個效果？

第一。首頁你須要在本身的博客管理裏面的相冊上傳兩張你的我的帥氣照（樣式裏面採用的是180 * 180像素）

第二。而後在你的「博客編輯欄公告」中放入你上傳的圖片連接

<img src="http://images.cnblogs.com/cnblogs_com/coffeedeveloper/497836/o_a.png" alt="" />
<img src="http://pic.cnitblog.com/avatar/163402/20130615101144.png" alt="" />

這樣你就能便可享受到「自戀」的感受啦- -！目前只作了兩張圖片的樣式處理，若是你想要放置更多你的我的帥氣照就本身添加哈！

#sideBarMain .newsItem img:nth-of-type(2) {
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
    right: 280px;
    top: -120px;
}

結尾

固然由於我的喜愛問題，這套模板將永遠不會支持ie6/7/8。畢竟搞技術的同窗還用這三個瀏覽器的話，相信我，我和你沒有辦法溝通。

還想作的事

爲何稱這個版本爲第一個版本呢?由於對文章評論那塊的樣式是尚未作任何處理的。在之後的版本會加上這一塊。若是管理員可以看獲得這段的話，請問我有什麼辦法可以獲取用戶的頭像呢？由於評論那塊若是沒有頭像會顯的太過於單調。若是你問我何時會作，好吧，我也不清楚- -！不過確定是會作的，到時候會再發一篇博文來介紹。

這套模板裏面涉及到的css3知識點也挺想和你們分享的，不過我一直都認爲寫css的分享文章是最難的，從我這篇文章能夠看出：對CSS中的Position、Float屬性的一些深刻探討，若是你們感興趣的話，仍是推薦看看。由於我寫了很久，結果木有人看，挺傷心的。後面會結合一些有趣的案例來爲你們寫一篇有關css3的博文，也請你們期待啦！

最後的最後

你們對這套模板有什麼想法或者發現這套模板會在什麼狀況下會有錯位現象，請聯繫我哈！在文章內評論或者發郵件給我coffeedeveloper#gmail.com！

若是你認爲這篇文章對你有價值，或者這個模板有意思請辦忙點一下推薦！謝謝！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程