| 導購 | 订阅 | 在线投稿
分享
 
 
 

網頁切圖、css命名規則

2008-08-15 05:15:01  編輯來源:互聯網  简体版  手機版  評論  字體: ||
 
  頭: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
 
頭: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
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
  免責聲明:本文僅代表作者個人觀點,與王朝網絡無關。王朝網絡登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
© 2005- 王朝網路 版權所有