自製版型-(幸福回憶)-側欄靠左兩欄式 @ 〆撕鈊裂肺的小窩

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

解析度為1024X768

側欄欄位靠左

此版以納入痞客邦公版中

適用:ie google

wnfOOIR

語法如下:

/*--- pixnet版型css - 幸福回憶 (側欄在左) 作者:visa30(撕心裂肺) 部落格:http://visa30.pixnet.net/blog ---*/ /*--------------------------reset*/ 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;} .article-content p{margin-bottom: 1em;} a { text-decoration: none; } /*a:focus { -moz-outline-style: none; }*/ br{letter-spacing: normal;} /*--------------------------all setting*/ html{SCROLLBAR-FACE-COLOR:#93deed; SCROLLBAR-HIGHLIGHT-COLOR:#ffffff; SCROLLBAR-SHADOW-COLOR:#3a93a5; SCROLLBAR-3DLIGHT-COLOR:#a5cfd7; SCROLLBAR-TRACK-COLOR:#a5cfd7; SCROLLBAR-DARKSHADOW-COLOR:#334c5c; } body { background:#99FFFF; color:#99FFFF; font-size: 12px; font-family: arial; line-height: 160%; } #blog-main{} #article-main{} a {color:#334c5c;} a:hover {color:#4e7289;} #body-div{} /*--------------------------authority*/ #authority{ width: 250px; line-height: 25px; position:relative; top:20px;left:630px; z-index:9000; } #authority a{ color:#334c5c; padding:0px 5px; } #authority a:hover{ color:#4e7289; } #authority a#newpost {} #authority a#backstage {} /*--------------------------container*/ #container{} #container2{ width: 950px; margin: 0 auto; background: url(http://i.imgur.com/gpTP57b.jpg) right top repeat-y #99ffff; } #container3{ background: url() right bottom no-repeat; } a, a:link, a:visited{ color:#334c5c;text-decoration:none;} a:hover{ color:#4e7289;background-image:url(); text-decoration:none; position:relative;top:2px;left:1px;} /*--------------------------header*/ #header{ height: 394px; background: url(http://i.imgur.com/di3SLPb.gif) left top no-repeat; } #login-bar{ position:absolute; right:0;top: 25px;left:75px; color:#334c5c; font-size:100%; } #login-bar a{ color:#334c5c; } #login-bar a:hover{ color:#4e7289; } #banner{ height: 350px; } #banner h1 a{ display:block; width: 100%; height: 350px; font-size:0; text-indent: -5000px; } #banner h2, #banner .skiplink, #banner #blog-category{ display: none; } /*--------------------------navigation*/ #navigation{ position: absolute; top: 420px; z-index: 900; margin-left: 35px; } #navigation li{ width: 230px; height:27px; font-size:0; text-indent: -5000px; margin-bottom: 2px; } #navigation a{ display:block; width: 100%; height:100%; } /*--------------------------相簿明片留言貼圖*/ #navigation #link-album{ background:url(http://i.imgur.com/0sZ9ac6.gif) left top no-repeat; } #navigation #link-blog{display:none;} #navigation #link-guestbook{ background:url(http://i.imgur.com/vW6ssru.gif) left top no-repeat; } #navigation #link-profile{ background:url(http://i.imgur.com/IcMyYNS.gif) left top no-repeat; } /*--------------------------main*/ #main{ overflow: hidden; _overflow: none; _height: 1%; background: url(http://i.imgur.com/gpTP57b.jpg) left top no-repeat; } /*--------------------------content*/ #content{ overflow: hidden; float: right; width: 635px; margin-right: 20px; display: inline; } #spotlight{ margin: 10px 0; border:1px solid #00cccc; padding: 10px; color:#000; background:#FFF; } #spotlight h5{ position:relative; top:-5px;left:20px; font-weight: bold; color:#334c5c; font-size:13px; } #spotlight-text{} #article-area{} #article-area .article-area-title{} #view-mode{} #display{} #display SPAN {} #article-box{} .article{ background: url(http://i.imgur.com/6fprd19.jpg) left bottom no-repeat; padding-bottom: 15px; margin-top: 10px; margin-bottom: 10px; } .article-head{ background: url(http://i.imgur.com/GQrdCSH.gif) left top no-repeat; overflow: hidden; _overflow: none; height: 85px; padding-top: 15px; } .publish { float: right; height: 25px; line-height: 25px; margin-right: 40px; display: inline; color:#334c5c; text-transform: uppercase; } .publish .time{display:none;} .title{ float: left; width: 480px; margin-left: 30px; display: inline; height: 25px; line-height:25px; overflow:hidden; } .title a{ font: bold 13px arial; color:#334c5c; } .title a:hover{ color:#4e7289; } .article-body{ background: url(http://i.imgur.com/NwSQb9A.jpg) left top repeat-y; padding: 10px 20px; color:#000; line-height:180%; letter-spacing:1px; } .article-content{} .bookmark{} .author{} .forward{} .article-footer{ background: url(http://i.imgur.com/NwSQb9A.jpg) left top repeat-y; padding: 10px 20px; color:#334c5c; } .history{} .refer{} .back-to-top{ height: 15px; text-align: right; text-transform: uppercase; } .back-to-top a{ font: 11px arial; } /*--------------------------list*/ .main-list { width: 100%; margin: 10px auto; } .main-list table{ width: 100%; } .main-list h3 {} .main-list th{ line-height: 20px; color:#fff; background:#99ffff; padding: 2px 5px; border-bottom: 1px solid #00cccc; } .main-list td{ font-size:11px; *font-size:10px; line-height: 25px; padding: 0px 10px; background:#eee; border-bottom:1px solid #00cccc; color:#555; } .main-list td a{color:#334c5c;} .main-list td a:hover{color:#4e7289;} .list-num{display:none;} td.list-date { background:#99ffff; font: 9px Century Gothic; width: 50px; color:#334c5c; letter-spacing:0; padding: 0 5px; } .list-title img{ float: right; margin-left:3px; margin-top: 4px; display: inline; } #murmur-list td.list-date { padding: 5px; line-height: 10px !important; } .list-visit, .list-comment{ width: 30px; } /*--------------------------post-box*/ .user-post-box{} .user-post-title{ height: 70px; font-size:0; text-indent:-5000px; background:url(http://i.imgur.com/vQhzhBZ.jpg) center top no-repeat; margin: 20px auto; } #trackback-box .user-post-title{} #comment-box .user-post-title{ background:url(http://i.imgur.com/vQhzhBZ.jpg) center bottom no-repeat; } .post-comment{ text-align: center; margin-bottom: 30px; } .post-comment a{ background:#99ffff; padding: 5px 10px; color:#334c5c; border:1px solid #00cccc; border-right:1px solid #00cccc; border-bottom:1px solid #00cccc; } .post-comment a:hover{ border:1px solid #777; border-right:1px solid #ccc; border-bottom:1px solid #ccc; } .single-post{ overflow: hidden; _overflow: none; _height: 1%; margin: 10px auto; background:#66cccc; border:2px solid #99cccc; width: 550px; color:#333; padding: 5px; font-size:11px; *font-size:10px; line-height:160%; } .post-info{ padding-left: 100px; } .post-photo{ float: left; text-align: center; width: 100px; } .post-photo img{ width: 50px; height: 50px; border:3px double #816c5f; position: relative; top: -10px; } .post-text{ float: right; width:450px; color:#334c5c; } .reply-text{ float: right; width:440px; color:#334c5c; background:#99ffff; border:2px solid #99cccc; padding: 5px; } .reply-text p{ text-align: right; } .single-post.secret{} .single-post.secret .post-text{ float: none; width: auto; } #trackback-box {} #trackback-box h3 {} #trackback-box SPAN {} #trackback-box #trackback-url{ text-align: center; } #trackback-box input#trackback-input{ width: 300px; } #trackback-text {} #trackback-text .single-post {} #trackback-text .post-info { padding:0; } #trackback-box .post-text{ width:auto ; float:none ; } /*--------------------------comment-form */ #comment-form { background: #100505; padding: 5px; width: 556px; margin: 10px auto; } #comment-form p { color: #bbb; text-align: right; margin: 0px 10px 5px; } #comment-form table { width: 100%; border: none; } #comment-form table tr.comment-form-title { display: none; } #comment-form table td { color: #999; vertical-align: top; border: none; padding: 2px 5px; } #comment-form table th { color: #963; vertical-align: top; width: 100px; border: none; padding: 2px 5px; text-align:right; } #comment-form table th font { display: none; } #comment-form input { height: 17px; font-family: Arial; font-size: 11px; color: #ccc; border: none; border-bottom: 1px solid #ccc; background: none; width: 90%; } #comment-form input.radio { border: none; width: auto; background: none;margin:0; padding:0; } #comment-form input#send-comment{ width:70px; background:#963; border:0; color:#fff; } #comment-form textarea { width: 99%; height: 90px; font-family: Arial; font-size: 11px; line-height: 18px; color: #000; border: 1px solid #ccc; background: #fff; } /*--------------------------pages*/ .page{ margin: 0px 0px; font-size:11px; font-family: Arial; text-align: center; } .page a{ margin: 0px 3px; color:#555; padding: 0 3px; } .page a:hover, .page span{ padding: 0 3px; color:#fff; font-weight:bold; margin: 0px 3px; } /*--------------------------links*/ #links{ overflow: hidden; width: 250px; float: left; margin-left: 25px; display: inline; margin-top: 115px; } #links-row-1{} #links-row-2{} #links dl{color: #334c5c; } .box{ background:url(http://i.imgur.com/A2LSY6g.jpg) left top repeat-y; margin-bottom: 20px; } .box-title{ background:url(http://i.imgur.com/cyAlpvi.gif) left top no-repeat; height: 92px; padding-top:10px; font: bold 13px arial; color:#334c5c; text-align: center; } .box-text { background: url(http://i.imgur.com/JypL2Fo.jpg) left bottom no-repeat; padding: 10px 15px; color: #334c5c; }.box-text a{color:#334c5c;} .box-text a:hover{color:#4e7289;} .box-more{ text-align:right; } .box-more a{ font-size:11px; *font-size:10px; border: 1px solid #eee; border-right: 1px solid #988467; border-bottom: 1px solid #988467; padding: 1px 5px; color:#fff; } .box-more a:hover{ color:#4e7289; border: 1px solid #eee; border-left: 1px solid #988467; border-top: 1px solid #988467; } #recent-article li{ background:url(http://i.imgur.com/5uH7v4Y.gif) left 7px no-repeat; padding: 3px 5px 3px 15px; } #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; } #visitor li img, #crumb li img{ width: 40px; height: 40px; padding: 3px; border: 1px solid #eee; border-right: 1px solid #988467; border-bottom: 1px solid #988467; } #broadcast ul{ overflow: hidden; _overflow: none; _height: 1%; margin-bottom: 3px; } #broadcast .broadcast-photo{ float: left; width:50px; display: inline; line-height:0px; } #broadcast .broadcast-photo img{ padding: 3px; border: 1px solid #eee; border-right: 1px solid #988467; border-bottom: 1px solid #988467; } #broadcast .broadcast-time, #broadcast .broadcast-text{ float: right; width: 160px; line-height: 20px; } #broadcast .broadcast-time span{display:none;} #broadcast .broadcast-time a{ background:#eee; color:#966; padding: 1px 3px; font: 11px TAhoma; } #headshot { height: 232px; padding-top: 50px; background:url() left top no-repeat; position: absolute; top: 402px; width: 250px; } #headshot .box-title{display:none;} #headshot .box-text{ background: none; } #headshot ul{ overflow: hidden; _overflow: none; _height: 1%; } #headshot li{ width: 100px; float: right; height: 20px; } #headshot li a{ padding:5px 0px 5px 20px; color:#fff; } #headshot-img{ float: left !important; width: 110px !important; height: 110px !important; } #headshot-img img{ padding: 3px; border: 1px solid #eee; border-right: 1px solid #988467; border-bottom: 1px solid #988467; } #headshot li#friend-apply{ margin-top: 40px; margin-bottom: 5px; background:url(http://pic.pimg.tw/pixnetvisual/49bf57eedb33b.gif) left top no-repeat; } #headshot li#send-message{ background:url(http://pic.pimg.tw/pixnetvisual/49bf57ee0978f.gif) left top no-repeat; } #search ul{ overflow: hidden; _overflow: none; _height: 1%; } #search li{float: left;} #search li input{ border: 1px solid #eee; border-left: 1px solid #988467; border-top: 1px solid #988467; background: none; margin-right: 5px; height: 20px; width: 120px; font: 12px arial; } #search li input#search-submit{ border: 1px solid #eee; border-right: 1px solid #988467; border-bottom: 1px solid #988467; height: 22px; width: 50px; padding:0; } #calendar table{ width: 85%; margin: 10px auto; } #calendar table th{ text-align: center; } #calendar table td{ font-size:10px; text-align: center; border:1px solid #c9b79e; background:#fff; line-height: 20px; } #calendar table td a{ background:#963; display: block; color:#fff; } #category li{margin-left: 15px;} #archive select{ width: 200px; margin-bottom: 5px; background:#fff; border:1px solid #ccc; font: 11px arial; } #murmur .murmur-time{ color:#666; font: 11px Century Gothic; } #murmur .murmur-text{ padding: 5px 0; } #latest-comment li, #subscription li, #latest-trackback li{ margin-bottom: 2px; padding: 3px 5px 3px 15px; background:url(http://i.imgur.com/5uH7v4Y.gif) left 7px no-repeat; } #latest-comment a, #subscription a, #latest-trackback a{ display: block; width: 99%; } /*--------------------------footer*/ #footer{ clear:both; background: url(http://i.imgur.com/SY7uj4c.gif) no-repeat center ; height:27px; text-align:center ; color:#010;} #footer p, #bottom { display:none; } /*--------------------------extradiv*/ #extradiv11{} #extradiv10{} #extradiv9{} #extradiv8{} #extradiv7{} #extradiv6{} #extradiv5{} #extradiv4{} #extradiv3{} #extradiv2{} #extradiv1{} #extradiv0{}