部落格開始使用至今,一直在做一些細微的修改,把我修改的歷程在這裡做個紀錄,也提供大家經驗交流
修改的工具:
1. 各達人的教學文章
2. 使用FireFox 搭配 Firebug外掛程式,找出部落格每個元件的名稱及目前設定
3. 不停的修改、預覽、再修改
相關軟體下載:
1. Mozille FireFox 3.04 : 官方網站 下載點
2. Firebug 外掛程式 : 官方網站 下載點 相關教學
●修改捲軸顏色
Html色碼表 http://www.lses.tp.edu.tw/colortable.htm
原始碼說明:
scrollbar-highlight-color: 色碼 /*設定拉頁內框亮面*/
scrollbar-shadow-color: 色碼 /*設定拉頁內框暗面*/
scrollbar-3dLight-color: 色碼 /*設定拉頁框立體亮面色 */
scrollbar-darkshadow-color: 色碼 /*設定拉頁框立體暗面色 */
scrollbar-arrow-color: 色碼 /*設定拉頁框箭頭色 */
scrollbar-track-color: 色碼 /*設定拉頁框背景色 */
實際修改:
SCROLLBAR-FACE-COLOR: #fff #F5F8F2;
●將書籤列向右對齊
.fans-club,
.bookmark,
.forward,
.author{
tetext-transform: uppercase;
text-align:right; /* 增加這一行*/
font-size: 13px; *font-size:10px;
line-height: 18px;
}
●網站名稱樣式修改
#banner h1 a{
font-family:"標楷體" ;
font-size: 24px;
font-weight: bold;
letter-spacing: 5px;
color: #1C19FF; /*新增這一行*/
}
/* 新增以下區塊 */
#banner h1 a:hover{
color: #0300DC;
font-weight: bolder;
}
●位移的效果
position:relative;top:1px;
left:1px;
調整頁面寬度
#container2{
margin: 0 auto;
width: 830px; /* 整個頁面的寬度調整*/
background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/1189331537.jpg)
left top repeat-y;
position: relative;
}
#content{
float: right;
width: 620px; /* 內文寬度調整 */
margin-top: -210px;
color:#999;
}
留言列表