自製版型 (心情の旅 ) 側欄靠右兩欄式

自製兩欄式版型(2014/03/013)

解析度為1024X768

側欄欄位靠右

此版以納入痞客邦公版中

適用:ie google

01-1

語法如下:

/*--- pixnet版型css -心情の旅 (側欄在右) 作者:visa30(撕心裂肺) 部落格:http://visa30.pixnet.net/blog ---*/ /*------------------------------ #comment-table ------------------------------ */ #comment-form table { width: 96% ; margin: 0 auto ;} #comment-form td , #comment-form th { border: 1px solid #555 ; padding: 3px 5px; } #comment-form input#send-comment { padding: 3px 5px ; } .article-content p{ margin-bottom:1em; } -----------------------------------------------------------*/ #flash-header{ position: absolute ; top: 0px; left: 45px; } #box302131 .box-title , #box304152 .box-title{ display: none ; } #box302131 a{ display:block ; float:left ; height:30px; width:135px; } #box302131{ position: absolute ; top: 462px; left: 67px; width: 850px ; } #box302131 span{ display: none ; } #box304152.box , #box304152 .box-text , #box302131.box , #box302131 .box-text{ background: none ; } html{SCROLLBAR-FACE-COLOR:#000; SCROLLBAR-HIGHLIGHT-COLOR:#333; SCROLLBAR-SHADOW-COLOR:#000; SCROLLBAR-3DLIGHT-COLOR:#333; SCROLLBAR-TRACK-COLOR:#333; SCROLLBAR-DARKSHADOW-COLOR:#000; } a, a:link, a:visited{ color:#006666;text-decoration:none;} a:hover{ color:#4e7289;background-image:url(); text-decoration:none; position:relative;top:2px;left:1px;} body{ font-size: .8em ; font-family:"Arial" ; line-height: 170% ; color:#333 ; background: url('http://i.imgur.com/D9bxR6V.jpg') repeat center top #000; } a{ text-decoration: none ; color:#696928 ; } #authority{ text-align:center ; background:#444 ; background: url('http://i.imgur.com/D9bxR6V.jpg') repeat center top } #authority a{ color:#006666; padding:0px 5px; } #authority a:hover{ color:#4e7289; } .author{ color:#006666; font-weight:bold; font-size:10px;} #container{ } .refer li{ color:#006666; font-weight:bold; font-size:10px;} #container2{ width: 980px ; margin: 0 auto ; position: relative ; background: url('http://i.imgur.com/25lELfj.jpg') repeat-y left top ; } #main{ *height: 1% ; padding: 0px 60px 0px 60px ; } #main:after{ content:"." ; height: 0 ; display: block ; clear:both ; visibility: hidden ; overflow: hidden ; } /*------------------ HEADER -----------------------------------*/ #header{ height: 609px; background: url('http://i.imgur.com/dE5FSXt.gif') no-repeat left top ; position: relative ; margin-bottom: 20px ; } #banner{ width: 590px ; height: 300px; margin: 50px 0px 0px 0px ; } #login-bar{ color:#006666 ; text-align:right ; padding-right: 600px ; font-size: 12px ; z-index: 500 ; position: relative ; } #login-bar a{ font-family: "Verdana" ; color:#006666; } #login-bar a:hover{ color:#4e7289; } #header .skiplink{ display: none ; } #blog-category{ display: none ; } #header h1 a{ font-size: 1.6em ; font-family:"Simhei" ; display: block ; text-align:right ; LINE-HEIGHT: 120% ; position: absolute ; top: 410px ;left:-250px; right: 54px ; width: 450px ; color: #999; z-index: 500 ; } #header h2{ display:block ; text-align:right ; line-height: 130% ; position: absolute ; right: 54px; top: 460px; left:-140px; color:#999 ; width: 440px; z-index: 500 ; } #navigation { position: absolute ; top: 5px ; left: 680px; } #navigation a{ display:block ; height: 45px ; font-size: 1.4em ; font-family:"Simhei" ; color:#006666 ; } #navigation a:hover{ color:#4e7289; } #navigation a:focus{ outline: none ; } #navigation li{ float:left ; width: 75px ; height: 63px; } /*------------------------- CONTENT --------------------------------*/ #content{ position: absolute ; top: 630px ; left: 20px; width: 630px; float:left ; } #spotlight{ background: url('http://i.imgur.com/D9bxR6V.jpg') repeat center top; margin-bottom: 10px; color:#006666 ; padding: 30px 15px ; } #spotlight h5{ font-weight:bold ; font-size: 1.2em ; color: #006666; position: absolute ; top: 0px ; left: 20px; margin-bottom: 5px ; } #spotlight-text{ } #view-mode{ text-align:right ; } .article{ margin-bottom: 30px; background: url(http://i.imgur.com/A7fbfBn.jpg) repeat-y left top ; _height: 1% ; } .article-head{ background: url(http://i.imgur.com/1KKsxUi.jpg) no-repeat left bottom #000 ; padding: 0px 10px 8px 50px ; } .title{ font-size: 1.2em ; letter-spacing: -1px ; } .title a{ margin-left: -30px; color:#006666; font-weight:bold ; } .title a:hover{ color:#4e7289; } .publish{ color:#006666; text-align:right ; font-size: .9em ; } .article-body{ padding: 0px 15px ; } .bookmark , .fans-club , .author , .forward , .back-to-top { text-align:right ; } .forward{ padding-bottom: 10px; margin-bottom: 10px; } .more{ text-align:right ; margin: 10px 0px } .more a{ font-size: 1.2em ; } .more a:focus{ outline: none ; } .article-footer{ background: url(http://i.imgur.com/K6wl9eS.jpg) no-repeat left bottom ; padding: 0px 15px 15px 15px ; } .article-footer a{color:#006666 } /*------------------------- MAIN-LIST ------------------------------*/ .main-list table{ width: 96% ; margin: 0 auto ; } .main-list th , .main-list td{ bordeR: 1px solid #444; padding: 3px 5px ; } .main-list th{ background:#333 ; color:#999; text-align : center ; font-weight: bold ; } /*------------------------ USER-POST -----------------------------------------*/ .user-post-box{ margin: 10px 0px 10px 0px ; color:#006666; } .user-post-title{ font-size: 1.2em ; font-family:"Simhei" ; padding: 13px 0px 15px 80px ; background: url() no-repeat 0px 0px; color:#006666 ; } #trackback-url{ text-align:right ; } .user-post-text{ margin: 0px 20px; } .single-post{ border-bottom: 1px dashed #444 ; padding: 15px 0px; } .post-photo img{ bordeR: 6px solid #444; } .post-info{ text-align:Right ; margin-bottom: 5px; } #comment-box .post-text{ width: 440px; padding: 0px 10px 0px 10px ; float:right ; } .reply-text{ float:right; width: 430px; color:#666 ; margin-top: 7px; padding: 10px; background:#202020; } .reply-text p{ text-align:right ; } .post-comment{ text-align:center ; margin: 10px 0px ; } .post-comment a{ color:#999 ; font-size: 2em ; font-family:"Simhei" ; } .post-comment a:focus { outline: none ; } .secret{ font-size: 1.2em ; padding-left: 10px; } .page { text-align:center ; margin: 3px 0px; } .page span{ padding: 2px 5px; font-weight:bold ; color:#fff ; } .page a{ padding: 2px 5px; bordeR: 1px solid #333; margin: 0px 1px ; color:#666 ; } .page a:hover{ background:#909090; color:#fff ; } #links-row-1{} /*-------------------------- LINKS ---------------------------------*/ #links{ width: 260px; float:right ; color:#006666; position:relative; top:0px;left:40px; } .box{ margin: 0px 0px 30px 0px; background: url(http://i.imgur.com/mdkhAbv.jpg) repeat-y left top ; } .box-title{ background: url(http://i.imgur.com/5QRBZru.jpg) no-repeat left top; padding: 10px 15px 9px 15px ; font-weight:bold ; margin-bottom: 1px; } .box-text{ _height: 1% ; background: url(http://i.imgur.com/PuKh84m.jpg) no-repeat left bottom ; padding: 0px 10px 10px 10px ; } .box-text a{ display:block ; color:#006666 ; } .folder a , .box-more a{ display: inline ; } .box-more{ text-align:Right ; margin-top: 5px; } /*----------------------------------- BOX ----------------------------------*/ #search-target{ width: 127px; } #visitor li img , #crumb li img{ width: 36px ; height: 36px; margin: 0px 2px 2px 0px ; } #broadcast ul{ padding: 5px 0px ; border-bottom: 1px dashed #444 ; } .broadcast-photo{ margin-right: 4px; } .broacast-time{ height: 1.4em ; overflow: hidden ; } .broadcast-time a{ display: inline ; } .broadcast-text{ height: 1.4em ; overflow: hidden ; } #headshot-img{ width: 100px ; text-align:center ; float:left ; } #headshot-img img{ bordeR: 3px solid #ddd ; } #headshot .box-text{ _height: 1% ; overflow: hidden ; _overflow: none ; } #calendar table{ width: 90% ; margin: 0 auto ; text-align:center ; font-size: .9em ; } #calendar th , #calendar td{ text-align:center ; } #category .inner-box , #mylink .inner-box{ margin-bottom: 6px; } #category h6 , #mylink h6{ margin-bottom: 3px; font-weight:bold ; } #powered .box-text { text-align:center ; } /*------------------------------- FOOTER -----------------------------------*/ #footer{ height: 100px; clear:both ; text-align:center ; padding: 15px ; line-height: 130% ; background: url('http://i.imgur.com/E4EC1JY.jpg') repeat-y left top ; } #footer a{ } input , select{ font-family:"Arial" ; } #visitor li img, #crumb li img{ width: 40px; height: 40px; padding: 3px; border: 1px solid #eee; border-right: 1px solid #333; border-bottom: 1px solid #333; } #visitor ul, #crumb ul{overflow: hidden; _overflow: none; _height: 1%;} #visitor li, #crumb li{ float:left; line-height:0; margin: 0px 3px 3px 0px; display:inline; } #broadcast ul{ _height: 1% ; overflow: hidden ; _overflow: none ; } .broadcast-photo{ float:left ; } .single-post{ _height: 1% ; overflow: hidden ; _overflow: none ; } .post-photo{ width:120px ; float:left ; text-align:Center ; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 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; }