樣式｜Twilight ｡

10/24/2011 000 0 Comments

樣式實例可參考：Asimko's / Sunry's / Yuan's / Irene's / Ying's
主要只針對相簿的部分，其他部分只大約寫一下，不盡完美，不介意者再使用。

/* ----- ----- ----- ----- ----- ----- ----- ----- banner｜上方banner設定 */ #banner { width: 960px; /* banner：940px */ height: 260px; /* 比banner多10px */ background-image: url(http://pics1.yamedia.tw/34/userfile/a/asimko/album/14e74cafbe1ec3.jpg); background-repeat: no-repeat; background-position: center 10px;}h1 { position: absolute; top: 50px; right: 20px; width: 700px; color: #ffffff !important; font-size: 18px; text-align: right; font-family: Verdana; letter-spacing: 1px; line-height: 120%; height: 40px;}h1 a{ color: #ffffff !important; } h2 { width: 700px; position: absolute; top: 110px; left: 50px; font-size: 10.5px; color: #666666; line-height: 170%; text-align: left; font-family: Verdana; }/* ----- ----- ----- ----- ----- ----- ----- ----- ----- banner end */ a:link, a:visited, a:active{color: #666666;text-decoration: none;}a:hover{color: #999999;text-decoration: none;}hr{color: #ffffff;height: -1px;}BODY{ background: #ffffff;; margin: 0px; color: #666666; font-family: Verdana; font-size: 10.5px; letter-spacing:0.05em;}A IMG{ color:#CCCCCC; border-top-width: 0px ; border-left-width: 0px ; border-bottom-width: 0px ; border-right-width: 0px ; background: #fff; padding-right: 3px; padding-left: 3px; padding-bottom: 3px; padding-top: 3px;}IMG.profile{ border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; margin-bottom: 5px; border-right-width: 0px;}/* ----- ----- ----- ----- ----- ----- ----- #mainFrame｜部落格整體框架設定 */ #mainFrame { background: url(http://pics.blog.yam.com/themes/megaportfest/images/background.gif) transparent repeat left top; margin: 0px auto; width: 960px; position: relative; text-align: left;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- topbar */#topbar{ height:30px; padding: 5; width: 100%; font-size: 10.5px; background-color: #fff;}#topbar a:link, a:visited, a:hover, a:active{ color: #666666; }#companyBar { position: relative; top: 7px; z-index: 10; color: #666666; width: 150px; float: left; padding-left: 30px;}#companyBar A{ color: #666666; background: none transparent scroll repeat 0% 0%; }#companyBar SPAN.logo{ display:none; }#companyBar a:link{ color: #666666; text-decoration: none;}#companyBar a:visited{ color: #666666; text-decoration: none;}#companyBar a:hover{ color: #999999 text-decoration: none;}#companyBar a:active{ color: #666666; text-decoration: none;}#adtext{ position: absolute; top: 7px; left: 250px;}#adtext a{ color: #666666;}#commend{ width:150px; float: right; text-align: center; color: #666666;}#linkLogin { float:right; position: relative; top: 7px; display: block; font: #666666;}#linkLogin A{ color: #666666; background: none transparent scroll repeat 0% 0%; }#linkLogin a:link{ color: #666666; text-decoration: none;}#linkLogin a:visited{ color: #666666; text-decoration: none;}#linkLogin a:hover{ color: #999999; text-decoration: none;}#linkLogin a:active{ color: #666666; text-decoration: none;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- topbar end *//* ----- ----- ----- ----- ----- ----- ----- ----- ----- navBar｜選擇頻道 */ #navBar{ width: 938px; letter-spacing: 1px; position: absolute; top: 240px; line-height: 13pt; text-align: right; color: #bbbbbb;}#navBar a:link, #navBar a:visited, #navBar a:active{ color:#ffffff; margin-right: 0px; padding-left:5px; padding-right:2px; padding-top:3px; padding-bottom:3px; letter-spacing: 1px;}#navBar a:hover{ margin-right: 0px; padding-left:5px; padding-right:2px; padding-top:3px; padding-bottom:3px; letter-spacing: 1px; color:#dddddd;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- navBar end */ /* ----- ----- ----- ----- ----- ----- ----- contentBlock｜中間大區塊設定 */#contentBlock{ width: 960px; text-align: left; padding-top:12px; height:100%;}/* ----- ----- ----- ----- ----- ----- ----- ----- MainSide ｜旁邊大區塊設定 */#MainSide{ border-right: medium none; padding-right: 30px; border-top: medium none; margin-left: 0px; font-size: 10.5px; Z-INDEX: 2; border-left: medium none; width: 200px; color: #666666; line-height: 1.4em; padding-top: 9px; padding-bottom: 20px; border-bottom: medium none; float: right; }#MainSide a:link{ color: #666666; text-decoration: none;}#MainSide a:visited{ color: #666666; text-decoration: none;}#MainSide a:hover{ color: #999999;}#MainSide a:active{ color: #666666;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 旁邊小區塊 */.sideColumn{ padding: 5px; background: #ffffff; margin-bottom: 10px; letter-spacing: 1px;}.sideTitle { font-size: 10.5px; color: #666666; letter-spacing: 3px; text-align:left; font-weight: bold; padding: 0 0 5px 5px; border-bottom: #cccccc 2px solid;}.sideContent { padding: 5px 0 5px 5px; color: #666666; line-height: 18px;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 行事曆 */span.calendar{ margin-left: 5px; margin-right: 5px; text-align: center;}span.calendar a{}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 訂閱浮動視窗標題 */#MainSide ul{ padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; LIST-STYLE-TYPE: none;} #navmenu LI{ padding-right: 2px; padding-left: 1px; FLOAT: left; padding-top: 2px; position: relative;}#navmenu LI A{ padding-right: 2px; padding-left: 1px; FLOAT: left; padding-top: 2px; position: relative;}#navmenu LI UL{ DISPLAY: none; left: 0px; color: #666666; padding-top: 5px; position: absolute; top: 1em;}#navmenu LI UL LI{ CLEAR: left; background: #ccc; width: 130px; padding-top: 5px;}#navmenu LI UL LI a:hover{ background: #666666; color: #999999;}#navmenu LI UL LI.title{ background: #31608C; text-align: center;}#navmenu LI:hover UL{ DISPLAY: block;}#navmenu LI.over UL{ DISPLAY: block;} /* ----- ----- ----- ----- ----- ----- ----- ----- ----- 網誌頁面 */#articleBlock{ padding-left: 2px; padding-bottom: 150px; overflow: hidden; width: 600px; border-top-STYLE: none; line-height: 1.7em; border-right-STYLE: none; border-left-STYLE: none; border-bottom-STYLE: none;}#articleBlock{ line-height: normal; float: left; padding-left: 25px; width: 655px; position: relative; padding-right: 10px;}#articleBlock a:link, #articleBlock a:visited, #articleBlock a:active{ color: #666666; text-decoration: none;}#articleBlock a:hover{ color: #999999; text-decoration: none;}.post{ margin-bottom: 20px; border: 0px; background: #ffffff; padding-top: 10px;}.postbody { height:100%; padding-left: 8px; font-size: 10.5px; line-height: 1.6em;}.post_title { padding-left: 13px; margin-top: 0px; font-size: 18px; margin-bottom: 1px; padding-bottom: 0px; margin-left: 0px; font-weight: bold; color: #666666; padding-top: 7px; letter-spacing: 0px;}.post_title a:link, .post_title a:visited, .post_title a:active{ color: #666666; text-decoration: none}.post_title a:hover { color:#999999; text-decoration: none}.post_date{ font-weight: normal; font-size: 10.5px; color: #999999; font-family: Verdana; letter-spacing: 1px; width: 250px; padding: 10px 0 0 15px;}.post_time { padding-left: 15px; padding-top: 3px; padding-bottom: 8px; line-height: 1.8em; height: 100%; font-size: 10.5px;}.cheer{ padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; line-height: 1.8em; height: 100%; font-size: 10.5px; border: 0px; }.post_body{ float:left; width: 100%; background: #ffffff;}.post_content { padding-left: 15px; padding-top: 15px; padding-bottom: 15px; line-height: 1.8em; height: 100%; font-size: 10.5px; border: 0px; } .post_info { font-size: 10.5px; CLEAR: both; padding-left: 10px; padding-bottom: 11px; padding-top: 6px; border-bottom: 3px solid #eeeeee; text-align: center;}.post_info a:link, .post_info a:visited, .post_info a:active{ color: #666666; text-decoration: none}.post_info a:hover { color: #999999; text-decoration: none} .post_tail{}input.text, textarea { border-right: #666666 1px dotted; padding-right: 2px; border-top: #666666 1px dotted; padding-left: 2px; font-size: 10.5px; background: none transparent scroll repeat 0% 0%; padding-bottom: 2px; border-left: #666666 1px dotted; color: #000000; padding-top: 2px; border-bottom: #666666 1px dotted; font-family: Verdana;}form { padding-right: 0px; padding-left: 0px; font-size: 10.5px; padding-bottom: 0px; margin: 0px; color: #666666; padding-top: 0px; font-family: verdana;}select { font-size: 10.5px; color: #666666; font-family: Verdana;}input.btn { padding-right: 3px; padding-left: 3px; font-size: 10.5px; padding-bottom: 1px; padding-top: 1px; font-family: Verdana;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- trackback 引用區塊 */.trackback{ width:100% }.trackbackURL{ padding-right: 5px; margin-top: 10px; padding-left: 5px; padding-bottom: 8px; border: #666666 0px dotted; padding-top: 5px; }.trackbackTitle{ font-weight: bold; font-size: 10.5px; padding-left: 15px; padding-bottom: 6px;}.trackbackTitle a{ color: #666666;}.trackbackBody{ font-size: 10.5px; padding-left: 15px; padding-bottom: 6px;}.trackbackDate{ font-size: 10.5px; padding-left: 15px; padding-bottom: 6px;}span.trackbackBodyTitle{ font-weight: bold; color: #666666;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 留言文字區塊 */.commentbody{ padding-right: 0px; padding-left: 0px; font-size: 10.5px; padding-bottom: 8px; padding-top: 8px; }.blockquote{ padding-left: 25px; padding-top: 15px; color:#666666; background:#eeeeee; border:0;}.commentNote{ color: #999999; border-bottom: #666666 0px dotted; text-align: right; font-size:10.5px; background-color: #F8F8F8; background-repeat: repeat-x; background-position: top; }.commentNote A{ color: #666666; }.commentNote a:visited{ color: #666666; }.post_commentbody{ padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; line-height: 1.8em; height: 100%; font-size: 10.5px; border: #FFF6E5 0px solid; background:url() left top no-repeat; } span.highlight { font-weight: bold;}.rightPage { text-align:center; margin-bottom: 10px; }/* ----- ----- ----- ----- ----- ----- ----- ----- ----- rss訂閱頁 */.rssmain{display: none; padding-top:10px;}.rssbody{ height:auto; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #666666; border-bottom-color: #666666; border-left-color: #666666; margin-top: 0px; position: relative; width: 98%; padding-left: 10px;}.rssmenu{ color: #666666; font-size: 16px; font-weight: bold; line-height: 30px; text-align: center; }.rss{ width:100%; position: relative;}.rss_content{ margin-top:10px;}.rss_content ul{ margin-left:10px; }.rss_title, .rss_content { width:98%; }.rssphoto{ width:110px; height:110px; float: left; }.rss_view { margin:10px; margin-left:30px; border: 1px solid #CCCCCC; padding: 5px;}.rss_view ul{ list-style-type:none;}.rss_view img{ border:1px solid #cccccc;} /* ----- ----- ----- ----- ----- ----- ----- ----- ----- 個人資料 Profile */ #profile{ margin-bottom: 10px; color: #666666; background:url() #ffffff no-repeat;} #profile table{ width: 100%; font-size:10.5px; padding-left: 10px; padding-bottom: 25px; } .th_title{ padding-right: 5px; padding-left: 5px; font-weight: normal; padding-bottom: 5px; width: 90px; color: #666666; padding-top: 5px; text-align: center;}.td_desc { color: #666666;} .profile_title { CLEAR: both; padding-left: 16px; font-weight: bold; font-size: 10.5px; background: #EDF5F7; width: 650px; color: #666666; line-height: 140%; margin-top:10px; padding-top: 3px; margin-bottom: 10px; letter-spacing:0.08em; border-top: 1px #7EA6C5 dotted ; border-left: 1px #7EA6C5 dotted ; border-bottom: 1px #7EA6C5 dotted ; border-right: 1px #7EA6C5 dotted ;}.introduce { padding-left: 33px; color: #666666; line-height: 22px; font-size:10.5px; padding-bottom: 30px;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 頁數選擇 */.pageCtrl{ padding: 5px; width: 100%; float: left; margin-left: 0px; text-align: left; font-size:10.5px; }.pageCtrl ul{ margin: 0; padding: 0; text-align: right; font-size: 10.5px;}.pageCtrl li{ list-style-type: none; display: inline; padding-bottom: 1px;}.pageCtrl a, .pageCtrl a:visited, .pageCtrl a:active { text-decoration: none; color: #999999;}.pageCtrl a:hover{ color: #999999; text-decoration: none;}.pageCtrl li.currentpage{ font-weight: bold; color: #cccccc;}.pageCtrl li.disablepage{ color: #cccccc;}.pageCtrl li.nextpage{ font-weight: bold;}* html .pageCtrl li.currentpage, * html .pageCtrl li.disablepage{ margin-right: 5px; padding-right: 0; color: #ffffff;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 相簿首頁設定 */ #albumBlock{ width: 710px; text-align: left; float: left;}#albumbody{}h3{ color: #666666; font-weight: bold; font-size: 16px; line-height: 30px; letter-spacing: 2px; }.album { float: left; width: 200px; height: 260px; background: #FFFFFF; padding-top: 5px; padding-right: 8px; padding-bottom: 15px; padding-left: 9px;}.albumimg { height: 200px; width: 200px;}.albumList_title{ color: #333333; width: 100%; font-family: verdana; padding-bottom: 3px; text-align: center; }.albumList_date{ display: none; color: #aaaaaa; font-size: 10.5px; padding-top: 5px; font-family: Verdana; }.albumList_info{ text-align: center;}.album IMG{ border:#cccccc 1px solid; background: #fff; padding: 3px; }/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 相簿內頁設定 */#photobody{}.albumDesc{ color:#666666; font-size:10.5px; margin: 5px;}.albumCategory{ font-size: 10.5px; padding-bottom: 17px; color: #999999; line-height: 150%; letter-spacing: 0.05em;}.photo{ text-align:center; float: left; height: 170px; margin: 10px; font-size: 10.5px; background: none; width: 125px; color: #2e2e2e; text-align: center;}.photo IMG{ border:#cccccc 1px solid; background: #fff; padding: 3px; }.photoimg { height: 100px; width:100px;}.photoList_desc{ width: 100%; color: #999999; height: 14px; font-size: 10.5px; text-align: center;}.albumview{ text-align: right; width: 665px;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 相簿內頁設定 End *//* ----- ----- ----- ----- ----- ----- ----- ----- ----- 單一瀏覽頁面設定 */.backindex{ float:right; position: relative; top: 7px; display: block; color: #666666;} #viewPicDiv { width: 960px; text-align: left; position: relative; border: 0px; margin: 0px auto; background: url(http://pics.blog.yam.com/themes/megaportfest/images/background.gif) transparent repeat left top; } #viewPicDiv a:link, a:visited { color: #666666 ; text-decoration: none;} #viewPicDiv a:hover, a:active { color: #666666; text-decoration: none;}.viewalbumTitle{ font-weight: bold; font-size: 10.5px; color: #666666; line-height: 20px; letter-spacing: 2px; width: 950px; text-align: left;}.viewalbumTitle a:link, a:visited, a:active { color: #666666; text-decoration: none;}.viewalbumTitle a:hover { color: #999999; text-decoration: none;}.photoviewTitle{ width: 100%; color: #666666; height: 20px; text-align: center; float: left;}#photoViewbody{ text-align:center;}.album_pageCtrl{ padding: 2px; width: 100%; float: right; text-align: right;}.photoview{ text-align: center; width: 100%;}.photoview img {}#photomsg{ padding-left:10px; width: 960px; margin-bottom: 20px;}.photomsg_title{ font-size: 18px; font-weight: bold; line-height: 30px; color: #2e2e2e;}.photomsg_comment{ font-size:10.5px; padding: 8px 0 8px 0;}.photomsg_Body{ font-size:10.5px; line-height: 22px;}.photomsg_info{ color: #999999; text-align: right;}.photoviewDesc { width:100%; }table.photoList{ text-align: center; margin-top: 20px; margin-bottom: 20px;} td.photoList{ color: #666666; height: 125px; width: 125px; font-size: 10.5px;}td.photoList img {}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 留言板設定 */#imsg{ font-weight: bold; font-size: 15px; text-decoration: none; border-bottom: #666666 0px dotted; letter-spacing: 0.15em; color:#666666; background: none; margin:12PX; width:100px; text-align:center;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 好友列表 */.friendlist{ width: 120px; height: 150px; float: left; margin: 10px 5px; padding: 5px; text-align: center; background: #ffffff;}.buddyicon{ color: #666666; border: 1px solid #cccccc; background: #ffffff; padding: 3px;}.desc { padding-top: 5px;}.friend_dest{ padding: 3px; float: left; width: 100%; background: #ffffff;}.friend_select{ float: right; display: block; }/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 播客設定 */#articleBlock2{ line-height: 1.7em; width: 698px; padding-left: 20px; overflow: hidden; padding-bottom: 30px; position: relative; float:left;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 頁籤設定 */.shadetabs{ border-bottom: 0px solid gray; width: 668px;}.shadetabs ul{padding: 3px 0;margin-left: 0;margin-top: 1px;margin-bottom: 0;font: bold 10.5px Verdana;list-style-type: none;text-align: left; /*set to left, center, or right to align the menu as desired*/}.shadetabs li{display: inline;margin: 0;}.shadetabs li a{text-decoration: none;padding: 3px 7px;margin-right: 3px;border: 1px solid #778;color: #2d2b2b;background: white url(http://pics.yamedia.tw/themes/bluebird/images/shade.gif) top left repeat-x;}.shadetabs li a:visited{color: #2d2b2b;}.shadetabs li a:hover{ text-decoration: underline; color: #2d2b2b;}.shadetabs li.selected{top: 1px;}.shadetabs li.selected a{ /*selected main tab style */background-image: url(http://pics.yamedia.tw/themes/bluebird/images/shadeactive.gif);border-bottom-color: white;}.shadetabs li.selected a:hover{ /*selected main tab style */text-decoration: none;}.mediamain{ padding-top:10px;}.mediabody{ height:auto; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #778; border-bottom-color: #778; border-left-color: #778; margin-top: 0px; position: relative; width: 655px; padding-left: 10px;}.medialist{ height:100%; float: left; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #CCCCCC; margin-bottom: 10px; width: 100%; padding-bottom: 10px;}.mediaimg{ padding: 5px;}.mediamdig{ display:block; width: 60px; float: left; background-color: #FFFFCC; border: 1px solid #FFCC00; font-weight: bold;} .mediaid { float: left; margin: 0px 3px 10px 0px; width: 150px; text-align:center; } .mediacontent{ float: left; margin: 0px 0px 10px 0px; width: 100%; height: auto; } .mediatitle{ padding: 5px; } .mediadesc{ width: 95%; background-color: #EDF5F8; padding: 2px; float: left; } .mediainfo { text-align:left; padding: 5px; float: left; width: 60%; border-left-width: 1px; border-left-style: solid; border-left-color: #CCCCCC; }.mediamdy2{ text-align:left; padding: 5px;}/* ----- ----- ----- ----- ----- ----- ----- 頁數選擇(RSS、media頁面共用) */.mediapageCtrl{ width: 98%; text-align: right; display: block; padding-top: 6px; padding-bottom: 6px; }.mediapageCtrl ul{ margin: 0; padding: 0; text-align: right; font-size: 10px;}.mediapageCtrl li{list-style-type: none;display: inline;padding-bottom: 1px;}.mediapageCtrl a, .pageCtrl a:visited{padding: 0 5px;text-decoration: none; color: #929292;}.mediapageCtrl a:hover, .pageCtrl a:active{color: #ffffff;background-color: #999999;}.mediapageCtrl li.currentpage{font-weight: bold;padding: 0 5px;color: #FFF;}.mediapageCtrl li.disablepage{padding: 0 5px;color: #57453E;}.mediapageCtrl li.nextpage{font-weight: bold;}* html .mediapageCtrl li.currentpage, * html .mediapageCtrl li.disablepage{ margin-right: 5px; padding-right: 0; color: #990000;}/* ----- ----- ----- ----- ----- ----- ----- ----- ----- 我的俱樂部設定 */.myclublist{ height:100%; padding: 10px; float: left; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #CCCCCC; margin-bottom: 10px; width: 630px;}.myclubimg{ padding: 5px; width: 155px; float: left;} .myclubid { float: left; margin: 0px 0px 10px 0px; width: 630px; height: auto; } .myclubinfo{ text-align:left; padding: 5px; float: left; width: 70%; border-left-width: 1px; border-left-style: solid; border-left-color: #CCCCCC;} .myclubcontent{ width: 610px; font-size: 10.5px; float: left; padding: 10px; background-color: #EBF1F1; } .myclubtitle{ padding: 5px; } .myclubdesc{ padding: 5px; } .myclubdesch3 { font-size: 14px; color:#666666; }.cletemp {display: inline-block;}.clearboth { clear:both; }/* ----- ----- ----- ----- ----- ----- ----- ----- ----- Meaid rss */.mediarss{ margin:10px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #999999; padding-bottom: 5px; height: 120px; width: 95%;}.mediarss_ID{ text-align:center; width:120px; float: left;}.mediarss_view{ float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #999999;}.mediarss_list{ text-align:center; width:160px; float: left;}/* --------------------- float fix ------------------------ */.clx { clear: both; } #commend {float:left;}#commend a img {background:transparent;}