［自製相簿CSS語法樣式］紫色櫻花調模版
各位北鼻
版主又再次推出與我相簿同款界面的模板
這次版主嘗試用代表春天氣息的櫻花作為背景圖案
以及帶有神祕感的紫色來做為模版的底色
希望大家會喜歡
喜歡的拿走後要留言
算是給版主最棒的鼓勵唷!
@版主的貼心小叮嚀:
1.由於版主沒有提供預覽圖示 所以請自行將喜歡的語法貼回自己的樣式設計精靈點選預覽樣式
2.若遇到版主的語法有問題 請盡速通知版主修正或到版主的部落格中在重新複製語法
3.版主會將私下分享的自製語法檢查N遍 若有錯誤會修正並貼回原來發表樣式的文章中
免責聲明:
1.本CSS語法痞客邦模版才適用喔
2.本人非抄襲他人 若有雷同純屬巧合
3.若有侵權行為請告知 本人立刻下架
4.本語法是本人私下分享非為公開貢獻的樣式
5.若有不滿意之處可以盡情且任意修改
6.拿走樣式語法記得留言唷!若無法按右鍵複製請立即留下你的足跡通知我
7.請尊重原著 不要擅自發表或分享 發表或分享時請善用引用
8.以上規則希望各位能遵守 不便之處敬請見諒
語法如下
/*************************************
作者:陽光甜姐兒
套用請留言，修改請留言給我
別當小偷喔，卸卸你的尊重呀
**************************************/
html{
SCROLLBAR-ARROW-COLOR: #b40090;
SCROLLBAR-FACE-COLOR: #fcd8fc;
SCROLLBAR-DARKSHADOW-COLOR: #b40090;
SCROLLBAR-BASE-COLOR: #b40090;
SCROLLBAR-HIGHLIGHT-COLOR: #fcd8fc;
SCROLLBAR-SHADOW-COLOR: #fcd8fc;
SCROLLBAR-TRACK-COLOR: #b40090;
SCROLLBAR-3DLIGHT-COLOR: #b40090}
body {
margin:0;
padding:0;
font-family: 'trebuchet ms', verdana, sans-serif;
font-size: 12px;
color: #b40090;
BACKGROUND:url(http://p6.p.pixnet.net/albums/userpics/6/5/795865/49df589e9ca3b.gif);}
a, a:link, a:active, a:visited { color: #b40090; text-decoration: none; }
a:hover { color: #d848b4; text-decoration: underline;}
#container { position:relative;width:750px;border:2px double #b40090; background: #fcd8fc; margin:0 auto; }
/***** Page Header ******/
#pageHeader {}
/**********************************************************************
**
** pageHeader 內容解析
**
** navbar：
**
** homeLink （回到 Pixnet首頁之透明 GIF 連結，可自由運用）
** navbarLink （Pixnet 基本連結列，包括登入、登出以及管理介面）
**
** headerBody
**
** albumPanel （相簿標題與描述）：
** albumName （使用者自訂相簿名稱）
** albumTopic （使用者自訂相簿主題描述）
**
** userPanel （使用者之各項連結－預設為隱藏，可自由顯示）：
** userAlbum （連往使用者之相簿）
** userBlog （連往使用者之部落格）
** userGbook （連往使用者之留言板）
** userProfile （連往使用者之個人名片）
** userProfile （連往使用者之個人名片）
**
** userFunctions （各項特殊功能按鈕－陸續增加中）：
** rssLink （整體相簿、單本相簿之RSS訂閱連結）
**
** userFriends （好友名單－除位置外其他樣式無法自由修改）
**
***********************************************************************/
#navbar { padding:5px 10px; height:150px; margin:0 auto; text-align:right;}
.homeLink { display: none; }
.navBarLink {}
.navBarLink a, .navBarLink a:visited, .navBarLink a:active { color:#b40090; }
.navBarLink a:hover {}
#headerBody {}
#albumPanel { position:absolute; top:30px; left:10px;}
#albumName { font-size:20px; }
#albumName a{ color:#b40090; }
#albumTopic { color:#b40090; }
.displaythumbs #albumTopic, .displayimage #albumTopic {}
#userPanel { position:absolute; z-index:10; top:100px; left:10px;}
.userAlbum a {}
.userBlog a {}
.userGbook a {}
.userProfile a {}
.link-separator {}
#userFriends {}
#userFriends ul {}
#userFriends a span{ padding:3px 6px; border:1px solid #b40090; background:color:#fcd8fc;filter:alpha(opacity=80); -moz-opacity:.80; opacity:.80; }
#userFriends a:hover { text-decoration: none;}
#userFriends a:hover span{ filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; }
/***** Page Body ******/
#pageBody {}
/**********************************************************************
**
** pagebody 內容解析
**
** contentHeader （位置、頁數、換頁、選單、自定區塊等）
** contentBody （頁面主要內容）
** contentFooter （頁數資訊與換頁連結等）
**
***********************************************************************/
#contentHeader {}
/**********************************************************************
**
** contentHeader 內容解析
**
** breadCrumb （目前所在位置）
** crumbCat （所在分類）
** crumbAlb （所在相簿）
**
** albumCount （相簿／圖片數量及頁數）
**
** navButtons （相簿瀏覽功能及按鈕）
**
** pageSelector （換頁連結）
** pageParent （回上一層）
** pagePrev （向前一頁）
** pageNow （目前所在頁數）
** pageNumber （頁數）
** pageBreak （頁數段落）
** PageNext （向後一頁）
**
** funcLinks （瀏覽功能選單）
** funcBrowse （相簿／圖片瀏覽功能選單）
** funcInfo （相簿／圖片資訊選單）
**
** albumAbout （相簿介紹區塊）
** albumTitle （相簿標題）
** albumDesc （相簿描述）
**
** userDiv （相簿自定區塊）
**
***********************************************************************/
#breadCrumb {position:absolute;margin-top:-40px;width:70px;font-size:15px;text-align:center;}
#breadCrumb a, #breadCrumb a:active, #breadCrumb a:visited {}
#breadCrumb a:hover{}
#crumbCat {}
#crumbAlb {}
.albumCount { margin:0 auto;width:730px; height:30px;BACKGROUND:#fcd8fc;border: 1px solid #b40090; }
.albumCount span { color:#b40090; display:block;padding-top:5px;padding-left:10px;}
#navButtons {}
.pageSelector { text-align:center; margin-top:24px;}
.pageSelector ul { margin:0; padding:0; list-style-type:none;}
.pageSelector ul li{ display:inline; padding:0 2px;}
.pageSelector a, .pageSelector a:active, .pageSelector a:visited { padding:2px 5px; color:#b40090; border:1px solid #b40090; }
.pageSelector a:hover {}
.pageParent {}
.pagePrev {}
.pageNow {color:#d824d8;padding:2px 5px; }
.pageNumber {}
.pageBreak {}
.pageNext {}
#funcLinks { margin-top:-18px; margin-right:25px;text-align:right;}
#funcLinks ul { margin:0; padding:0; list-style-type:none; }
#funcLinks ul li { display:inline; }
#funcLinks a span{ padding:2px; border:1px solid #b40090; color:#b40090;}
#funcLinks a:hover { color:white; text-decoration: none; }
#funcLinks a:hover span{}
.funcBrowse {}
.funcInfo {}
#albumAbout {}
.albumTitle {}
.albumDesc {}
#userDiv {position:relative;margin:0px auto;margin-top:30px;width:720px;font-size:10px;text-align:center}
/***** Content Body ******/
#contentBody { margin-top:20px; }
/**********************************************************************
**
** 相簿列表之 pageBody 內容解析
**
** albList ul （相簿列表）
** li.catBox （相簿分類之框架）
** li.albBox （單本相簿之框架）
** albThumb （相簿封面圖外框）
** img.thumb （縮圖）
** img.thumgSpacer （使縮圖垂直置中之透明GIF）
** albData （相簿資訊外框）
** albTitleDiv （相簿標題及額外資訊按鈕）
** albInfo （相簿額外資訊按鈕）
** albPrivate （私人相簿符號）
** albTitle （相簿標題）
** albDesc （相簿標題及額外資訊按鈕）
**
***********************************************************************/
.albList { margin:10px;width:750px;}
.albList ul { margin:0; padding:0; list-style-type:none;}
.albBox { float:left;width:350px; height:150px;margin-bottom:20px;BACKGROUND: #fcd8fc;border: 1px solid #b40090; }
.albBoxOdd { margin-right:20px; }
.albThumb{ float:left;height:150px; width:120px; text-align:center;BACKGROUND:#fcd8fc; border-right: 1px solid #b40090;}
.albBoxOdd .albThumb{ }
.albThumb span{}
.catBox .albThumb span{}
.albThumb a img.thumb{ border:2px double #b40090;vertical-align:middle; }
.albThumb a:hover img.thumb{ }
.albThumb img.thumbSpacer{ height:150px; width:0px; vertical-align:middle; }
.albData { float:right; overflow:hidden; overflow-y:auto;width:220px;height:150px;}
.albBoxOdd .albData{ }
.albTitleDiv { padding-top:10px;color:#b40090;border-bottom: 1px solid #b40090;}
.albNum {}
.albInfo { }
.albInfo a img{}
.albInfo a:hover img{}
.albPrivate {}
.albTitle {}
.albDesc { padding-left: 15px;padding-top:10px; line-height:20px; }
#contentBody .spacerDiv{ clear:both; height:0px; }
/**********************************************************************
**
** 相簿縮圖頁面之 pageBody 內容解析
**
** thumbList ul （縮圖清單）
** li.thumbbox （縮圖及標題之框架）
** thumbImg （縮圖框）
** img.thumb （縮圖）
** img.thumgSpacer （使縮圖垂直置中之透明GIF）
** thumbTitle （圖片標題）
**
***********************************************************************/
.thumbList ul {
display:block;
list-style-type: none;
margin:0px;
padding:0px; }
.thumbBox {
float:left;margin-left:6px;}
.thumbImg {
BACKGROUND: url(http://p6.p.pixnet.net/albums/userpics/6/5/795865/49df589e9ca3b.gif);
border:3px double #b40090;
center top no-repeat;
height:120px;
width:120px;
margin:6px;}
.thumbImg span{
display:block;
padding-top:15px;
padding-left:15px;
text-align:center;
width:90px;
height:90px;}
.thumbImg a img.thumb{
border:0px;
vertical-align:middle; }
.thumbImg img.thumbSpacer{
border:0px;
width:0px;
height:90px;
vertical-align:middle; }
.thumbTitle {
width:130px;
line-height:1.25em;
height:3.75em;
margin:10px 5px;
text-align: center;
color:#b40090;
overflow:hidden; }
/**********************************************************************
**
** 圖片顯示頁面之 pageBody 內容解析
**
** imageBox （主要內容框架）
** imageTitle （圖片標題）
** imageFrame （圖片外框）
** imageCaption （圖片標題）
** captionContent （圖片標題）
** thumbStrip （圖片標題）
** thumbFrame （圖片標題）
** thumbAd （圖片標題）
**
***********************************************************************/
#imageBox {text-align:center;margin:12px 0; }
#imageTitle {margin:10px;}
#imageFrame img{border:8px solid #b40090}
#imageCaption{margin:10px 8px;}
#thumbStrip {display:block; width:720px; height:120px;margin:0 auto;}
#thumbStrip ul { margin:0; padding:0; list-style-type:none; }
#thumbStrip ul li{ float:left;height:120px; width:120px; text-align:center;BACKGROUND: url(http://p6.p.pixnet.net/albums/userpics/6/5/795865/49df589e9ca3b.gif); border: 3px double #b40090; margin:3px 7px; }
.thumbFrame { width:120px; height:120px; }
.thumbFrame span {display:block;width:120px; padding-top:15px; text-align:center;}
.thumbFrame img { border:0;vertical-align:middle; }
.thumbAd {width:120px; height:120px; text-align:center; }
.thumbAd span{display:block; padding-top:10px;}
.thumbAd span.adFlag{display:none;}
.thumbAd img{}
#thumbStrip .thumbSpacer {width:0;height:90px;vertical-align:middle;}
.commPost {text-align:center;width:120px;margin:10px auto;background: url(http://p6.p.pixnet.net/albums/userpics/6/5/795865/49df589e9ca3b.gif); }
.commPost a {display:block;height:50px;width:120px;text-align:center;}
.commPost a span{ display:block;padding-top:20px;text-align:center; }
.commPost a:hover span{}
.commBox { position:relative;margin:15px 0;height:20px;width:720px;}
.commAvatar {position:relative;top:0px;}
.commAvatar p{margin:0; padding:0;}
.commAvatar img{}
.commBody {margin-bottom:25px;}
.commBodywrap {}
.commLinks {display:block;width:720px;border:1px solid #b40090; BACKGROUND: url(http://p6.p.pixnet.net/albums/userpics/6/5/795865/49df589e9ca3b.gif)}
.commUsername a, .commUsername a:visited {display:block; padding:10px; color:white;}
.commDate{position:absolute; top:10px;right:50px;}
.commContent {padding-left:45px;padding-top:15px;}
.commDelete{position:absolute; top:15px;right:10px;}
.commBox .spacerDiv{clear:both; height:0px;}
#contentFooter {}
#contentFooter .albumCount{ }
#contentFooter .pageSelector{ }
#pageFooter { text-align:center; padding-top:20px;}
/**********************************************************************
**
** pageFooter 內容解析
**
** footernav （連結列）
** copyright （版權列）
**
***********************************************************************/
#footernav { }
#footernav a, #footernav a:active, #footernav a:visited { color:#b40090}
#footernav a:hover{}
#copyright {}
.privAlbMsg,.passAlbMsg,.Msgbox { width:350px; height:180px; position:relative; background:#000; margin:0 auto;text-align:center;}
.privAlbMsg span,.passAlbMsg span,.Msgbox span {display:block; padding-top:55px;font-size:25px;}
.passAlbMsg span input{}
div.menu { position: absolute; visibility: hidden; width: 130px; left:0; top:0; z-index:500; font-size:12px;
border: 1px solid #FF9900; border-bottom: 0px solid #b40090; background-color: #fcd8fc;}
div.menu ul { margin:0; padding:0 }
div.menu ul li { list-style-type:none; display: block; border-bottom: 1px solid #fcd8fc;}
div.menu a { background:#fcd8fcC;text-decoration:none; white-space:nowrap; display: block; padding: 4px; line-height:20px;}
div.menu a:hover { color:#FF9900; background-color: #fcd8fc; }
div#tipDiv {
position:absolute;
visibility:hidden;
left:-30px; top:0;
z-index:10000;
background-color:#eee;
border:1px solid #333;
width:225px;
padding:6px;
font-size:11px;
line-height:1.3;}
div.ttHead {
margin-bottom:5px;
font-weight:bold;
color:#333;}
div.ttBody {
color:#777;}
div.fmenu {
position:absolute;
visibility:visibility;
left:-100px;
top: -100px;
z-index: 500;
background:#F6F6F6;
border-top:1px solid #CBCBCB;
border-left:1px solid #CBCBCB;
border-right:1px solid #9D9D9D;
border-bottom:1px solid #9D9D9D;
overflow-y:auto;
overflow-x:hidden;
width:175px;
max-height:320px;
height:ex<x>pression( this.scrollHeight > 320? "320px" : "auto" );
font-size:12px; }
div.fmenu ul {
margin:0;
padding:0;}
div.fmenu ul li {
position:relative;
list-style-type:none;
display:block;}
div.fmenu ul li.friendCat {
display:block;
font-size:12px;
color:white;
background:#b8b8b8;
font-family:Arial;
font-weight:bold;
text-decoration:none;
padding:2px;}
div.fmenu ul li.friendLink a{
display:block;
width:100%;
padding:2px 4px;}
div.fmenu ul li.friendLink a:hover{
background: #000; }
div.fmenu ul li.friendLink img {
padding:2px;
vertical-align:top;
border:0px;}
div.fmenu ul li.friendLink span.friendAvatar {
display:block;
width:34px;
height:34px;
background:white;
text-align:center;
border:1px solid #CBCBCB;}
div.fmenu ul li.friendLink span.friendID {
margin-top:-33px;
margin-left:43px;
display:block;
text-decoration:none;}
div.fmenu ul li.friendLink span.friendDesc {
margin-left:43px;
margin-bottom:5px;
display:block;
font-size:10px;
color:#FCC99;
font-family:Arial;
text-decoration:none;}
留言列表
1F-網路創業賺錢 (1)