當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

吐血大奉献，打造cnblogs最新最火辣的css3模板（IE9以下请勿入内） -- 第一版

發(fā)布時(shí)間：2024/10/12 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了吐血大奉献，打造cnblogs最新最火辣的css3模板（IE9以下请勿入内） -- 第一版小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一直自己都想給自己的博客打造一個(gè)獨(dú)一無二的皮膚，但是一直沒有強(qiáng)勁的動力去完成這件事情。后來憑借著工作上面的需求（涉及到css3），就把自己的博客當(dāng)成一個(gè)最好的試驗(yàn)場地。從而產(chǎn)生了你現(xiàn)在所看到的這個(gè)模板，強(qiáng)烈建議大家到我的博客首頁轉(zhuǎn)一圈。這個(gè)模板是自適應(yīng)的，暫時(shí)沒有做太多的自適應(yīng)處理，但是也滿足了基本的分辨率變化。（特別注明一下，首頁是三欄結(jié)構(gòu)的和文章內(nèi)頁的兩欄結(jié)構(gòu)是不一樣的，因?yàn)槲蚁Ｍ怀鲎髡咦钚隆⒆顑?yōu)秀的文章給讀者第一時(shí)間關(guān)注）

好不好看這是一個(gè)見仁見智的問題了，不過為了制作這套模板確實(shí)花費(fèi)了我許多功夫去找素材、去構(gòu)思整個(gè)模板的風(fēng)格。其中最困難的莫過于是受限于園子給的默認(rèn)html結(jié)構(gòu)。只能用各種布局方式來實(shí)現(xiàn)我想要的結(jié)果，現(xiàn)在想起來也許用其他模板作為基礎(chǔ)更加合適。當(dāng)然如果能夠自己自定義html結(jié)構(gòu)是最完美的方式了。

順帶在這里推薦一下我之前寫的一篇關(guān)于布局方面的文章：對CSS中的Position、Float屬性的一些深入探討

這可是最開始的默認(rèn)皮膚喲！

OK，閑話不多說。如何將這套皮膚設(shè)置成你的博客皮膚呢？

1）設(shè)置默認(rèn)模板為Custom

在后臺管理的“設(shè)置”處中選擇默認(rèn)模板為“Custom”

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

因?yàn)槟壳斑@套模板還沒有完全達(dá)到我想要的效果，在未來的一段時(shí)間里，我還會對這套模板進(jìn)行修改，如果你想第一時(shí)間享受到這套模板，那么請引用我上傳的css文件。如果想自己在這套模板的基礎(chǔ)上面再進(jìn)行修改也是可以的，下面是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代碼“中引入文件

這個(gè)js主要是處理由于默認(rèn)模板html結(jié)構(gòu)實(shí)在是沒有辦法用css來調(diào)整樣式所做的處理。在這里強(qiáng)烈吐槽一下Custom模板的一點(diǎn)：body下面的直接子元素div的id一直為home而不會根據(jù)頁面類型來更換，這點(diǎn)我認(rèn)為是非常糟糕的一點(diǎn)。為什么在文章詳細(xì)頁這個(gè)div的id不為article之類的，讓我被迫去用javascript來判斷是否是文章詳細(xì)頁。

我的最愛彩蛋系列！

如果有細(xì)心的朋友估計(jì)已經(jīng)都發(fā)現(xiàn)了，呃，好吧也沒有多少東東。

有趣加好玩的導(dǎo)航條

漂亮變化的導(dǎo)航條變化顏色（這里顏色我可是調(diào)了老半天了- -！）

可愛的導(dǎo)航圖標(biāo)（話說圖標(biāo)我也是找了好久的...）

如果你沒開聲音你就吃虧了，把你的鼠標(biāo)依次滑過各個(gè)導(dǎo)航條里面的選項(xiàng)，有木有很有童趣？好吧，雖然我沒有音樂天賦，但是各位看官你未必沒有呀！

囂張的個(gè)人宣傳

雖然我不帥，但是不影響我對自己的熱愛。哇卡卡！移上去有精彩！！

你也想要這個(gè)效果？

第一。首頁你需要在自己的博客管理里面的相冊上傳兩張你的個(gè)人帥氣照（樣式里面采用的是180 * 180像素）

第二。然后在你的“博客編輯欄公告”中放入你上傳的圖片鏈接

這樣你就能即可享受到“自戀”的感覺啦- -！目前只做了兩張圖片的樣式處理，如果你想要放置更多你的個(gè)人帥氣照就自己添加哈！

#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; }

結(jié)尾

當(dāng)然因?yàn)閭€(gè)人喜好問題，這套模板將永遠(yuǎn)不會支持ie6/7/8。畢竟搞技術(shù)的同學(xué)還用這三個(gè)瀏覽器的話，相信我，我和你沒有辦法溝通。

還想做的事

為什么稱這個(gè)版本為第一個(gè)版本呢?因?yàn)閷ξ恼略u論那塊的樣式是還沒有做任何處理的。在以后的版本會加上這一塊。如果管理員能夠看得到這段的話，請問我有什么辦法能夠獲取用戶的頭像呢？因?yàn)樵u論那塊如果沒有頭像會顯的太過于單調(diào)。如果你問我什么時(shí)候會做，好吧，我也不清楚- -！不過肯定是會做的，到時(shí)候會再發(fā)一篇博文來介紹。

這套模板里面涉及到的css3知識點(diǎn)也挺想和大家分享的，不過我一直都認(rèn)為寫css的分享文章是最難的，從我這篇文章可以看出：對CSS中的Position、Float屬性的一些深入探討，如果大家感興趣的話，還是推薦看看。因?yàn)槲覍懥撕镁?#xff0c;結(jié)果木有人看，挺傷心的。后面會結(jié)合一些有趣的案例來為大家寫一篇有關(guān)css3的博文，也請大家期待啦！

最后的最后

大家對這套模板有什么想法或者發(fā)現(xiàn)這套模板會在什么情況下會有錯(cuò)位現(xiàn)象，請聯(lián)系我哈！在文章內(nèi)評論或者發(fā)郵件給我coffeedeveloper#gmail.com！

如果你認(rèn)為這篇文章對你有價(jià)值，或者這個(gè)模板有意思請辦忙點(diǎn)一下推薦！謝謝！！

轉(zhuǎn)載于:https://www.cnblogs.com/coffeedeveloper/p/3231300.html

總結(jié)

以上是生活随笔為你收集整理的吐血大奉献，打造cnblogs最新最火辣的css3模板（IE9以下请勿入内） -- 第一版的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：大学生可以轻松学会的香煎小土豆
下一篇：三层着装概念，是户外着装的基本要求