CSS 頁面排版解析

2010-08-04

5398
0
CSS

摘要:CSS 頁面排版解析

這是一個網站設計常用的CSS結構解析～～

可以參考這個來設計自己的CSS

CSS是樣式屬性標籤，可以將頁面中的各個部份的字體、圖片做個人化喜好的調整。很方便：）也很有趣。
所有的標籤語法都是以兩個大括號『 {} 』包起來的，括號內的各小屬性以『 ; 』分號隔開。
將CSS部落格的語法中，各屬性標籤各代表什麼的部份歸類。
此篇以wretch版型為主。

html{　;} 　/*設定頁面的HTML語法部分*/

/*整個頁面*/

body { ;} 　/*在此設定整個頁面內的字體大小顏色、滑鼠指標等等。*/

td {　}

img{ border: none;} 　/*img是圖片的意思。設定了此語法，會讓頁面中的圖片外面才沒有框框。*/

br {letter-spacing: 0px;} 　/*br是換行指令，可設定每行中間的間隔。px代表像素。不要太擠才不會看不清楚。依字型的樣式做設定。*/

a {color: #色碼; text-decoration/*字體裝飾*/ ;} 　/*連結的字體顏色、大小效果。*/
a:hover {color: #色碼; cursor: url("滑鼠網址");} 　/*當滑鼠滑過連結時的效果。*/

input,select {　}

#container1 {　;} 　/*為整個頁框的範圍和擺設做設定，本文部份都包括在這裡*/

h3 {　}

/*----------banner----------*/

/*整個表頭範圍，包括部落格名稱和敘述*/

#banner {　;} /　*設定banner部分的位移、寬高、字體顏色、背景等各效果。*/

/*部落格名稱與動態*/
#pageheader h1 {　;}

/*部落格名稱*/
#pageheader h1 a {　;}　 /*部落格的原本顯示顏色*/
#pageheader h1 a:hover {　;} 　/*當滑鼠滑過部落格名稱時顯示的字體效果*/

/*部落格描述*/
.description {　;} 　/*設定敘述部分的位移、寬高、字體顏色、背景等各效果。*/

/*----------main----------*/

/*包括content跟link*/

#main2 {　;} 　/*本文和旁邊連結的部份的大頁面部份，不包括部落格名稱敘述部份。*/

/*內容區塊*/

/*本文部份的字體效果、卷軸顏色和顯示，等等。*/
#content {
SCROLLBAR-FACE-COLOR: #色碼;
SCROLLBAR-HIGHLIGHT-COLOR: #色碼;
SCROLLBAR-SHADOW-COLOR: #色碼;
SCROLLBAR-3DLIGHT-COLOR: #色碼;
SCROLLBAR-TRACK-COLOR: #色碼;
SCROLLBAR-ARROW-COLOR: #色碼;
SCROLLBAR-DARKSHADOW-COLOR: #色碼;
overflow: auto;}　/*--產生捲軸--*/

/*單篇文章，包括文章的內容與下方的回應*/
.blogbody {　;}

/*日期區塊*/
.date {　;}　/*就是每篇文章上方的日期部份*/

/*文章標題*/
.title {　;}　/*每篇文章標題部份的設定*/

/*文章內文*/
.innertext {　;}　/*設定位置，每行大小間距、字體效果等等。*/

/*文章分類*/
.extended {　;}

/*more圖示*/
a.more {　;}　/* "繼續閱讀" 的效果設定，可把文字換成圖片。*/

/*作者資訊，回應，引用，轉寄*/
.posted {　;}
.posted a {　;}
.posted a:hover {　;}
.posted img {　;}
input#trackback_url {　;}

/*----------comment----------*/

/*迴響的按鈕*/
.commentTitle {　;}　/*"迴響"的效果設定，也可把文字換成圖片。*/

/*迴響（迴響文中的內容可分別設定）*/
.comments-body {　;}
.comments-body br {　;}
.comments-post {　;}
.comments-post img {　;}
.comments-head {　;}

/*----------links----------*/
#links { overflow: auto; /*看要不要顯示捲軸*/
SCROLLBAR-FACE-COLOR: #色碼;
SCROLLBAR-HIGHLIGHT-COLOR: #色碼;
SCROLLBAR-SHADOW-COLOR: #色碼;
SCROLLBAR-3DLIGHT-COLOR: #色碼;
SCROLLBAR-TRACK-COLOR: #色碼;
SCROLLBAR-ARROW-COLOR: #色碼;
SCROLLBAR-DARKSHADOW-COLOR: #色碼;}
#links br {　;}
#links img {　;}

.side {　;}　/*連結部份都叫做side*/
.sidetitle {　;}　/*sidetitle顧名思義就是每個side的標題*/
.sidetitle a {　;}

/*---side裡面的字體顏色，修改顏色值。
.Sidebody a:link{color : #色碼 ;text-decoration : none;}　/*連結樣式*/
.Sidebody a:hover{color : #色碼 ;text-decoration : none;font-weight:bold;}　/*當滑鼠滑過連結時的效果*/
.Sidebody a:visited{color : #色碼 ;text-decoration : none;}　/*訪問過的連結*/
.Sidebody a:active{color : #色碼 ;text-decoration : none;}　/*當滑鼠正點在連結上面時的效果*/
---*/

/*這部份還在研究XD*/
.boxNewComment1 .side {　;}
.boxNewComment1 .side a {　;}
.boxNewComment1 img {　;}
.boxCounter1 .side {　;}

/*日曆*/
span.calendar a {　;} 　/*我是這樣設定的，可設定日曆中有寫日記那天的日期所顯現的字體顏色、大小、粗細等等。*/

span.calendar a:hover {　;} 　/*滑鼠滑過有日記的日期的效果，還可改變數字後的背景圖：）*/

/*登入*/
.powered {padding: 10px 0px 0px 10px;}
.powered img {display: none;}

網頁設計 -->找網站銀行

好站推薦：網頁設計除臭襪

回首頁