show一下新模板(分享全套CSS和圖片)

來源:互聯網
上載者:User

新模板,喜歡的大家可以自己拿,CSS貼在下面,圖片在這裡,一共六張圖片。或者你可以直接使用我下面提供的CSS,裡面對圖片已經使用了絕對URL,只要我不換目錄,就可以一直使用(換目錄的可能性基本為0)。老規矩,本模板依然基於Custom模板,請在後台選擇Custom模板並禁用模板預設的CSS,然後把下面的CSS代碼貼到你的定製CSS裡。

一些說明:

1. 模板創意來自網易部落格,我只是修改了一片,並針對部落格園寫了一套CSS,所以美工好不要誇我,美工差也不要拍我;

2. 綠色比較環保,據說還對視力有好處,所以才選擇了把這樣一個模板引入部落格園;

3. 我原來(做/用)的模板是自適應全屏,發現很多人螢幕太寬導致看文章還得扭下頭,嚴重影響視覺連貫性,所以本模板限制了寬度,適用於1024及以上寬度;

4. 因為大家顯示器解析度不斷增大,所以很多地方文字被加大到了14px,以方便閱讀;

5. 一個BUG:必須選擇上日曆顯示,不然會出問題,那個地方一個div,沒辦法做屏蔽了;

6. 一個問題:因為本人比較討厭舊的東西,所以只針對IE7和FF3,IE6肯定顯示不好,因為使用了子選擇符">",FF2可能也沒什麼問題;

7. 樣式定義太死,所以以前寫文章裡自己帶了樣式的,可能會不太好看;

8. 使用了CSS Sprites,但是因為HTML代碼無法修改,所以有圖片無法全部合并,不然應該是只有一張圖片的。

鑒於以上的1、3、5、6、7,所以目前不方便發布成正式模板,大家想用就自己動手吧,不能從後台設定,對此,十分抱歉。

下面是CSS代碼,如果需要,請按照第一段裡說的步驟去加到你的模板裡,有任何問題,請在下面留言,我將儘力解決:

/* do not change */
#EntryTag{margin-top:20px;font-size:9pt;color:gray;}
.topicListFooter{text-align:right;margin-right:10px;margin-top:10px;}
#divRefreshComments{text-align:right;margin-right:10px;margin-bottom:5px;font-size:9pt;}

/* for tags */
*{margin:0;padding:0;}
body{color:#005327;background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg1.jpg) repeat-x top #13b66d;font-size:14px;}
table{border-collapse:collapse;}
img{border:0;}
ul{overflow:hidden;}
li{list-style:none;}
h1,h2,h3,h4{font-weight:bold;}
input,textarea{background:ece9d8;border:1px solid #11995b;vertical-align:middle;font-size:12px;padding:2px;}
a{color:#ffffff;text-decoration:none;}
a:hover{text-decoration:underline;}
.clear{clear:both;}

/* header */
#home{margin:0 auto;width:963px;}
#header{text-align:center;}
#blogTitle{background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg) no-repeat -263px 0;height:160px;}
#blogTitle h1{margin-top:80px;}
#blogTitle h1 a{font-size:32px;color:#007034;}
#blogTitle h2{font-size:14px;font-weight:normal;color:#007034;}
#navigator{background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg) no-repeat -261px -160px;height:124px;}
#navigator ul{padding:46px 0 0 160px;}
#navigator li{float:left;width:90px;font-weight:bold;}
#navigator img{display:none;}
#navigator a:hover{text-decoration:none;color:#138a59;}
#navigator .blogStats{text-align:right;margin:30px 30px 0 0;}

/* side bar */
#sideBar{width:260px;float:left;overflow:hidden;margin-left:10px;line-height:1.6em;font-size:12px;color:#077042;}
#sideBar h3{color:#9affd5;font-size:14px;}
#calendar{padding:20px;background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg) no-repeat 0 -73px;margin-bottom:10px;}
#calendar .Cal{width:200px;height:180px;}
#calendar .CalTodayDay{background:#13b66d;font-weight:bold;}
#calendar .CalTitle{width:120px;margin:auto;font-weight:bold;color:#ffffff;}
.newsItem,#leftcontentcontainer>div{background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg2.jpg) no-repeat bottom left;padding:20px;margin-bottom:10px;}
#sideBar h3{background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg) no-repeat 0 0;padding:22px 0 30px 26px;margin:-20px;}
#sideBar li{margin-left:1em;text-indent:-1em;}
.divRecentComment{margin-left:1em;}

/* default page */
#mainContent{float:right;margin-left:-290px;width:100%;background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg4.jpg) repeat-y 275px 0;}
.forFlow{margin:0 8px 0 274px;overflow:hidden;background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg3.jpg) top right no-repeat;}
.day{margin:0 20px;}
.dayTitle{display:none;}
.postTitle{padding:20px 0 10px;font-weight:bold;}
.postCon{margin-left:20px;line-height:1.6em;}
.postDesc{border-bottom:1px dashed #11995b;padding:16px;font-size:12px;text-align:right;}
.topicListFooter{font-weight:bold;background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg5.jpg) bottom right no-repeat;margin:0;padding:20px;}

/* view post */
#topics{margin:0 20px;line-height:1.8em;}
#topics .postTitle{margin:auto;width:500px;text-align:center;}
#topics .postTitle a{font-size:24px;color:#005327;line-height:30px;}
#topics .postTitle a:hover{text-decoration:none;}
#topics .postDesc{border:none;padding-bottom:0;}
#topics img{display:none;}
#topics .post img{display:block;}
.postBody p{margin:8px 0;}
#EntryTag{color:#005327;}
.feedback_area_title{background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg) 0 -434px no-repeat;height:30px;padding:58px 0 0 30px;color:#9affd5;font-weight:bold;}
.feedbackItem{margin:20px;padding-bottom:20px;border-bottom:1px dashed #005327;}
.feedbackManage{float:right;}
.feedbackCon{margin:6px 0 0 20px;}
.commentform{margin:0 20px;}

/* for list */
.entrylistTitle,.PostListTitle,.thumbTitle,.forFlow h3 div,.galleryTitle{font-size:18px;margin:20px 0 0 20px;}
#myposts,.entrylist,#taglist,.gallery{padding:0 20px 20px;background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg5.jpg) bottom center no-repeat;}
#myposts .PostList{border-bottom:1px dashed #005327;padding:12px 0;}
#myposts .postDesc2{text-align:right;font-size:12px;}
#myposts .postText2{margin-left:20px;}
.Pager,.entrylistDescription,.thumbDescription,.entrylistItem{margin:8px 20px;}
.entrylistPosttitle{padding:20px 0 10px;font-weight:bold;}
.entrylistPostSummary{margin-left:20px;line-height:1.6em;}
.entrylistItemPostDesc{border-bottom:1px dashed #11995b;padding:16px;font-size:12px;text-align:right;}
.topicListFooter{font-weight:bold;background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg5.jpg) bottom right no-repeat;margin:0;padding:20px;}
.gallery table{width:95%;margin:auto;text-align:center;}
#taglist table{text-align:left;margin:20px auto 0;}

/* footer */
#footer{text-align:center;color:#fff;background:url(http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg) -261px -284px no-repeat;height:110px;padding-top:10px;}

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.