207082884_m.jpg


/* CSS Document */
/*主體*/
html{ 屬性↓ 捲軸顏色↓     《捲軸顏色生成器》
scrollbar-face-color:#EDF8FA;     ←拉頁框主顏色
scrollbar-highlight-color:#A7DCEA;   ←拉頁內框亮面
scrollbar-shadow-color:#A7DCEA;    ←拉頁內框暗面
scrollbar-3Dlight-color:#EDF8FA;    ←拉頁框立體亮面色
 
scrollbar-arrow-color:#A7DCEA;
     ←拉頁框箭頭色
scroll-track-color:#EDF8FA;      ←拉頁框背景色
scroll-darkshadow-color:#EDF8FA;    ←拉頁框立體暗面色
    /*scrollbar-Base-Color:*/       ←拉頁框基底顏色
}

body{
 
margin:0px 0px 0px 0px;
   ←四周邊界距離 (上、右、下、左)
text-align: center;  ←文字顯示置:左,中,右   基底背景圖↓(/*←不執行→*/)  
/* background-image:url(http://s.blog.xuite.net/_image/skin/background/50/blogBg_1.jpg); */
background-attachment:fixed;   ←背景圖不捲動  scroll←背景圖捲動
background-repeat:repeat;    ←橫 直 重複排列(填滿)   no-repeat←不重複排列
background-color:#FFFFFF;    ←背景顏色
}

/*連結*/
A {
color: #00306B; ←文字顏色
text-decoration: none; ←(連結無底線)
}
A:link {
color:#004C99; ←連結的文字顏色
text-decoration: none; ←(連結無底線)
}
A:visited {
color: #00306B; ←瀏覽過的連結文字顏色
text-decoration: none; ←(連結無底線)
}
A:active {
color: #00479F; ←使用中的連結文字顏色
text-decoration: none; ←(連結無底線)
}
A:hover {
color: #00479F; ←滑鼠畫過的連結文字顏色
text-decoration: none; ←(連結無底線)
}

/*定位框*/
#container {
position:relative;     ←相對原本的位置
text-align: left; /*width:100%;*/  ←文字顯示置:左,中,右     總體頁面 寬度↓
behavior:expression( this.style.width = (document.documentElement.offsetWidth<970)?"970px":"100%");
min-width:970px;     ←總體頁面 寬度
padding:0px 0px 0px 0px;    ←四周間距 (上、右、下、左)
margin:0px auto; ←邊界距離 自動調整     基底背景圖↓
background-image:url(http://s.blog.xuite.net/_image/skin/background/50/blogBg_1.jpg);
background-repeat:no-repeat;  ←背景圖不重複排列
}

/*檔頭*/    《檔頭圖解》
#banner{
margin: 0px 5px 0px 5px; ←檔頭四周邊界距離 (上、右、下、左)
padding: 0px;    ←間距
height: 200px; ←檔頭高度
}

/*左欄*/    《左欄圖解》
#linksLeft{
position:absolute; ←絕對位置
 
left:0px;
←靠左
width: 205px; ←欄位寬度
margin: 5px; ←離邊距離
}

/*右欄*/    《右欄圖解》
#linksRight{
 
position:absolute;
←絕對位置
right:0px; ←靠右
width: 205px; ←欄位寬度
margin: 5px; ←離邊距離
}

/*中間欄*/    《中間欄圖解》
#mid{
position:relative;     ←相對原本的位置
margin: 0px 215px 0px 215px;   ←四周邊界距離 (上、右、下、左)
padding: 5px 5px 5px 5px;   ←四周間距 (上、右、下、左)
}

/*檔尾*/    《檔尾圖解》
#footer{
clear: both;   ←標籤兩邊都不能有任何文字
text-align:center;   ←文字置中
font-size: 13px;   ←字體大小
color:#00306B;   ←文字顏色
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   ←指定的文字字型
line-height: 16px;   ←樣式值 絕對行距
}

/*欄位名稱*/    《欄位名稱內容圖解》
.sidetitle{
padding:2px;   ←間距
border:#BDF2FF 1px solid;   ←框線 顏色 大小
background:;   ←背景顏色(無)
font-weight:normal;   ←標準的         欄位背景圖↓
background-image:url(http://s.blog.xuite.net/_image/skin/windows/50/blog011_2.gif);
color:#004C99;   ←文字顏色
font-family:Verdana, Arial, Helvetica, sans-serif;   ←指定的文字字型
letter-spacing:0.1em;   ←字元間距
font-size:15px;   ←字體大小
margin-top:5px;   ←離上邊距離
}
/*欄位內容*/
.side{
background:#ffffff;   ←背景顏色
border:#BDF2FF 1px solid;   ←框線 顏色 大小
font-size:12px;   ←字體大小
font-weight:normal;   ←標準的
line-height:140%;   ←字型樣式 百分比
font-family:Verdana, Arial, Helvetica, sans-serif;   ←指定文字字型
padding:4px;   ←文字間距
}

.side li{
 
margin-left: 20px;
   ←項目符號左邊距離
list-style-position: outside;    ←項目符號樣式
}

/*空白*/
.spacer{
clear:both;   ←兩邊都不能有任何文字
}

/******************************************/
/*檔頭class*/

/*日誌名稱*/
.blogname{
font-size: 22px;   ←字體大小
font-weight: bold;   ←粗體的字形
color: #CC003A;    ←文字顏色
padding-left:10px;   ←左間距
padding-top:100px;   ←離上間距
}

/*今日心情*/
.blogemotion{
/*visibility:hidden;*/  ←預設值 ( 改成→ display:none; 為不顯示)
} (/* ←前後有這個符號 這裡面的東東為不執行→ */)
/*加入最愛*/
.blogfavo{
/*visibility:hidden;*/  ←同上 ( visibility:hidden 為隱藏物件)
} (/* ← 前後符號刪除為執行 → */)
/*日誌描述*/
.description{
font-size: 15px;   ←字體大小
color: #99CC00;    ←文字顏色
padding-left:10px;   ←左間距
}
/*選單列*/
.menulist{
padding-top:5px;   ←離上間距
width:100%;   ←寬度
}
/*選單*/
.menu{
padding-top:5px;   ←離上間距
float:right;   ←靠右
padding-right:80px;   ←右間距
}
/*Logo*/
.logo{
visibility:visible;   ←顯示物件
}

/******************************************/
/*中間欄位class*/

/*文章外框*/
#content{
padding: 5px;   ←間距
margin: 5px;   ←邊界距離
background-color:#ffffff;    ←背景顏色
border: #BDF2FF 5px solid;   ←框線 顏色 大小
}

/*文章標題列*/
.title{
width:100%;   ←寬度
height:25px;
background:#E1F4FF;   ←背景顏色
padding-top:5px;   ←離上間距
}
/*文章標題名稱*/
span.titlename{
font-size:15px;   ←字體大小
color:#00479F;    ←文字顏色
font-weight:normal;   ←標準的
padding-left:5px;   ←左間距
}
/*文章日期*/
 
span.titledate{
float:right;
   ←靠右
height:25px;    ←高度
padding-right:10px;   ←右間距
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   ←指定的文字字型
font-size: 11px;   ←字體大小
color: #00479F;    ←文字顏色
}
/*文章評價列*/
.blogrank{
width:100%;   ←寬度
line-height:200%;   ←字型樣式百分比
margin-top:10px;   ←離上邊距離
}
/*文章瀏覽數*/
span.counter{
float:right;   ←靠右
margin-top:15px;   ←離上邊距離
font-size: 12px;   ←字體大小
color: #999999;    ←文字顏色
}

/*文章瀏覽數項目符號*/
span.counter li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif); ←符號圖示
}
/*文章分類*/
span.category{
float:right;   ←靠右
margin-top:15px;   ←離上邊距離
}

/*文章分類項目符號*/
span.category li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletContentArticle.gif);←符號圖示
}
/*文章主體*/
.blogbody{
word-wrap: break-word;  ←視窗邊界換行,僅 IE 支援
width:100%;   ←寬度
}
/*作者列*/
.posted{
width:100%;   ←寬度
text-align:right;   ←物件文字置右
}
/*上下文章*/
.selectbar{
width:100%;   ←寬度
text-align:center;   ←物件置中
}

/*引用列*/
.trackbacktitle{
position:relative;     ←相對原本的位置
width:100%;   ←寬度
margin-top:20px;   ←離上邊距離
margin-bottom:5px;  ←對齊元件下方 (不限文字或圖片)
border-top:1px dotted #cccccc;
border-bottom:1px dotted #cccccc;
font-size: 12px;   ←字體大小
color: #CC6600;    ←文字顏色
height:24px;    ←高度
background:#FEFAED;   ←背景顏色
}
/*引用網址*/
.trackbackurl{
width:100%;   ←寬度
background:#F2F2F2;   ←背景顏色
padding-top:20px;   ←離上間距
padding-bottom:20px;   ←下方間距
text-indent:10px;    ←樣式值
}
/*引用日期*/
.trackbackdate{
width:100%;   ←寬度
text-align:right;   ←物件文字置右
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   ←指定的文字字型
font-size: 11px;   ←字體大小
color: #7A75B9;    ←文字顏色
}
/*引用內容*/
.trackbackcontent{
width:100%;   ←寬度
line-height:150%;   ←字型樣式百分比
margin-top:5px;   ←離上邊距離
border-bottom:1px dotted #cccccc; ←框線(點)顏色
}

/*留言列*/
.comment{
width:100%; ←寬度
border-top:1px dotted #cccccc; ←上框線(點)顏色
border-bottom:1px dotted #cccccc; ←框線(點)顏色
font-size: 12px;   ←字體大小
color: #00A1CE;    ←文字顏色
height:24px;    ←高度
margin-top:20px;   ←離上邊距離
padding-top:5px;   ←離上間距
padding-bottom:5px;   ←下方間距
background:#FEFAED;   ←背景顏色
}
/*留言名稱*/
span.commenttitle{
}
/*留言名稱項目符號*/
span.commenttitle li{
list-style-image:url(http://s.blog.xuite.net/_image/bulletMessageList.gif);  ←符號圖示
}
/*留言按鈕*/
span.commentbutton{
float:right;   ←靠右
}
/*留言作者列*/
.author{
width:100%; ←寬度
}
/*留言作者名稱*/
span.authorname{
}
/*留言日期*/
span.commentdate{
float:right;   ←靠右
text-align:right;   ←物件文字置右
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   ←指定的文字字型
font-size: 11px;   ←字體大小
color: #7A75B9;    ←文字顏色
}
/*留言內容*/
.commenttext{
word-wrap: break-word;  ←視窗邊界換行,僅 IE 支援
width:100%; ←寬度
margin-top:10px;   ←離上邊距離
margin-bottom:10px;  ←對齊元件下方
}
/*留言編輯按鈕*/
.commentedit{
width:100%; ←寬度
border-bottom:1px dotted #cccccc; ←框線 顏色
}
/*留言者信箱*/
span.email{

}

/******************************************/
/*左欄class*/
/*關於我*/
.avatar{ /* 2006-05-09 修改 */
background:#FFFFFF;   ←背景顏色
border:#BDF2FF 1px solid;   ←框線 顏色 大小
font-size:12px;   ←字體大小
font-weight:normal;   ←標準的
line-height:140%;   ←字型樣式百分比
font-family:Verdana, Arial, Helvetica, sans-serif;   ←指定的文字字型
padding:5px;  ←間距
}
/*照片*/
.avatarPhoto{
text-align:center;   ←物件(照片)置中
}
/*帳號*/
.avatarID{
}
/*我的描述*/
.avatarDesciption{
/*visibility:hidden;*/ ←預設值(/*不執行*/)
}
/*關於我按鈕*/
.avatarbutton{
text-align: right;   ←物件(按鈕)置右
}

/*文章分類*/
.categoryTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCategory.gif); ←符號圖示
}
.categoryTitle{
}
.categorySide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);  ←符號圖示
}
.categorySide{
}

/*日曆*/
.calendarTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCalendar.gif); ←符號圖示
}
.calendarTitle{
}
.calendarSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);  ←符號圖示
}
.calendarSide{
}
/*日曆table*/
.calMonth{
width:95%; ←寬度
}
/*日曆首列*/
.calMonthNav{
}
/*日曆上個月*/
.calMonthBackward{
}
/*日曆目前顯示年月*/
.calMonthCurrent{
font-size: 12px;   ←字體大小
font-weight: bold;   ←粗體的字形
color: #000000;    ←文字顏色
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   ←指定的文字字型
}
/*日曆下個月*/
.calMonthForward{
color: #FF0000;    ←顏色
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   ←指定的文字字型
font-size: 12px;   ←字體大小
}
/*日曆星期列*/
.calMonthHeader{
}
/*日曆日欄*/
.calMonthDay{
font-size: 10px;   ←字體大小
color: #999999;    ←文字顏色
text-align:center;   ←物件置中
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   ←指定的文字字型
}
/*日曆今日日期*/
.calMonthToday{
font-size: 11px;   ←字體大小
text-align:center;   ←物件置中
}
/*日曆假日日期*/
.calholiday{
font-size: 11px;   ←字體大小
color: #FF3300;    ←文字顏色
text-align:center;   ←物件置中
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   ←指定的文字字型
}
.calendarbutton{
text-align: right;   ←物件置右
}
/*搜尋文章*/
.searchTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletSearch.gif); ←符號圖示
}
.searchTitle{
}
.searchSide{
text-align:center;   ←物件置中
}
.searchbutton{
text-align:center;   ←物件置中
padding:2px;   ←間距
}


/*我的哈拉室*/
.chatTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletChat.gif);  ←符號圖示
}
.chatTitle{
}
.chatSide{
}
/*已建立的日誌*/
.bloglistTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletBlogList.gif); ←符號圖示
}
.bloglistTitle{
}
.bloglistSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);  ←符號圖示
}
.bloglistSide{
}

/*訂閱電子報*/
.epaperTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletEpaper.gif); ←符號圖示
}
.epaperTitle{
}
.epaperSide{
text-align:center;   ←物件置中
}
.epaperbutton{
text-align:center;   ←物件置中
padding:2px;   ←間距
}

/*自由欄位*/
.customTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCustom.gif); ←符號圖示
}
.customTitle{
}
.customSide{
}
/*日誌使用資源*/
.resourceTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletBlogResource.gif);←符號圖示
}
.resourceTitle{
}
.resourceSide{
text-align:center;   ←物件置中
}
/*留言塗鴉版*/
.paintTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletPaint.gif);  ←符號圖示
}
.paintTitle{
}
.paintSide{
text-align:center;   ←物件置中
}

/******************************************/
/*右欄class*/
/*背景音樂*/
.musicTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletMusicBox.gif); ←符號圖示
}
.musicTitle{
}
.musicSide{
}
.musicbutton{
text-align:left;   ←物件置左
padding:2px;   ←間距
}


/*最新文章*/
.articleTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletArticleList.gif);←符號圖示
}
.articleTitle{
}
.articleSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);  ←符號圖示
}
.articleSide{
}

/*最新留言*/
.messageTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletMessageList.gif);←符號圖示
}
.messageTitle{
}
.messageSide{
text-indent: -3ex;    ←樣式值
margin-left: 3ex;    ←項目符號左邊距離
}
.date {
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   ←指定的文字字型
font-size: 11px;   ←字體大小
color: #7A75B9;    ←文字顏色
}

/*參觀人次統計*/
.countTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif); ←符號圖示
}
.countTitle{
}
.countSide{
}

/*我的訂閱*/
.rssrollTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletRssRoll.gif); ←符號圖示
}
.rssrollTitle{
}
.rssrollSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);  ←符號圖示
}
.rssrollSide{
}
.backbtn li{
list-style-image:url(http://s.blog.xuite.net/_image/blog038.gif);  ←符號圖示
}
.backbtn{
text-align:right;   ←物件文字置右
}
.morebtn li{
list-style-image:url(http://s.blog.xuite.net/_image/blog037.gif);  ←符號圖示
}
.morebtn{
text-align:right;   ←物件文字置右
}

/*日誌評價*/
.rankTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletRank.gif);  ←符號圖示
}
.rankTitle{
}
.rankSide{
}

/*已建立的相簿*/
.albumTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletAlbum.gif);  ←符號圖示
}
.albumTitle{
}
.albumSide{
}

/*最愛連結*/
.linkTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletLink.gif);  ←符號圖示
}
.linkTitle{
}
.linkSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);  ←符號圖示
}
.linkSide{
}

/*個人項目---- 2006-5-11 Modify*/
.personallink{
display: block;  ←資料內容分段顯示
width:190px; ←寬度
margin:0px 0px 0px 0px;   ←四周邊界距離 (上、右、下、左)
}

/*關於我*/
.plink li{
 
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
  ←符號圖示
}
.plink{
}

/*我的相簿*/
.pphoto li{
 
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
  ←符號圖示
}
.pphoto{
}

/*加入好友*/
.pfriend li{
 
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
  ←符號圖示
}
.pfriend{
}

/*我的留言板*/
.pboard li{
 
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
  ←符號圖示
}
.pboard{
}

/*文章分類---- 2006-5-12 Modify*/
.pTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/bulletPersonal.gif);  ←符號圖示
}

.pTitle{
}
 

/*
欄位名稱---- 2006-5-12 Modify*/
.personaltitle{
padding:2px;   ←間距
border:#BDF2FF 1px solid;   ←框線 顏色 大小
background:;
font-weight:normal;  ←標準的     欄位背景圖↓
background-image:url(http://s.blog.xuite.net/_image/skin/windows/50/blog011_2.gif);
color:#004C99;
font-family:Verdana, Arial, Helvetica, sans-serif;   ←指定的文字字型
letter-spacing:0.1em;   ←字元間距
font-size:15px;   ←字體大小
margin-top:5px;   ←離上邊距離
}

/* Applied by Chyuko@Xuite.net */
/*我的影音*/

.pvlog ul{
list-style-type:none;  ←不編號
margin:0 0px;   ←邊界距離
padding:0px 2px 0px 20px;   ←四周間距 (上、右、下、左)
word-wrap: break-word;  ←視窗邊界換行,僅 IE 支援
display: block;  ←資料內容分段顯示
float:left;  ←文繞圖(圖在左) 【FLOAT: right←文繞圖(圖在右)】
}
.pvlog li{
padding:0 0 0 0px;   ←四周間距 (上、右、下、左)
margin:0px 0px 0px 0px; ←四周邊界距離 (上、右、下、左)
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);  ←符號圖示

}

.pboard{
padding:0 0 0 0px;   ←四周間距 (上、右、下、左)
WIDTH: 90px; ←寬度
}

/*下方換頁-----2007-04-02*/

.page {
margin-top: 10px;   ←離上邊距離
margin-bottom: 10px;  ←對齊元件下方
font-size: 12px;   ←字體大小
color: #00479F;    ←文字顏色
line-height: 24px;   ←樣式值 絕對行距
vertical-align:middle;   ←元件的中點對齊
}
.page a:link, .page a:visited, .page a:active {
font-size: 12px;   ←字體大小
color: #004C99;    ←文字顏色
line-height: 24px;   ←樣式值 絕對行距
text-decoration: none;    ←連結不顯示底線
}
.page a:hover {
font-size: 12px;   ←字體大小
color: #00479F;    ←文字顏色
line-height: 24px;   ←樣式值 絕對行距
text-decoration: underline;    ←滑鼠畫過連結 顯示底線
}



說明:

top上 right右 bottom下 lefty左 center中  width寬 height高

padding  ←間距 (物件文字 與框之間的距離)
margin  ←邊距 (欄框(表格) 向外的距離)
margin-top:  ?px; /*上邊界值
margin-right: ?px; /*右邊界值
margin-bottom: ?px; /*下邊界值
margin-left:  ?px; /*左邊界值

display 屬性值
display:none  ←隱藏不顯示任何資料內容
 
display:lnline
  ←將資料顯示再同一行不分段 
display:block
  ←將資料內容分段顯示 

visibility:hidden
  ←為隱藏物件(/*前後有/**/為不執行*/)

CSS串聯樣式表一覽
list-style-type:none;      /*不編號
list-style-type:decimal;    /*阿拉伯數字
list-style-type:lower-roman;  /*小寫羅馬數字
list-style-type:upper-roman;  /*大寫羅馬數字
list-style-type:lower-alpha;  /*小寫英文字母
list-style-type:upper-alpha;  /*大寫英文字母
list-style-type:disc;      /*實心圓形符號
list-style-type:circle;     /*空心圓形符號
list-style-type:square;     /*實心方形符號
list-style-image:url(dot.gif); /*圖片式符號
list-style-position:outside;  /*凸排
list-style-position:inside;   /*縮排

框線
border-bottom: ?px solid 色碼;    /*下面的框線
border-top:   ?px solid 色碼; /*上面的框線
border-left:  ?px solid 色碼; /*左邊的框線
border-right:  ?px solid 色碼; /*右邊的框線

一般常用線條
solid(實心線)、dotted(點)、dashed(短線)、double(雙實線)
 

立體效果線條
groove(立體內凸框)、ridge(立體浮凸框)、inset(凹框)、outset(凸框)
 

連結
text-decoration:
none(連結無底線)、underline(連結加底線)、overline(連結加頂線)、
linethrough(連結加刪除線)、blink(連結閃爍)

 

arrow
arrow
    全站熱搜

    馨晴 發表在 痞客邦 留言(0) 人氣()