本文引用自ru6854 - 痞客樣式01 韓式少女 綠 兩欄式右側欄較寬 留言版樣式01

 

版型預覽1-00.jpg

翔霏學習版-痞客樣式01預覽圖 兩欄式右欄

建議解析度1024X768以上

另有Blog Switc 百款背景網頁特效

更多背景特效 將陸續收集

 版型預覽1-01  

版型語法複製↓ 

body {font-family:arial, verdana, Helvetica, sans-serif;
-webkit-text-size-adjust:none;font-size:12px;
background:url(http://i.imgur.com/Hl10cpz.jpg);
color:#333;line-height:150%;
background-image:url(http://i.imgur.com/Hl10cpz.jpg);
background-position:undefined;}
* {margin:0;padding:0;}

table {border-collapse:collapse;
border-spacing:0;}

address,caption,cite,code,dfn,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:'';}

pre {font-size:1em;}

.article-content {_height:1%;
overflow:hidden;
_overflow:none;
color:#107070;
text-align:left;
margin:10px 0;}

.article-content p {margin-bottom:1em;}

a {text-decoration:none;
color:#107070;}

br {letter-spacing:normal;}

a:hover {color:#00C4C4;}
#authority {border-bottom:1px dashed #107070;
text-align:center;
padding:5px 0;}

#authority a {text-shadow:1px 1px 0 #fff;
margin:0 5px;}

#container2 {width:910px;
background:url(http://i.imgur.com/KuSfNzU.jpg) left top repeat-y;
margin:0 auto;}

#header {height:365px;overflow:hidden;
position:relative;
background:url(http://i.imgur.com/JbFrJ0U.jpg) no-repeat;
background-image:url(http://i.imgur.com/JbFrJ0U.jpg);
background-position:undefined;
background-repeat:no-repeat;}

#login-bar {position:absolute;
left:0;
top:35px;
color:#107070;}

#login-bar a {color:#107070;}

#banner h1 {position:absolute;
left:30px;
top:90px;
height:20px;
width:250px;
overflow:hidden;}

#banner h1 a {font-size:15px;
color:#00cc00;
font-weight:bold;
line-height:20px;
text-shadow:1px 1px 0 #fff;}

#banner h2 {position:absolute;
left:30px;
top:130px;
font-size:9px \9;
color:#00cc00;
height:30px;
width:300px;
line-height:15px;
overflow:hidden;}

#blog-category {position:absolute;
top:80px;
left:500px;
font-size:15px;
color:#107070;}

}

#blog-category a {color:#107070;}

#navigation {position:absolute;
left:20px;
top:210px;}

#navigation li {float:left;
height:25px;}

#navigation li a {display:block;
width:100%;
height:100%;
font-size:0;
text-indent:-5000px;}

#navigation #link-album {width:65px;}

#navigation #link-blog {width:93px;}

#navigation #link-guestbook {width:93px;}

#navigation #link-profile {width:65px;}

#main {background:url(http://i.imgur.com/KuSfNzU.jpg) no-repeat;
overflow:hidden;
_overflow:none;
_height:1%;
padding:20px;}

#content {float:left;
width:625px;
overflow:hidden;}

#spotlight {-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#107070;
border:1px solid #3AA5A5;
margin:0 10px 30px;
padding:10px 15px;}

#spotlight h5 {color:#fc0;
font-weight:bold;
font-size:15px;
margin-bottom:5px;
text-shadow:1px 1px 0 #107070;}

#spotlight-text {color:#107070;}

.article {_height:1%;
margin-bottom:20px;
border-bottom:1px dotted #FF7F7C;
padding-bottom:20px;}

.article-head {_height:1%;}

.publish {font-size:11px;
font-family:verdana;
height:24px;
text-shadow:1px 1px 0 #FF7F7C;
padding-top:14px;
padding-left:50px;
background:url(http://i.imgur.com/6g7DykJ.jpg) no-repeat;
color:#fff;}

.title {_height:1%;
padding:5px 10px;}

.title a {color:#107070;
font-weight:bold;
font-size:20px;
text-shadow:1px 1px 0 #fff;}

.title a img {display:inilne;}

.article-body {text-align:right;
color:#107070;
margin:10px;}

.article-footer {-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#97E2DC;
margin:10px;
padding:10px;}

.back-to-top {text-align:right;
text-transform:uppercase;
text-shadow:1px 1px 0 #eee;}

.article-area-title,#view-mode {color:#97E2DC;}

.main-list {-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#C9F3F0;
margin:10px;
padding:20px;}

.main-list th {border-bottom:2px solid #00FFFF;
padding:5px;}

.main-list td {border-bottom:1px solid #2ADFDF;
padding:5px;}

.user-post-box {_height:1%;
margin-bottom:30px;}

.user-post-title {height:50px;
margin-bottom:20px;
font-size:0;
text-indent:-5000px;
background:url(http://i.imgur.com/Hu0nLsP.jpg) no-repeat;}

#comment-box .user-post-title {background:url(http://i.imgur.com/Hu0nLsP.jpg) left bottom no-repeat;}

.single-post {-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
overflow:hidden;
_overflow:none;
_height:1%;
width:580px;
background:#97E2DC;
border:1px solid #BCF6F1;
margin:10px auto;
padding:10px;}

.post-info {color:#107070;
font-size:12px;
font-family:tahoma;
font-weight:bold;
margin-bottom:5px;
text-shadow:1px 1px 0 #fff;
float:left;
width:500px;}

.post-photo {float:right;
width:60px;}

.post-photo img {width:50px;
height:50px;
border:1px solid #ccc;
padding:2px;}

.post-text {color:#C40000;
float:left;
width:500px;}

.reply-text {border-top:1px dashed #FF7F7C;
padding-top:5px;
color:#C675EC;
margin-top:5px;
float:left;
width:500px;}

.single-post.secret .post-text {float:none;
width:auto;}

#trackback-url {text-align:right;
padding:10px;}

#trackback-box input#trackback-input {width:300px;}

#trackback-box .post-text {width:auto;
float:none;}

.page {text-align:center;
padding:20px;}

.page a,.page SPAN {-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
border:1px solid #9CEBAE;
color:#9CEBAE;
margin:0 1px;
padding:3px 10px;}

.page a:hover {background:#00C4C4;
border:1px solid #00C4C4;
color:#fff;}

.page SPAN {color:#666;}

#links {margin-top:120px;
float:right;
width:220px;
overflow:hidden;}

.box {_height:1%;
margin-bottom:20px;}

.box-title {background:url(http://i.imgur.com/elBzwEF.jpg) no-repeat;
padding-left:45px;
font-weight:bold;
color:#0F4A4A;
font-size:20px;
font-family:華康行書體;
text-shadow:1px 1px 0 #FFFF00;
height:30px;
line-height:30px;}

.box-text {color:#888;
font-size:15px;
line-height:20px;
padding:10px!important;}

.box-more {text-align:right;
margin:5px 0;}

.box-more a {font-size:11px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background:#9CEBAE;
color:#fff;
padding:2px 5px;}

#user-info dl dd {margin:0;}

#user-info .user-img {margin-bottom:5px;
width:95px;}

#user-info .user-img img {-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#fff;
border:1px solid #ccc;
padding:3px;}

#calendar th,#calendar td {text-align:center;
padding:1px;}

#calendar td a {-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background:#97E2DC;
color:#107070;
display:block;
margin:1px;}

#search ul,#visitor ul,#crumb ul {overflow:hidden;
_overflow:none;
_height:1%;
margin-bottom:5px;}

#visitor li,#crumb li {float:left;
line-height:0;
margin:2px;}

#visitor li img,#crumb li img {width:40px;
height:40px;
background:#fff;
border:1px solid #000;
padding:1px;}

#search li {float:left;
margin-right:3px;}

#latest-trackback a,#latest-comment a,#subscription a {display:block;
width:99%;}

#footer {clear:both;
background:url(http://i.imgur.com/mGvxKT1.jpg) no-repeat;
padding-top:50px;
height:100px;
text-align:center;}

#bottom,#bottom a {color:#107070;}

input,textarea {vertical-align:middle;
font-family:Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif;
font-size:1em;
color:#666;
border:1px solid #ccc;
background:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:2px 5px;}

select {font-family:Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif;
font-size:1em;
color:#666;
border:1px solid #ccc;
background:#fff;
width:90%;
padding:2px;}

#header h1 a {color:#0cc;
font-size:14pt;}

#header h1 a:link,#header h1 a:visited,#header h1 a:hover,#header h1 a:active {color:#0cc;}

#header h1 {font-size:14pt;}

#header h2 {color:#0cc;
font-size:12pt;}

fieldset,img,abbr,acronym {border:0;}

#banner .skiplink,.time,.title img,.post-comment,#recent-article img {display:none;}

.main-list table,#calendar table {width:100%;}

#latest-trackback li,#latest-comment li,#subscription li,#announce li,#recent-article li,#hot-article li,#category li,#latest-comment li,#latest-trackback li,#subscription li {
margin-bottom:3px;}

#container #links-row-1 div.hslice[id*="-mib-"], #container #links-row-1 div.hslice[id*="-Mib-"], #container #links-row-1 div.hslice[id*="-mIb-"], #container #links-row-1 div.hslice[id*="-miB-"]{

display:none !important;}

/*此語法只有pixnet可以用,請不要擅自亂改語法及圖片喔!*/
/*將這段語法貼在CSS最下面就可以囉!*/
#visitor ul{left:20px;width:180px;height:195px;background:
url(http://i.imgur.com/E7726Id.gif);
margin-left:13px;padding-left:15px;padding-top:105px;}

#visitor IMG {}

#visitor .box-text li a{ height:45px;width:45px;
display:block;
MARGIN: 5px;
background:#FFF url(http://i.imgur.com/coC2CsX.gif) no-repeat center center;}
#visitor .box-text li a:hover {background:none;}
#visitor .box-text li a img{visibility:hidden;height:45px;width:45px;}
#visitor .box-text li a:hover img{visibility:visible;height:45px;width:45px}

#visitor .box-text li { float: left;}
#visitor .box-text ul{}
#visitor .box-more{clear:both;}

a, a:link, a:visited{color:#107070;text-decoration:none;}
a:hover{color:#C675EC;position:relative;top:2px;background:url(http://) repeat-x bottom;}

html{SCROLLBAR-FACE-COLOR:#97E2DC;
SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;
SCROLLBAR-3DLIGHT-COLOR:#FFFFFF;
SCROLLBAR-ARROW-COLOR:#FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR:#97E2DC;}

#category .box-text h6 img{display:none;}
#category .box-text h6 {
background-image:url(http://cute.pro.vexp.idv.tw/blogimg07042.gif);
background-repeat:no-repeat;
background-position:left center;color:#107070;
line-height:30px;
padding-left:25px;font-size:16px}


#category .box-text li a{background-image:url(http://cute.pro.vexp.idv.tw/cros1-icon-f06_sZQv.gif);
background-repeat:no-repeat;
background-position:1px 1px;
padding-left:22px}

#category .box-text li a:hover{background-image:url(http://cute.pro.vexp.idv.tw/blogimg07042.gif);
background-repeat:no-repeat}
padding-left:22px

 

                              翔霏學習版-痞客留言板01預覽圖

留言板預覽1-01

 留言板語法複製↓ 

 

body {font-family: 'trebuchet ms', verdana, sans-serif;
background:#81D2CC url(http://i.imgur.com/LRc89jZ.jpg) repeat-x top;
color:#000000;
font-size:12px ;
margin:0;}

#Container{background:url(http://i.imgur.com/HXsT89x.jpg) repeat-y center;
width: 901px;
margin: 0 auto;
text-align: left;}

#pageHeader{background:url(http://i.imgur.com/xLkxcCa.jpg) no-repeat top center;
color:#000000;
width:901px;
height:500px;}

#navbar {padding:0px 10px;
position:relative;
top:445px;
left:-30px;
color:#0C7A6F;
margin:0 auto;
text-align:right;}

.navBarLink {color:#0C7A6F}
.navBarLink a, .navBarLink a:visited, .navBarLink a:active {color:#0C7A6F }
.navBarLink a:hover {color:#0C7A6F}

#gbheader {}

.adblock {padding-bottom:10px;}

.gbTopic {padding: 10px 0px 0px 55px;}

.gbTopic a {
color: #6c2b07;
font-family: Arial, Helvetica, sans-serif;
line-height: 23px;
font-size: 14px;
text-decoration: none;}

.gbDescr {color: #C40000;
font-family: Arial, Helvetica, sans-serif;
line-height: 20px;
font-size: 12px;
text-decoration: none;
float:left;
padding: 5px 0px 0px 80px;
clear: both;}

#gbbody {clear:both;
width: 700px;
margin: 0 auto;}

#gbfooter {}

#pageFooter {color:#187773;clear: both;
width:901px;
height:90px;
background:#81D2CC url(http://i.imgur.com/a0HVX9E.jpg) no-repeat center top;}

#footernav {float:left;
margin-top:80px;
padding-left:35px;}

#copyright {float:right;
margin-top:80px;
padding-right:35px;
color:#aaa;}

.crtxt {color: #187773;
font-family: Arial, Helvetica, sans-serif;
line-height: 23px;
font-size: 12px;
text-decoration: none;}
a:hover {font-family: Arial, Helvetica, sans-serif;
color: #187773;
text-decoration: none;}

a.styleLink {font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 23px;
color: #0C7A6F;
text-decoration: underline;}

a.styleLinkNow {font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 23px;
color: blue;}

.styleTxt {font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 23px;
color: #0C7A6F;
text-decoration: none;}

.gbBox {background:#C0EAE6;
margin:0 auto 30px auto;
width:700px;}

.spacerDiv{clear:both;}

.gbBoxLeft {width:150px;
border:0px;
float:left;}

.gbBoxRight {width:550px;
float:right;}

.gbUserImg {border-right: 0px;}

.ImgTd {text-align:center;
padding: 10px;
height:90px;}

.UsernameTd {text-align:center;
padding: 7px 0px 3px 0px;
height:25px;}

.UserlinkTd {padding: 7px 0px 3px 0px;
height:25px;
text-align:center;}

.UserlinkTd table {margin:0 auto;}

.UserlinkTd a span{display:none;}

.UserlinkTd a {display:block;
width:16px;
height:16px;}

.linkMail a {background:url(http://s.pixfs.net/f.pixnet.net/css/gb/images/email.gif) center; }
.linkURL a {background:url(http://s.pixfs.net/f.pixnet.net/css/gb/images/www.gif) center no-repeat; }
.linkIP a {background:url(http://s.pixfs.net/f.pixnet.net/css/gb/images/info.gif) center no-repeat; }
.linkDelete a {background:url(http://s.pixfs.net/f.pixnet.net/css/gb/images/delete.png) center no-repeat;}

.loggedIn {padding-left:15px;
background: url(http://s.pixfs.net/f.pixnet.net/css/gb/images/vuser.gif) left no-repeat;}

.InnerBox {border-collapse: collapse;
width:520px;
margin:10px;}

.fieldName {width:80px;
text-align:right;
padding-right:5px;
border-bottom: 1px solid #81D2CC;}

.field {border-bottom: 1px solid #81D2CC;
text-align:left;
padding: 2px 5px;}

.gbTitle {color: #0C7A6F;
font-family: Arial, Helvetica, sans-serif;
line-height: 23px;
font-size: 14px;
text-decoration: none;
font-weight: bold;}

.gbReplyTd {background:#CEFEFE;}

.gbReply {color:#446D8C;
background:#CEFEFE;}

.userPanel {float:right; margin-right:-30px; margin-top:2px; margin-bottom:80px;}
.userPanel a {color:#187773}

.userComment {clear:both;
position:relative;
top:-50px;
text-align:center;
text-align: center;}

.pageSelector {text-align:center;
margin: 0 auto;
width:680px;
height:33px;
background:#C0EAE6;}

.pageSelectorTop {position: relative;
top:-22px;
padding-top:5px;
padding-left:20px;}

.pageSelectorBtm {margin-top:10px;
padding-top:5px;
padding-left:20px;}

.InnerBox input {border: 1px solid gray;
padding: 2px;
width:95%;}

input.radio {border: 0px;
width: 5%;}

.PrivateMsg {display:block;
padding:20px;
background: url(http://s.pixfs.net/f.pixnet.net/css/gb/images/permdeny.gif) no-repeat 38% 50%;
border: 1px dashed gray;
font-size: 14px;
color: #187773;
font-weight: bold;}

.outGB {font-size: 11px;
color: #187773;}

html{SCROLLBAR-FACE-COLOR:#97E2DC;
SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;
SCROLLBAR-3DLIGHT-COLOR:#FFFFFF;
SCROLLBAR-ARROW-COLOR:#FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR:#97E2DC;} 

 

翔霏作品素材皆取自網路加工 如造成原創不悅請告知  翔霏將立即移除 

文章標籤

♋bluecollar896♋ 發表在 痞客邦 留言(0) 人氣()