show一下新模板(分享全套CSS和图片)
新模板,喜歡的大家可以自己拿,CSS貼在下面,圖片在這里,一共六張圖片?;蛘吣憧梢灾苯邮褂梦蚁旅嫣峁┑腃SS,里面對圖片已經(jīng)使用了絕對URL,只要我不換目錄,就可以一直使用(換目錄的可能性基本為0)。老規(guī)矩,本模板依然基于Custom模板,請?jiān)诤笈_選擇Custom模板并禁用模板默認(rèn)的CSS,然后把下面的CSS代碼貼到你的定制CSS里。
一些說明:
1. 模板創(chuàng)意來自網(wǎng)易博客,我只是修改了一下圖片,并針對博客園寫了一套CSS,所以美工好不要夸我,美工差也不要拍我;
2. 綠色比較環(huán)保,據(jù)說還對視力有好處,所以才選擇了把這樣一個(gè)模板引入博客園;
3. 我原來(做/用)的模板是自適應(yīng)全屏,發(fā)現(xiàn)很多人屏幕太寬導(dǎo)致看文章還得扭下頭,嚴(yán)重影響視覺連貫性,所以本模板限制了寬度,適用于1024及以上寬度;
4. 因?yàn)榇蠹绎@示器分辨率不斷增大,所以很多地方文字被加大到了14px,以方便閱讀;
5. 一個(gè)BUG:必須選擇上日歷顯示,不然會出問題,那個(gè)地方一個(gè)div,沒辦法做屏蔽了;
6. 一個(gè)問題:因?yàn)楸救吮容^討厭舊的東西,所以只針對IE7和FF3,IE6肯定顯示不好,因?yàn)槭褂昧俗舆x擇符">",FF2可能也沒什么問題;
7. 樣式定義太死,所以以前寫文章里自己帶了樣式的,可能會不太好看;
8. 使用了CSS Sprites,但是因?yàn)镠TML代碼無法修改,所以有圖片無法全部合并,不然應(yīng)該是只有一張圖片的。
鑒于以上的1、3、5、6、7,所以目前不方便發(fā)布成正式模板,大家想用就自己動(dòng)手吧,不能從后臺設(shè)置,對此,十分抱歉。
下面是CSS代碼,如果需要,請按照第一段里說的步驟去加到你的模板里,有任何問題,請?jiān)谙旅媪粞?#xff0c;我將盡力解決:
/* 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(https://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(https://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(https://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(https://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(https://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg2.jpg) no-repeat bottom left;padding:20px;margin-bottom:10px;}
#sideBar h3{background:url(https://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(https://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg4.jpg) repeat-y 275px 0;}
.forFlow{margin:0 8px 0 274px;overflow:hidden;background:url(https://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(https://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(https://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(https://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(https://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(https://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg) -261px -284px no-repeat;height:110px;padding-top:10px;}
轉(zhuǎn)載于:https://www.cnblogs.com/dingxue/archive/2008/07/15/1243613.html
總結(jié)
以上是生活随笔為你收集整理的show一下新模板(分享全套CSS和图片)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: GridView实现用...代替超长字符
- 下一篇: Silverlight 2 相关文章汇总