自製版型-引領時尚-側欄靠右兩欄式

自製兩欄式版型(2014/02/26)

解析度為1024X768

側欄欄位靠右

適用:ie google

images

語法

*----------------------------------------------------------- pixnet版型css - 引領時尚 (側欄在右) 作者:visa30(撕心裂肺) 部落格:http://visa30.pixnet.net/blog -----------------------------------------------------------*/ .single-post{border: 3px ridge #c0c0c0;background: url();-khtml-border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;} .post-photo IMG,.reply-text,.post-info {-khtml-border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;} #visitor img{border: 3px ridge #c0c0c0;background: url();-khtml-border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;} #links img{border: 1px ridge #c0c0c0;background: url();-khtml-border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;} #comment-title,#trackback-title{ display: none; } .post-comment{display:none;} .back-to-top a{border:2px ridge #FFFFFF;-khtml-border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;} .more a{position:relative; top:35px;left:0px; } #bottom{ display: none; } #user-info dt{ position:relative; top:0px;left:40px; } #user-info dd{ position:relative; top:0px;left:40px; } html{border:3px ridge #909090; background:url(http://i.imgur.com/e0lxsCx.gif) fixed repeat -15px -90px;scrollbar-base-color:#000; scrollbar-face-color:#000; scrollbar-arrow-color:#000; scrollbar-3d-light-color:#909090; scrollbar-highlight-color:#909090; scrollbar-shadow-color:#909090; scrollbar-dark-shadow-color:#909090;-khtml-border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;} body { font-size:12px; font-family:arial, Century Gothic; line-height: 160%; background: url() left top repeat; } #blog-main{} #article-main{} a {color:#FFF;} a:hover {color:#909090;text-decoration:none;background-image:url(http://ppt.cc/0pBp);} #body-div{border:3px ridge #909090; width: 980px;position:relative; top:-2px; background:url(http://i.imgur.com/EVe7EaA.jpg) left top repeat; position: relative; margin:0 auto 20px;-khtml-border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px; } #authority{ position:absolute; left: 0; top: 5px;left:830px; z-index:9000; } #authority a{ display:block; float: left; height: 20px; line-height: 20px; font-size: 12px; border: padding: 1px 5px 1px 25px; color:#FFF; } #authority a#newpost { background:url() 5px center no-repeat ; margin-right:5px; } #authority a#backstage { background:url() 5px center no-repeat ; } #authority a:hover{ color:#909090; } #header{ background:url(http://i.imgur.com/bJ1jgHi.gif) left top no-repeat; height: 700px; } #login-bar{ position:absolute; right:0; top: 5px;left:30px; color:#FFF;border:2px ridge #FFF ;background:#000 ;font-size:100%;-border-radius: 10px;-webkit-border-radius: 10px;width:915px;} #login-bar a{color:#FFF;} #login-bar a:hover{ color:#909090; } #banner{display: none;} #banner h1 a{ display: none; } #banner h2{ display: none; } #banner .skiplink{display: none;} #banner #blog-category{ display: none; } #banner #blog-category a{display: none; } #container{} #container2{} #container3{} #navigation{overflow:hidden ;_overflow:none ;position:absolute;top:-6px;left:480px;width: 300px;height:17px;z-index:999;} #navigation a{display:block ;height:35px;color:#FFF;} #navigation li{float:left ;height:35px;} #link-album a{width:60px;} #link-blog a{width:60px;} #link-guestbook a{width:60px;} #link-profile a{width:60px;} #main{ overflow: hidden; _overflow: none; _height: 1%; } #links{width:268px ;float:right ;position: relative;right:20px;margin-top:16px;position:relative; top:-35px;left:-45px;} #links-row-1{display:none;} #links-row-2{color:#FFF;} .box{ margin: 15px 0 } .box-title{ background:url(http://i.imgur.com/btGLRrW.gif) no-repeat; height:60px; padding: 30px 5px 0 200px; color:#fff; font-weight:bold; font-size:13px; } .box-text { padding:10px 0; color:#FFF; } .box-text a{color:#FFF;} .box-text a:hover{color:#909090;} .box li{ background:url() left bottom no-repeat; padding: 0 10px; line-height:220%; } .box h6{ margin-left: 10px; line-height:200%; font-weight:bold; } .box-more{ margin: 5px 10px; text-align:right; } .box-more a{ border:1px solid #fff; border-right: 1px ridge #FFF; border-bottom:1px ridge #FFF; padding: 1px 3px; color:#FFF; } .box-more a:hover{ border:1px ridge #FFF; border-right: 1px ridge #FFF; border-bottom:1px ridge #909090; } #box-ad .box-text, #hiiir .box-text, #boxevent_clubbroadcast .box-text, #archive .box-text, #favorite .box-text{ margin: 0 15px; } #headshot { background:url(http://pic.pimg.tw/pixnetvisual/49dacf27a4d4c.png) left top no-repeat; width: 250px; height:105px; margin: 15px auto; position: relative; } #headshot .box-title{ background:none; padding: 0 0 0 30px; } #headshot .box-text{ padding:0; margin:0; } #headshot ul{ } #headshot li{background:none;} #headshot li#headshot-img{ background:none; width: 75px; line-height:0; padding:0; position: absolute; top: 15px; right:20px; } #headshot li#headshot-img img{ width:70px; padding: 2px; border:2px ridge #FFF; background:#909090; } #headshot li#friend-apply{ position:absolute; top: 33px; left: 30px; } #headshot li#send-message{ position:absolute; top: 60px; left:30px; } #recent-article{} #recent-article img{} #latest-comment {} #latest-comment a{} #latest-comment span{} #content{ overflow: hidden; float:left; width: 630px; padding-top: 12px;position:relative; top:-35px;left:25px; } #spotlight{ width: 592px; margin:10px auto; background:url() left top repeat-y; } #spotlight h5{ background:url(http://i.imgur.com/SuzsBqY.gif) left top no-repeat; height: 60px; padding-left: 190px; color:#FFF; font:bold 15px arial; line-height:40px; } #spotlight-text{ padding: 10px; color:#FFF; background:url() left bottom no-repeat; } #article-area{ width: 590px; margin:0 auto; } #article-area .article-area-title{} #view-mode{} #display{} #display SPAN {} #article-box{} .article{ margin-top: 10px; margin-bottom: 20px; } .article-head{ height: 60px; background: url(http://i.imgur.com/SuzsBqY.gif) left top no-repeat; position: relative; } .publish { font: 10px arial; text-transform: uppercase; color: #FF0000; position: absolute; top: 22px; left: 340px; height:15px; width: 250px; overflow:hidden; text-align: right; } .publish .month, .publish .date{ font-size:14px; font-weight: bold; font-family: Century gothic; letter-spacing: -0.05em; height:15px; color:#FF0000; } .publish .day, .publish .year{ position:relative; top:-2px; } .publish .time{display:none;} .title{ height: 20px; padding-top: 20px; margin-left: 150px; width: 470px; overflow:hidden; } .title a{position:relative; top:-13px; font-size: 16px; font-weight:bold; color:#FFF; } .title a:hover{color:#909090;} .article-body{ margin: 10px 0; } .article-body a{color:#FFF;} .article-body a:hover{color:#909090;} .article-content{ margin: 15px; font-size:13px; line-height: 170%; letter-spacing:0.05em; color:#FFF; } .bookmark, .author, .forward{ text-align: right; color:#FFF; line-height:140%; } .article-footer{ overflow:hidden;_overflow: none; _height: 1%; border-top: 0px dashed #ccc; padding-top:5px; color:#FFF; line-height:140%; } .history{ float: right; width: 290px; } .refer{ float: left; width: 290px; } .back-to-top{ clear: both; text-transform: uppercase; font: 10px Century Gothic; letter-spacing:0; text-align: right; } .back-to-top a{ background:#aaa; padding: 0px 3px; line-height: 20px; color:#fff; } .back-to-top a:hover{ background:#fff; color:#ccc; } .user-post-box{} .user-post-title{ background:url(http://pic.pimg.tw/pixnetvisual/49dacf2874769.png) no-repeat; height: 25px; line-height: 25px; padding-left: 10px; color:#337f98; margin: 10px 0; } #trackback-box .user-post-title{} #comment-box .user-post-title{} .post-comment{ width:90px; height: 25px; margin: 10px auto 20px; line-height: 25px; } #content .post-comment a{ display:block; font-size:12px; color:#5589a6; height: 100%; padding-left: 25px; background:url(http://pic.pimg.tw/pixnetvisual/49d8d812ccfb6.png) 5px center no-repeat #d9efed; border:10px solid #a6d0de; } #content .post-comment a:hover{ border:1px solid #74afc3; color:#285974; } .single-post{ overflow: hidden; _overflow: none; _height: 1%; background:#353535; margin-bottom: 20px; padding-bottom: 10px; border:2px solid #c0c0c0; } .post-info{ background:#909090 url() no-repeat; height:27px; font-size:11px; *font-size:10px; line-height: 27px; margin-bottom: 10px; color:#555; position:relative; padding-left: 55px; _padding-top: 5px;border: 2px ridge #c0c0c0; } .post-info img{ vertical-align: middle; } .post-info .floor{ width: 40px; height:25px; text-align: center; color:#FFF; font: bold 13px Century Gothic; line-height:25px; display: block; position: absolute; left:0; top:0; } .post-photo{ width: 95px; float: left; margin-left: 10px; display: inline; } .post-photo img{ border:1px solid #ddd; } .post-text{ float: right; width: 470px; margin-bottom: 5px; color:#000; } .reply-text{ float: right; width: 405px; background:url(http://i.imgur.com/JWHFFNF.png) 5px top no-repeat #000; border:1px solid #c0c0c0; border-right:1px solid #c8e8f1; border-bottom:1px solid #c8e8f1; margin-right: 10px; display:inline; padding: 5px 5px 5px 50px; color:#777; min-height: 30px; _height: 30px; } .reply-text p{ display:none; } .single-post.secret{ background:url(http://i.imgur.com/QUUTCAM.png) 5px top no-repeat #000; border:2px solid #c0c0c0;-khtml-border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px; } .single-post.secret .post-text{ float: none; width: auto; padding-left: 70px; font-size:0; color:#FFF; } #trackback-box {} #trackback-box h3 {} #trackback-box SPAN {} #trackback-box #trackback-url{ margin: 10px 0; } #trackback-box input{ border:1px solid #c0c0c0; font:11px arial; padding:2px; margin-left:5px; background:#909090; color:#000;-khtml-border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px; } #trackback-box input#trackback-input{ width: 350px; margin:0; padding:3px } #trackback-text {} #trackback-text .single-post {} #trackback-text .post-info {} #trackback-box .post-text{ width:auto ; float:none ; padding: 0 10px; } #comment-form table tr.comment-form-title { display: none; } #comment-form table th font { display: none;} #comment-form input.radio {border: 0px;} #comment-form {margin:0px auto;position:absolute;top:70px;left:50px;width: 85%;text-align:left;padding: 50px 0px 100px 20px;background: url(http://i.imgur.com/srcMiPL.jpg) left top no-repeat;} #comment-form p {text-align:left;color: #A0A0A0;margin: 0px 5px 20px 30px;} #comment-form table {width: 89% ;margin: 0 auto ;} #comment-form table th {vertical-align: top;border: none;font-size: 11px; *font-size: 10px;color: #A0A0A0; width: 70px;padding: 2px 5px;} #comment-form table td {vertical-align: top;border: none;font-size: 11px; *font-size: 10px;color: #fff; padding:2px 5px;} #comment-form input {border: none;border-bottom: 1px solid #ccc;font-size: 11px; *font-size: 10px;background:transparent;height:16px;font-family: Arial;color: #fff;} #comment-form textarea {background:transparent;overflow:auto;width:65%;height:150px;font-family: Arial;font-size: 13px; *font-size: 12px;border-style:inset;color: #fff;} input#send-comment {font-family:Arial;font-size:13px;color:#A0A0A0;font-weight:900;background:transparent; border: 0px ;width:50px !important;height:20px;line-height:20px;position:relative; right:120px; bottom:28px ;} #calendar .box-text{ line-height:16px;color:#FFF;} #calendar table{ text-align:center; width:95%; } #calendar th{ text-align: center; line-height:16px; } #calendar table th { text-align:center; padding:3px; } #calendar td{text-align:center;padding:3px;} #calendar td a{display:block;color:#909090;} #murmur{ width: 250px; margin: 15px auto; background:#FFF; position:relative; } #murmur .box-title{ background:url(http://pic.pimg.tw/pixnetvisual/49dacf28d6a77.png) left top no-repeat; height:35px; padding:0 0 0 27px; } #murmur .box-text{ margin:0; padding: 5px 0; _height:1%; } #murmur .box-text li{ background:none; } .murmur-time{ position: absolute; left:15px; top: 17px; font: 10px Century Gothic; color:#FFF; } .murmur-text{ padding: 10px !important; line-height:150% !important; } #visitor, #crumb{} #visitor ul,#crumb ul{ overflow: hidden; _overflow: none; _height: 1%; margin:5px 15px; } #visitor li,#crumb li{ float: left; margin: 0px 2px 2px 0; display:inline; line-height:0; padding:0; background:0; } #visitor li img, #crumb li img { width: 50px; height: 50px; } #visitor .box-more, #crumb .box-more{ margin-top: 10px; } #broadcast{} #broadcast ul{ overflow: hidden; _overflow: none; _height: 1%; padding-bottom: 3px; margin-bottom: 5px; padding: 0px 15px 7px 15px; background:url(http://pic.pimg.tw/pixnetvisual/49dacf28052b9.png) left bottom no-repeat; } #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-time a{} #broadcast .broadcast-time span{} #broadcast .broadcast-text{ float: right; width: 185px; height: 20px; line-height: 20px; overflow: hidden; } #search{} #search ul{ overflow: hidden; _overflow: none; _height: 1%; margin: 0px 15px; } #search li{ float: left; background:none; padding:0; } #search li input{ border:1px ridge #909090; font:12px arial; margin-right: 5px; line-height: 20px; padding:2px; } #search input#search-target{} #search input#search-submit{ padding:1px; width: 50px; color:#FFF; background:#909090; } #feed {} #announce{} #hot-article {} #category {} #category h6{color:#a00200} #category ul{margin-bottom: 5px;} #category .box-more {} #archive select {} #archive li a{} #latest-trackback {} #latest-trackback a{} #latest-trackback span{} #subscription{} #subscription a{} #subscription span{} #favorite select {} #mylink {} #mylink .inner-box{margin-bottom: 5px;} #mylink .inner-box h6{color:#fff} #mylink .inner-box li{} #counter{} #counter SPAN{} #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{} .folder .box-title{} .folder .box-text{ margin: 0px 10px; } #powered{} #footer{ clear:both; background:url(http://i.imgur.com/kWtungr.jpg) left 0px no-repeat; padding: 20px 10px 0 10px; height: 122px; text-align:center; border-top: 0; } #footer p{color: #FFF;} #bottom {} #extradiv11{} #extradiv10{} #extradiv9{} #extradiv8{} #extradiv7{} #extradiv6{} #extradiv5{} #extradiv4{} #extradiv3{} #extradiv2{} #extradiv1{} #extradiv0{} body{cursor:URL(https://dl.dropboxusercontent.com/u/132512035/ani/red%20neon%20point.ani);} a:hover{cursor:URL(https://dl.dropboxusercontent.com/u/132512035/ani/Busy.ani);} ::-webkit-scrollbar{border:2px ridge #c0c0c0;background: url(http://i.imgur.com/e0lxsCx.gif);} ::-webkit-scrollbar-thumb{border:2px ridge #c0c0c0;background:#373737;} ::-webkit-scrollbar-button:vertical{border:6px ridge #373737;background:#c0c0c0;} .page{ margin: 10px 0px; font-size:11px; font-family: Century Gothic; text-align: center; } .page a{ margin: 0 5px; color:#FFF; padding: 0 3px; } .page a:hover, .page span{border: 2px ridge #c0c0c0; background:#909090; padding: 0 3px; color:#33;-khtml-border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px; }