(*´▽`*)

點我看樣式

除了簡單外很沒賣點的說(´_ゝ`) 

是我第一個樣式，嘛希望有人喜歡

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300); body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { font-family:Meiryo; font-size:12px; margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; font-family:Meiryo; font-size:12px; color:#ccc; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; font-family:Meiryo; font-size:12px; color:#ccc; } ol,ul { list-style:none; font-family:Meiryo; font-size:12px; color:#ccc; } caption,th { text-align:left; font-family:Meiryo; font-size:12px; color:#ccc; } h1,h2,h3,h4,h5,h6 { font-weight:normal; font-family:Meiryo; font-size:12px; color:#ccc; } q:before,q:after { content:''; font-family:Meiryo; font-size:12px; color:#ccc; } pre { font-family:Meiryo; font-size:12px; color:#ccc; } .article-content { _height:1%; overflow:hidden; _overflow:none; font-family:Meiryo; color:#ccc; font-size:13px; line-height:170%; letter-spacing:.05em; margin:15px; } .article-content p { margin-bottom:1em; font-family:Meiryo; font-size:12px; color:#ccc; } .article-content li { list-style-type:disc; margin-left:20px; font-family:Meiryo; font-size:12px; color:#ccc; } .article-content ol li { list-style-type:decimal; margin-left:20px; font-family:Meiryo; font-size:12px; color:#ccc; } br { letter-spacing:normal; font-family:Meiryo; font-size:12px; color:#ccc; } .modal-dialog { top:50%!important; margin-top:-100px!important; } body { font-family: 'Open Sans Condensed', sans-serif; width:900px; position:relative; background-image:url(url()); background-color:#fff; background-repeat:no-repeat; background-position:undefined; margin:0 auto 20px; } img{-webkit-filter:grayscale(50%); -moz-filter:grayscale(50%); -ms-filter:grayscale(50%); -o-filter:grayscale(50%); transition:1.0s;-o-transition:1.0s;-moz-transition:1.0s;-webkit-transition:1.0s;} img:hover{ -webkit-filter:grayscale(0%); -moz-filter:grayscale(0%); -ms-filter:grayscale(0%); -o-filter:grayscale(0%); transition:1.0s;-o-transition:1.0s;-moz-transition:1.0s;-webkit-transition:1.0s; } input,textarea,select { -webkit-border-radius:15px; -moz-border-radius:15px; color:#ccc; background:transparent; border:1px dashed #ccc; } ::-webkit-scrollbar-thumb { background-color:#ccc; height:auto; width:2px; border:1px solid #ccc; } ::-webkit-scrollbar { background-color:#ccc; border:6px solid #FFF; height:2px; width:13px; } a { transition:1.0s;-o-transition:1.0s;-moz-transition:1.0s;-webkit-transition:1.0s; color:#ccc; text-decoration:none; } a:hover { background-color:#eee; transition:1.0s;-o-transition:1.0s;-moz-transition:1.0s;-webkit-transition:1.0s; } ::selection {background: #ccc;color: #eee;} #header { text-align:center; position:relative; top:50px; left:260px; width:707px; height:294px; font-family:Meiryo; font-size:12px; color:#ccc; background-image:url(http://i.imgur.com/SrKqj0W.png); background-position:undefined; background-repeat:no-repeat; } #banner h1 { font-family:微軟正黑體; font-size:15px; position:absolute; top:30px; left:-250px; color:#ccc; height:30px; overflow:hidden; } #banner h2 { text-align:left; position:absolute; top:95px; left:-280px; width:200px; height:180px; color:#fff; overflow:auto; color:#ccc; border:1px #eee solid; padding:5px; } #navigation { BORDER-bottom: 1px dotted; BORDER-top: 1px dotted; display:inline; text-align:center; color:#ccc; position:absolute; left:-240px; top:60px; } #navigation li { display:inline; text-align:center; color:#ccc; height:35px; line-height:10px; } #spotlight { position:absolute; top:-80px; left:120px; text-align:center; color:#ccc; border:1px dashed #ccc; width:600px; height:70px; overflow:scroll; } #spotlight h5 { text-align:center; color:#ccc; border-bottom:1pt dashed #ccc; } #content { position:absolute; top:350px; left:200px; float:right; width:750px; } .more{padding:5px;} .more a{font-size:0;} .more a::before{padding:5px;content:" CLICK ME ";color:#fff;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;background:#ccc;font:300 14px sans-serif;} .more a:hover::before{background:#fff;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;color:#ccc;} #article-area { width:590px; color:#ccc; margin:0 auto; } .article { margin-top:10px; margin-bottom:20px; color:#ccc; } .article-head { height:39px; position:relative; color:#ccc; } .publish { position:absolute; top:2px; left:600px; font-family:微軟正黑體; font-size:12px; height:36px; width:45px; overflow:hidden; text-align:center; color:#fff; background: #ccc; border-radius: 8px; } .article .article-head .publish .time{display: none;} .article .article-head .publish .day{display: none;} .article .article-head .publish .year{display: block;} .title { height:25px; font-size:20pt; border-top:1px #eee solid; border-bottom:1px #eee solid; padding-top:10px; width:450px; overflow:hidden; color:#ccc; } .article-content a { padding-bottom:1px; color:#ccc; } .bookmark,.author,.forward { text-align:right; color:#ccc; line-height:140%; } .article-footer { color:#ccc; overflow:hidden; _overflow:none; _height:1%; padding-top:5px; line-height:140%; } .history { display:none; float:right; width:290px; } .refer { display:none; float:left; width:290px; } .back-to-top { display:none; clear:both; text-transform:uppercase; font:10px Century Gothic; letter-spacing:0; text-align:right; } .main-list { color:#ccc; width:590px; margin:10px auto; } .main-list table { color:#ccc; width:100%; margin:10px auto; } .main-list th { line-height:25px; background:#df889c; color:#ccc; padding:2px 5px; } .main-list td { font-size:10px; line-height:25px; color:#ccc; padding:0 10px; } td.list-date { color:#ccc; font:9px Tahoma; width:50px; letter-spacing:0; padding:0 5px; } .list-title img { float:right; margin-left:3px; } #murmur-list td.list-date { padding:5px; } .list-visit,.list-comment { width:40px; } .user-post-title { color:#ccc; height:25px; line-height:25px; padding-left:10px; margin:10px 0; } .post-comment { display:none; width:200px; height:50px; line-height:25px; margin:10px auto 20px; } #content .post-comment a { display:block; height:50px; padding-left:25px; } .single-post { overflow:hidden; _overflow:none; _height:1%; background:#fff; margin-bottom:20px; padding-bottom:10px; } .post-info { height:27px; font-size:10px; line-height:27px; margin-bottom:10px; position:relative; padding-left:55px; _padding-top:5px; } .post-info img { vertical-align:middle; } .post-info .floor { color:#ccc; width: 80px; height: 80px; padding: 0px; text-align:center; font:bold 13px Century Gothic; line-height:25px; display:block; position:absolute; left:0; top:0; } .post-photo img { width: 80px; height: 80px; padding: 0px; float:left; } .post-photo { width: 80px; height: 80px; padding: 0px; float:left; margin-left:10px; } .post-text { float:right; width:470px; margin-bottom:5px; } .reply-text { float:right; width:405px; margin-right:10px; display:inline; min-height:30px; _height:30px; color:#ccc; padding:5px 5px 5px 50px; } .single-post.secret .post-text { color:#ccc; float:none; width:auto; padding-left:70px; } #trackback-box #trackback-url { margin:10px 0; } #trackback-box input { color:#ccc; -webkit-border-bottom-right-radius:15px; -moz-border-radius-topleft:15px; -moz-border-radius-bottomright:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border:1px dashed #ccc; } #trackback-box .post-text { width:auto; float:none; padding:0 10px; } #comment-form { background:#fff; color:#ccc; width:580px; margin:10px auto; padding:10px 5px; } .month/*月*/ .date/*日*/ .day {display:none;} .year/*年*/ .time {display:none;} #comment-form p { text-align:right; margin:0 10px 5px; } #comment-form table { width:100%; border:none; } #comment-form table td { vertical-align:top; border:none; padding:2px 5px; } #comment-form table th { vertical-align:top; width:70px; border:none; text-align:right; padding:2px 5px; } #comment-form input#blogcommenttext_name { width:95.5%; } #comment-form textarea { width:99%; height:90px; font-family:Arial; font-size:11px; line-height:18px; color:#ccc; background:#ccc; } .page { font-size:11px; font-family:Century Gothic; text-align:center; margin:10px 0; } .page a { margin:0 5px; padding:0 3px; } .page a:hover,.page span { background:#eee; padding:0 3px; } #links-row-2 { position:absolute; top:360px; left:-20px; float:left; } .box { color:#ccc; } .box-title { height:25px; background-color:#FFF; color:#ccc; font-size:13px; padding-left:20px; border:1px #eee solid; } .box li { line-height:220%; padding:0 10px; } .box h6 { margin-left:10px; line-height:200%; } .box-more { text-align:right; margin:5px 10px; } #box-ad .box-text,#hiiir .box-text,#boxevent_clubbroadcast .box-text,#archive .box-text,#favorite .box-text { position:absolute; top:5px; left:5px; margin:0 15px; } #headshot { width:250px; height:105px; position:relative; margin:15px auto; } #headshot .box-title { background:none; padding:0 0 0 30px; } #headshot .box-text { margin:0; padding:0; } #headshot li#headshot-img { background:none; width:75px; line-height:0; position:absolute; top:15px; right:20px; padding:0; } #headshot li#headshot-img img { width:70px; color:#ccc; background:#fee; padding:2px; } #headshot li#friend-apply { position:absolute; top:33px; left:30px; } #headshot li#send-message { position:absolute; top:60px; left:30px; } #calendar table { width:70%; margin:0 auto; } #calendar th,#calendar td { font:11px Century Gothic; text-align:center; line-height:20px; } #calendar td { padding:2px 1px; } #calendar td a { display:block; background:#fcc; border-right:1px solid #fbb; border-bottom:1px solid #fbb; padding:0 1px; } #murmur { width:250px; background:#ffdde2; position:relative; margin:15px auto; } #murmur .box-title { height:55px; padding:0 0 0 27px; } #murmur .box-text { _height:1%; margin:0; padding:5px 0; } .murmur-time { position:absolute; left:15px; top:17px; font:10px Century Gothic; } .murmur-text { line-height:150%!important; padding:10px!important; } #broadcast ul { overflow:hidden; _overflow:none; _height:1%; margin-bottom:5px; padding:0 15px 7px; } #broadcast li { background:0; padding:0; } #broadcast .broadcast-photo { float:left; line-height:0; } #broadcast .broadcast-time { float:right; width:185px; line-height:20px; } #broadcast .broadcast-text { float:right; width:185px; height:20px; line-height:20px; overflow:hidden; } #search ul { overflow:hidden; _overflow:none; _height:1%; margin:0 15px; } #search li { float:left; background:none; padding:0; } #latest-comment li,#subscription li,#latest-trackback li { line-height:150%; padding:3px 10px; } #latest-comment a,#latest-trackback a,#subscription a { display:block; width:99%; } .folder .box-text { margin:0 10px; } #footer { clear:both; height:50px; text-align:center; color:#ccc; border-top:0; padding:20px 10px 0; } #footer p { color:#ccc; } #bottom { display:none; color:#ccc; } fieldset,img,abbr,acronym { border:0; font-family:Meiryo; font-size:12px; color:#ccc; } body,html,p,a:hover,marquee,table,div,font,td,img,a,a:hover,nput,textarea,select,some,option,span,tr,.face { cursor:url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur),auto; } #trackback-box input#trackback-input,#comment-form input,#comment-form input.radio,#comment-form input#send-comment { color:#ccc; -webkit-border-top-left-radius:15px; -webkit-border-bottom-right-radius:15px; -moz-border-radius-topleft:15px; -moz-border-radius-bottomright:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border:1px dashed #ccc; } #headshot li,#murmur .box-text li { background:none; } #category ul,#mylink .inner-box { margin-bottom:5px; } #counter .box-text li { display:inline; padding-right:20px; } .box-text { color:#ccc; padding:10px 0; } .author { font-size:8px; opacity:0.3; filter:alpha(opacity=30); -moz-animation-name:fadeIn; -moz-animation-iteration-count:1; -moz-animation-duration:.7s; -webkit-animation-name:fadeIn; -webkit-animation-iteration-count:1; -webkit-animation-duration:.7s; -o-animation-name:fadeIn; -o-animation-iteration-count:1; -o-animation-duration:.7s; animation-name:fadeIn; animation-iteration-count:1; animation-duration:.7s; -webkit-transition:all .7s ease; -o-transition:all .7s ease; -khtml-transition:all 0.7 ease; transition:all 0.7 ease; } .author:hover { font-size:11px; opacity:1.0; filter:alpha(opacity=100); } #topbar { right:0; position:fixed; width:100%; display:block!important; width: 180px !important; min-width: 1070px !important; z-index: 1 !important; box-shadow: none !important; background: transparent !important; left: 50% !important; margin-left: -440px; border-right: 1px dotted #aaa; } .topbar__lang {display:none;} .topbar__logo{display: none;} .topbar__search{display: none;} .topbar__announce{display: none;} .topbar__notification .topbar__dropdown-lists{ left: -304px !important; } .topbar__notification .topbar__dropdown-lists:before{ margin-left: -195px !important; } .topbar__notification .topbar__dropdown-lists:after{ margin-left: -195px !important; } ::selection,::-moz-selection { background:#ccc; color:#FFF; } .time,#comment-title.user-post-title,.img,.span,.title h2 img,#trackback-title.user-post-title,.img,.span,.img.pixnet-user,.user-ip,#visitor.box .box-title,.modal-footer,.idle-adsense,.idle-related-posts,#links-row-1,#banner .skiplink,#banner #blog-category,.list-num,.reply-text p,#comment-form table tr.comment-form-title,#comment-form table th font,#category .box-more,#category h6 img,#counter.box .box-title { display:none; } #visitor .box-more {display:none;} #visitor li img,#crumb li img{width:15px;height:15px;transition-duration: 0.6s;float:left;padding:0 5px;} #visitor li img:hover,#crumb li img:hover{width:25px;height:25px;transition-duration: 0.6s; } #pixblogad{display:none;} #pixblogad-banner2{display:none;} .pix-related-post{display:none;} .article-footer {display: none;} .forward {display: none;} #trackback-url {display: none;} .box-title:before{ content: "?"; padding-left: 10px; } .box-title:after{ content: "?"; padding-left: -5px; } .post-photo img { width: 80px; height: 80px; padding: 0px;background:url(http://pic.pimg.tw/bluegirl73623/4b40a838a673b.png?v=1262528569) no-repeat; margin:0px;padding-top:20px;padding-left:0px; }

*用了wei姊姊的去廣告方法，請把側邊欄位的東西移去側欄2

*有基本css基礎可自行調色，將#ccc和#eee調自己喜歡的色

*header 的圖片可修改，大小707x294 ，width height也可以修改少許