線上書籍

Home

[1001]XOOPS網站門面專業設計

一、表格
  1. 取消隔線間隔:border-collapse: collapse;
  2. table和td或th需分別設定border。
二、基本清單
  1. 樣式:list-style-type: decimal-leading-zero(補零數字) , none(不要符號)
  2. 位置:list-style-position:inside , outside(預設)
  3. 圖片:list-style-image:url(圖片位置);
  4. 集合寫法list-style: 樣式 位置 圖片;
三、變形清單(選單、相簿...等)
  1. 浮動:float:left , right; ←必要
  2. 溢出處理:overflow:visible(預設) , hidden(隱藏) , scroll(捲軸) , auto(自動)
  3. 滑鼠:cursor: pointer;
  4. 配合 border , margin , padding , text-align , vertical-align 一起用,效果更佳
  5. 最後記得用clear:both來清除浮動
四、段落
  1. 首行縮排:text-indent: 24px (亦可用%)
  2. 大小寫:text-transform: capitalize (首字大寫) , uppercase(全部大寫) ,lowercase(全部小寫)
  3. 擬元件(Pseudo-elements)建立一個抽象的網頁元件,例如「段落第一行」或者「段落第一個字」,而且也提供另一個方法來套用樣式到一個不存在的內容。(:before 及 :after)。
    • (1) :first-letter 設定目標第一個字的樣式
    • (2) :first-line 設定目標第一列字的樣式
  4. 例如:p:first-letter { font-size:20px}
五、超連結
  1. 文字裝飾:text-decoration: none(取消任何線), overline(頭頂線) , linethrough(刪除線) , underline(底線) , blink (閃動,僅Firefox支援)
  2. 擬類別(Pseudo-classes)通常是動態的,也就是和使用者的操作互動有關的的一個狀態,例如滑鼠移過(:hover)這類的狀態。
    • (1) :active 滑鼠點下該元件的瞬間
    • (2) :hover 滑鼠移到該元件上
    • (3) :link 尚未瀏覽過的超鏈結
    • (4) :visited 已經瀏覽過其內容的超鏈
  3. 想想看,這是怎麼做的?

 參考資源1:http://www.w3schools.com/css/pr_list-style-type.asp

 參考資源2:http://www.w3school.com.cn/css/css_reference.asp