♂月橘館♀

先前說好的樣式分享來囉

這次分享的是目前(2010/8/4)所使用的版型-看光光

特色嘛~背景圖可以換上自己想說的話(請自理..小畫家萬歲)加上透明的手法

如您所見，背景圖成了自己的另類碎碎念專區~多貼心的設計阿~(毆飛

這裡附上我的一些參數，方便各位自行修改：

總寬度：900px。

側邊欄位：寬210px。

文章區塊：600px。

最佳瀏覽效果：1280*800（1024*768  可 ）

適用於：IE 8、Avant瀏覽器。其他瀏覽器未測試..請見諒。

歡迎自行修改，但是改了之後不要問我=_=

我沒那麼厲害可以幫忙debug...囧

CSS複製：

/*--------------------------reset*/ *{ margin:0;padding:0;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em,th,var {font-style:normal;font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} q:before,q:after {content:'';} abbr,acronym {border:0;} pre{font-size: 1em ;} .article-content{ _height: 1% ; overflow: hidden ; _overflow: none;} .article-content p{margin-bottom: 1em;} a { text-decoration: none; } br{letter-spacing: normal;} /*--------------------------all setting*/ HTML {overflow-x:; } body { background:url(http://pic.pimg.tw/nazumi938/bdc2b1ecc518e04ab3dc511ac2b93232.jpg?v=1279846313) center repeat ; font-size:12px; font-family: Century gothic; line-height:150%; SCROLLBAR-ARROW-COLOR: #fcb424; SCROLLBAR-BASE-COLOR: #962D00; SCROLLBAR-TRACK-COLOR: #b45429; overflow:hidden; } #blog-main{} #article-main{} a {color:#777} a:hover {color:#Ff0000} #body-div{ width: 900px; margin:0 auto; position:relative; } /*--------------------------authority*/ #authority{background-color:#fff; left:0; top:0px; position:absolute;} #authority a{ background:url(http://pic.pimg.tw/pixnetvisual/924f6a68072d1e70787663fd7bae64c2.jpg?v=1277723360) left center no-repeat; padding-left:15px; line-height:15px; color:#777; margin-right:5px;} #authority a:hover{color:#ff0000} #authority a#newpost {} #authority a#backstage {} /*--------------------------container*/ #container{background:url(http://pic.pimg.tw/nazumi938/6ad6babf6c781120b74b3748be5f4da9.png?v=1279846588) left center no-repeat ; height:650px;} #container2{} #container3{} /*--------------------------header*/ #header{ height: 0px; } #login-bar{ position:absolute; right:0; top:10px; color:#777;} #login-bar a{color:#777;} #login-bar a:hover{color:#Ff0000;} #banner{ width:600px;} #banner h1 {} #banner h1 a{ position:absolute;top:30px ;left:17px; font-weight:bold; font-size:16px;color:#777; background-color:#fffff0; } #banner h1 a:hover{color:#ff0000;} #banner h2{text-align:left;position:absolute;top:290px;left:210px; height:200px;width:110px;padding:5px 0px 2px 3px; margin-top:5px; font-size:13px; font-size:10px\15; line-height:15px; overflow:hidden; color:#777; } #banner .skiplink {display:none;} #banner #blog-category{display:none;} #navigation{direction:rtl; position:absolute; left:237px; top: 80px; width:60px;height:120px;} #navigation li{border:2px solid #fffff0; float: left; height: 18px; margin-top:14px;padding:2px 3px 0 0; display:inline;} #navigation a{background-color: ; color:#777; } #navigation a:hover{background-color: ; color:#ff0000; } #navigation #link-album{width: 75px;} #navigation #link-blog{width: 75px;} #navigation #link-guestbook{width:75px;} #navigation #link-profile{width: 75px;} /*--------------------------main*/ #main{ padding-bottom:20px; overflow: auto; _height: 1%;} /*--------------------------content*/ #content{margin-top:50px;margin-left:20px; float:right;position:absolute;right:-16px; width: 600px; overflow-x:hidden; overflow-y: auto;height:550px; scrollbar-face-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-Color: #FFFFFF; scrollbar-arrow-color: #FFF9E6; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; } #spotlight{ margin-bottom:20px;} #spotlight h5{ font:bold 12px arial; color:#555; line-height:30px; border-top:1px dotted #ccc; border-bottom:1px dotted #ccc;} #spotlight-text{ padding: 10px 0 0;} #article-area{} h3.article-area-title{color:#ff0000;} #view-mode{ color:#777; margin-bottom:0px;} #view-mode a{color:#A50000;} #article-box{} .article{margin-right:0px; margin-bottom:15px; _height:1%;} .article-head{_height:1%; } .publish {position:relative;top:44px;right:5px; text-align:left; padding-right:5px;padding-left:2px; background-color:#fffff0; margin-left:430px; text-transform:uppercase; font-weight:bold; font-size:14px; color:#777;} .year{font-size:13px;} .time{font-size:11px;} .title{ background:url() left top no-repeat ; height: 23px; line-height: 15px; padding-left:5px;} .title a{ font:bold 14px Century gothi; color: #f0f0f0; line-height: 15px;background-color:#777} .title a:hover{position color: ; } .title img{display:none;} .article-body{background:url() left top repeat-y ; text-align:right;padding-right:5px;} .article-body a{color:#777;} .article-body a:hover{color:#FF0000;} .article-content{border: 2px solid #f0f0f0; text-align: left; padding-top:5px; letter-spacing:1; margin-left:5px;} .article-content .more{margin:5px 0 5px 5px;} .article-content .more a{color: #777} .article-content .more a:hover{color:#ff0000} .bookmark{} .author{} .forward{} .article-footer{background:url() bottom no-repeat #fffff0; height:20px;color:#777;margin-top:15px; border:1px solid #fff; } .article-footer a{color:#777;} .article-footer a hover{color:#FF0000;} .article-footer .history{ background-color:#fff; } .refer{ 　　　　height:20px;color:#777; 　　　　padding-left:10px; 　　　　;border:4px solid #fffff0; } .back-to-top{display:none; text-align:center;padding-top:2px;} .back-to-top a{ padding:0px 220px 0px 220px; font:13px CEntury Gothic; } .back-to-top a:hover{color:#F07800;} #blog-main .article-footer{text-align:left;padding:0px 0px 1px 5px;color:#777;;} #blog-main .article-footer a{} #blog-main .article-footer a:hover{color:#ff0000} /*--------------------------list*/ .main-list{ background:#eee; padding: 10px; margin-bottom: 10px;} .main-list table{ width: 100%;} .main-list table th{ font-size: 11px; line-height: 20px; border-bottom: 1px solid #ccc;} .main-list table td{ font-size: 11px; line-height: 25px; border-bottom: 1px dashed #ddd;} .main-list table .list-num{display:none;} /*--------------------------post-box*/ /*--引用及回應列表全部的大範圍--*/ #user-post{ background:; padding:15px; margin-bottom: 20px ; } /*--僅引用區塊--*/ #trackback-box{ margin-bottom: 20px; } /*--僅回應列表--*/ #comment-box{} /*--引用列表+回應列表--*/ .user-post-box{ background: ; padding: 10px; border:3px solid #fffff0 ; } /*--引用列表標題--*/ #trackback-title{ } /*--回應列表標題--*/ #comment-title{} /*--引用列表標題+回應列表標題--*/ .user-post-title{ background:url() right no-repeat; color:#777 ; padding: 5px 10px ; font-size: 14px ; margin-bottom: 10px ; font-weight:bold; } /*--引用內容區塊--*/ #trackback-text{} /*--回應內容區塊--*/ #comment-text{} /*--引用內容區塊+回應內容區塊--*/ .user-post-text{ padding:20px ; } /*--單一引用--*/ #trackback-box .single-post{} /*--單一回應--*/ #comment-box .single-post{} /*--單一引用+單一回應--*/ .single-post{ overflow:hidden;_overflow:none;_height:1%; margin-bottom:20px; font-size:12px; } /*--引用者資訊+回應者資訊--*/ .post-info{ border-bottom: 0px dashed #E1B478 ; padding-bottom: 5px ; margin-bottom: 10px ; font-weight:bold ; } /*--單一引用內容+單一回應內容--*/ .post-text{background:#f0f0f0; width: 320px ; float:right ; margin-bottom: 10px ; } #trackback-box .post-text{ width: auto ; float:none ; } /*--單一引用標題+單一回應標題--*/ .post-text p{} /*--回應者頭像--*/ .post-photo{ width:120px ; float:left ; text-align:Center ; } /*--版主回覆內容--*/ .reply-text{ clear:both ; border-top: 3px dashed #f0f0f0 ; padding-top: 5px ; } /*--版主回覆資訊--*/ .reply-text p{} /*--悄悄話--*/ .secret{} /*--留下迴響--*/ .post-comment{ text-align:right ;font-weight:bold; margin: 5px 0px ; font-size: medium ; } /*--------------------------pages*/ .page { text-align: center; margin: 25px 0px 0px; font: 11px Verdana;} .page a{ color:#777; margin: 0px 5px;} .page span { padding: 0px 3px; line-height: 15px; background: #eee; color:#777;} /*--------------------------links*/ #links{ margin:55px 0 0 5px; float:left; width: 210px;height:540px; overflow-y: auto; overflow-x: hidden; scrollbar-face-color: #DDD; scrollbar-track-color: #DDD; scrollbar-3dlight-color: #DDD; scrollbar-darkshadow-Color: #DDD; scrollbar-arrow-color: #FFF9E6; scrollbar-shadow-color: #DDD; scrollbar-highlight-color: #DDD; } #links-row-1{} #links-row-2{ ;} .box{ _height:1%; margin-bottom:3px; padding-top:0px; background:url() right bottom no-repeat ; } .box-title{ background:url() left top no-repeat; height: 35px; padding-left:5px; font:bold 12px arial; line-height:30px; color:#000; text-shadow:1px 1px 0 #d87e81; overflow:hidden;} .box-text { color:#777; padding-bottom:10px; padding-left:1px; } .box-text a{color:#d87e81;} .box-text a:hover{color:#F07800;} .box li{border:2px solid #777;} .box h6{} .box-more{text-align:right;} #headshot{} #headshot ul{ overflow: hidden; _overflow: none; _height: 1%;} #headshot li{ width: 80px; float: right;} #headshot li#headshot-img{display:none; float: left; width: 90px !important} #headshot li#headshot-img img{} #headshot li#friend-apply{} #headshot li#send-message{} #recent-article{;} #recent-article .box-title {; } #recent-article .box-text {padding-top:5px;} #recent-article .box-text a{color:#666;} #recent-article .box-text a:hover{color:#f07800;} #recent-article img{} #calendar table{ width: 95%; margin:0 auto;} #calendar th, #calendar td{ text-align:center; padding:1px;} #calendar .calMonthHeader{} #calendar td a{ font-size:11px; display:block; color:#f00f00; background:#fee;} .murmur-time{ color:#6b7d59; font:bold 12px Century Gothic; margin-bottom:2px;} .murmur-text{} #visitor,#crumb{} #visitor ul,#crumb ul{ overflow: hidden; _overflow: none; _height: 1%;} #visitor li,#crumb li{ float: left; line-height:0; margin:0 4px 4px 0;} #visitor li img, #crumb li img { width:40px; height:40px;} body #followed-murmurs ul{ overflow: hidden; _overflow: none; _height: 1%;} body #followed-murmurs li{ width: 180px; font:12px arial !important; padding:5px !important; border-bottom: 0px dotted #ccc !important;} body #followed-murmurs .murmurs-photo { float:left; width: 40px !important;} body #followed-murmurs .murmurs-photo img{ border:1px solid #aaa !important; width: 30px; height:30px;} body #followed-murmurs .murmurs-content{ float: right; width: 140px;} body #followed-murmurs .murmurs-content a{color:#666; font:10px Century Gothic} body #followed-murmurs .murmurs-content span{ display:block; color:#666;} body #followed-murmurs .murmurs-functions{ float: none !important; clear:both; text-align:right !important;} body #followed-murmurs .murmurs-functions span{margin-right:4px !important;} #search{} #search ul{ overflow: hidden; _overflow: none; _height: 1%;} #search li{ float: left; margin-left:7px; display:inline;} #search input{ border:2px solid #fee; height:22px; padding:3px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;} #search input#search-target{ height:14px; width:120px; background:#fff; border-top:1px solid #bbb; border-left:1px solid #bbb;} #search input#search-submit{ margin:0; width: 40px; font-size:12px; background:#eee; border-right:1px solid #bbb; border-bottom:1px solid #bbb;} #feed ul{} #feed li{} #announce{} #hot-article {} #category h6{letter-spacing:1px;} #category .box-text{letter-spacing:0px;} #category li{ margin-left:15px;} #category .box-more {} #archive select {} #favorite select {} #latest-comment li, #latest-trackback li, #subscription li{ margin-bottom:3px;} #latest-comment.box{} #latest-comment a, #latest-trackback a, #subscription a{ display:block; width:99%;} #mylink {} #mylink .inner-box{} #mylink .inner-box h6{ color:#777;} #mylink .inner-box li{ margin-left:15px;} /*-------------------------- /*--本日人氣--*/ #counter{position:absolute;left:700px ;top:605px; border: 0; } /*--本日人氣標頭--*/ #counter .box-title{display:none;} /*--本日人氣內容區塊--*/ #counter .box-text{background-color:transparent;padding:0px;color#ff0000;font-weight:bold;} /*--人氣數字--*/ #countr .box-text span{} #counter .box-text li{display: inline;} /*--------------------------------------------------------------------------- .folder{} .folder .box-title{} .folder .box-text{} #powered{} /*--------------------------footer*/ #footer{ display:none; background:url() left top repeat-x #fff; clear:both; border-top:0px solid #B40000; padding:0px; _height:1%; text-align:center;} #footer p{color:#777} #bottom {color:#777} #bottom a{color:#777;} #bottom a:hover {color:#FF0000} /*--------------------------extradiv*/ #extradiv11{} #extradiv10{} #extradiv9{} #extradiv8{} #extradiv7{} #extradiv6{} #extradiv5{} #extradiv4{} #extradiv3{} #extradiv2{} #extradiv1{} #extradiv0{}

喜歡的朋友直接複製回去，在後台管理裡頭貼上、套用就可以哩

記得選擇痞克模板喔！

最後，歡迎轉載、引用、使用

請附上本館網址：http://bubu938.pixnet.net/blog　或是附註「月橘館」之字樣

取用的朋友請留下個簡單的回應「3Q」即可

讓我曉得有人取用就好了，以後才會有新的樣式誕生！