CSS。改靚SINABLOG教學。II
本篇係教改戲玉...要留意哦！
上次教完改LOGO，應該改好了吧！
來啦！今次教既係「MySinaBlog.com | 主頁 | 管理面版 | 資料夾 」呢行字以下，FOOTER以上既BLOG內容。
示範單位：http://cheese326.mysinablog.com
詳細CSS之語法可參考：
http://www.casys.com.tw/news/ReadNews.asp?NewsID=3
- #main就係「MySinaBlog.com | 主頁 | 管理面版 | 資料夾 」呢行字以下，FOOTER以上既BLOG內容。
#main{ /* the middle region between the "top_menu" & "footer" */
float : left;
background-color : #FFFFFF;/*你可以改成自己想要的顏色*/
background: url(http://cheese326.mysinablog.com/resserver.php?resource=awa1.gif); /*呢句係我後加既，就姐係加上圈圈背景圖*/
} - #main_content就係整個blog內容既排列。
#main_content{ /* the content's region */
float : left; /*left就姐係主內容係左邊，相反right就會變左主內容係右邊，side bar既內容去o左左邊*/
width : 530px; /*主內容既寬度，可以唔改*/
} - #content係內容既位置調教。可以不改。
#content{
padding-top : 15px; /*離上15px*/
padding-right: 15px; /*離右15px*/
} - #main_sidebar就係隔離sidebar既寬度同位置。
#main_sidebar{ /* the sidebar's region */
float : right; /*如果你既內容係左，呢個當然係set right啦！相反內容係右的話，呢個就要set right喇！*/
width : 230px; /*sidebar既寬度*/
}
好，宜家開始改既係每一個post，開始會有d難度，要小心留意顏色哦！
- 搵到以下common layout：
/***********************************************/
/* common layout */
/***********************************************/ - div.c_outline就係上圖橙色果部分。如有需要可加框框，如：border: 1px dotted Black;
div.c_outline{ /* the outline */
width : 100%;
padding : 0px;
} - div.c_title即是紅色框框題目名果行。在示範中我將所有邊框刪除，然後用花花作背景圖。
div.c_title{ /* title */
padding-top : 2px;
padding-left : 5px;
height : 20px;
font-family : lucida grande, verdana, arial, sans-serif;
font-size : 13px;
font-weight : bold;
line-height : 1.5;
color : #FFFFFF; /*字顏色改為藍色navy*/
text-align : left; /*對齊改為center*/background-color : #518CCE;border-top : 1px solid #2E66A5;background-image: url(http://cheese326.mysinablog.com/resserver.php?resource=line01.gif); /*加上花花背景圖及其他細節*/
border-left : 1px solid #2E66A5;
border-right : 1px solid #2E66A5;
background-repeat: no-repeat; /*加上花花背景圖及其他細節*/
background-position: center;/*加上花花背景圖及其他細節*/
} - 以下係改紅色框框題目既字及mouse移過去時變色。
.c_title a, .c_title a:link, .c_title a:visited{
color : #FFFFFF; /*因為背景係白色所以將字改成藍色#6495ED*/
text-decoration : none;
background : transparent;
}
.c_title a:active,.c_title a:hover{
color : #FFFFFF; /*因為背景係白色所以將字改成藍色blue*/
text-decoration : none;
background : transparent;
} - .c_content_space就係紫色框框既地方。
.c_content_space{ /* the content */
padding : 5px;
height : 100%;
font-family : lucida grande, verdana, arial, sans-serif;
font-size : 12px;
background-color : #F3F8FC; /*現改為透明 transparent; */border : 1px solid #2E66A5;/*邊框，全行刪除*/
text-align : left;
background: url(http://cheese326.mysinablog.com/resserver.php?resource=60760-tetubou_k11.gif) no-repeat top left; /*這是我後加上去的，就是那倒轉的三個人作背景圖，不重複，位置對齊上方及左方*/
} - 以下是超連結之顏色變化，請自行改變你要的顏色。
.c_content_space a:link
.c_content_space a:visited
.c_content_space a:active
.c_content_space a:hover - #post_index即是 上一篇 | 下一篇 藍色框框。
#post_index{ /* e.g. Previos Page | Next Page */
margin-bottom : 10px;
text-align : center;
font-size : 12px;
} - #post_index a,#post_index a:link,#post_index a:visited,#post_index a:active,#post_index a:hover就係上一篇 | 下一篇既超連結變化，不詳解喇。
- div.post_content即是黃色框框既地方。
div.post_content{ /*the post's content */
padding : 4%;
padding-top : 20px;
color : #333333; /*可改字顏色*/
font : 12px lucida grande, verdana, arial, sans-serif;
overflow : hidden;
margin-bottom : 0px;
width : 90%;
word-wrap : break-word;
overflow : hidden;
line-height : 1.8;
text-align : left;
background-color: white; /*這是我後加上的背景色為白色*/
filter:alpha(opacity=80); /*這是我後加上的，透明度為80%，會顯示為半透明，將.c_content_space的三個人倒轉既背景圖輕輕透出又唔怕遮住d字*/
}
有咩唔明請留言。
～。～。暫。完。～。～
