close

部落格開始使用至今,一直在做一些細微的修改,把我修改的歷程在這裡做個紀錄,也提供大家經驗交流

修改的工具:

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;
}

 

arrow
arrow
    全站熱搜

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