TShopping

 找回密碼
 註冊
搜索
查看: 1832|回復: 1
打印 上一主題 下一主題

[教學] 常用的CSS命名規則

  [複製鏈接]
跳轉到指定樓層
1#
發表於 2011-1-26 13:08:15 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
 
Push to Facebook
(一)常用的寫法:  
         頭:header
     內容:content/container   
        尾:footer
  導航:nav
  側欄:sidebar
  欄目:column
  頁面外圍控制整體布局寬度:wrapper
  左右中:left right center
  登錄條:loginbar
  標志:logo
  廣告:banner
  頁面主體:main   
        熱點:hot
  新聞:news
  下載:download   
        子導航:subnav
  菜單:menu
  子菜單:submenu
  搜索:search
  友情鏈接:friendlink
  頁腳:footer
  版權:copyright
  滾動:scroll
  內容:content
  標簽頁:tab
  文章列表:list
  提示信息:msg
  小技巧:tips
  欄目標題:title
  加入:joinus
  指南:guild
  服務:service   
        注冊:regsiter
  狀態:status
  投票:vote   
        合作伙伴:partner

(二)注釋的寫法:   
        /* Footer */
  內容區
  /* End Footer */

(三)id的命名:

(1)頁面結構  
         容器 : container
  頁頭:header
  內容:content/container
  頁面主體:main
  頁尾:footer   
        導航:nav
  側欄:sidebar
  欄目:column
  頁面外圍控制整體布局寬度:wrapper
  左右中:left right center   

(2)導航   
         導航:nav
  主導航:mainbav
  子導航:subnav
  頂導航:topnav
  邊導航:sidebar
  左導航:leftsidebar
  右導航:rightsidebar
  菜單:menu
  子菜單:submenu
  標題: title
  摘要: summary

(3)功能   
         標誌:logo
  廣告:banner
  登陸:login
  登錄條:loginbar
  注冊:regsiter
  搜索:search
  功能區:shop
  標題:title
  加入:joinus
  狀態:status
  按鈕:btn   
        滾動:scroll
  標簽頁:tab
  文章列表:list
  提示信息:msg
  當前的: current   
        小技巧:tips
  圖標: icon
  注釋:note
  指南:guild
  服務:service   
        熱點:hot
  新聞:news
  下載:download
  投票:vote
  合作伙伴:partner
  友情鏈接:link
  版權:copyright   

(四)class的命名:

(1)顏色:使用顏色的名稱或者16進制代碼,如
  .red { color: red; }
  .f60 { color: #f60; }
  .ff8600 { color: #ff8600; }

(2)字體大小,直接使用\"font 字體大小\"作為名稱,如   .font12px { font-size: 12px; }
  .font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目標的英文名稱,如
  .left { float:left; }
  .bottom { float:bottom; }

(4)標題欄樣式,使用"類別 功能"的方式命名,如
        .barnews { }
     .barproduct { }
  

       注重事項::
  1.一律小寫;
  2.盡量用英文;
  3.不加中杠和下劃線;
  4.盡量不縮寫,除非一看就明白的單詞.  

-------------------------------------------------------------------------------
主要的 master.css
模塊 module.css
基本共用 base.css
布局,版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css   
表單 forms.css
補丁 mend.css
打印 print.css

 

臉書網友討論
2#
發表於 2012-9-2 11:36:26 | 只看該作者
经验啊... 向楼主学习

版主招募中

*滑块验证:
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2024-4-24 19:09 , Processed in 0.074345 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表