[TOC] ## 一些注意 1. 頁面編碼規范 1.1. 統一使用 UTF-8 編碼,用@charset "utf-8"指定頁面編碼。 1.2. 全局字體設置： windows 7系統：微軟雅黑 Arial； windows XP及以下：新宋體，宋體，Arial MAC默認字體：Helvetica Neue和Helvetica Hiragino Sans GB。 font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53"; 1.3. 中文字體使用編碼轉換，請參閱下節“中文字體css編碼轉換” 1.4. 推薦使用216web安全色 2. 屬性寫在一行內，屬性之間、屬性名和值之間以及屬性與“{}”之間應減少空格，去掉最后一個“;”，例如：.class{width:200px;height:100px} 3. 屬性的書寫順序： 3.1. 按照元素模型由外及內，由整體到細節書寫，大致分為五組： 位置：position,left,right,float 盒模型屬性：display,margin,padding,width,height 邊框與背景：border,background 段落與文本：line-height,text-indent,font,color,text-decoration,... 其他屬性：overflow,cursor,visibility,... 3.2. 針對特殊瀏覽器的屬性，應寫在標準屬性之前，例如：-webkit-box-shadow:;-moz-box-shadow:;box-shaow:; 4. 帶有前綴的屬性，單獨一行，通過縮進，讓每個屬性的值垂直對齊，方便編輯維護。 5. 謹慎添加新的選擇符規則，尤其不可濫用 id，盡可能繼承和復用已有樣式 6. 選擇符、屬性、值均用小寫（格式的顏色值除外），縮寫的選擇符名稱須說明縮寫前的全稱，例如 .cl -> Clearfix 7. 避免使用各種CSS Hack，如需對 IE 進行特殊定義，請參閱下節“關于 CSS Hack 的說明” 8. 勿使用冗余低效的 CSS 寫法，例如：ul li a span{... } 9. 慎用 !important 10. 建議使用具有語義化的classname或id，請參閱下節“css命名規范”。 11.避免使用兼容性不好的使用濾鏡 12.開發過程中的未定事項，須用 [!] 標出，以便于后續討論整理。 13.注釋格式，統一使用雙斜杠加*。 14.上下模塊之間的間距統一使用下一個模塊的margin-top來實現，好處是：如果沒有下一個模塊也不會多出一段空隙。 15.hover，selected，disabled，current等具有特定意義的請勿直接占用。 16.:link :visited :hover :active書寫順序 L-V-H-A，速記：LoVe（喜歡）HAte（討厭）。 17.不要使用 @import ## 中文字體css編碼轉換 ~~~ 微軟雅黑 \5FAE\8F6F\96C5\9ED1 或 Microsoft YaHei 黑體 \9ED1\4F53 新宋體 \65b0\5b8b\4f53 宋體 \5b8b\4f53 ~~~ **命名** ~~~ 1. 內容優先,表現為輔 2. css命名中英文對照 current 當前 hover 懸停 selected 挑選 disabled 禁用 focus 得到焦點 blur 失去焦點 checked 勾選 success 成功 error 出錯 header(hd) 頭部 content(cnt) 內容 title(tit) 標題 item 項目（條） cell 單元 image/pic(img) 圖片 text(txt) 文字 top 頂部 scrubber 時序菜單 nav 導航 mainbav 主導航 subnav 子導航 topnav 頂部導航 breadcrumb 面包屑導航 flink 友情鏈接 footer 尾 copyright 版權 menu 菜單 submenu 子菜單 dropdown 下拉菜單 searchBar 搜索條 search 搜索條 searchTxt 搜索框 searchBtn 搜索按鈕 search_key 搜索詞 member 會員 ucenter 用戶中心 loginBar 登陸條 login 登錄 loginBtn 登錄按鈕 regsiter 注冊按鈕 btn-regsiter注冊按鈕 name 用戶名 password 密碼 nickname 昵稱 mobilephone/mobile 手機 telephone/tel 電話 defaultavatar 默認頭像 hot 熱點 news 新聞 banner/AD 廣告 download 下載 content 內容 title 標題 summary 摘要 time 時間 share 分享 digg 頂 like 喜歡 list 列表 pList 圖片列表 tList 文字列表 tpList 圖文列表 table 表格 row 行 column 列 gutter 間隔 viewport 視口 tab 標簽 tags 標簽 scroll 滾動 sidebar 側邊欄 column 欄目 section 區塊 msg 提示信息 status 狀態 vote 投票 tips 小技巧 guild 指南 note 注釋 icon- 圖標 btn- 按鈕 goods 商品 goodsList 商品列表 goodsDetail 商品詳情 goodsInfo 商品信息 tuan 團購 tuanList 團購列表 tuanDetail 團購詳情 tuanInfo 團購信息 transition 動畫 shadow 陰影 fade 淡入淡出 flip 翻頁效 slide 滑動 slideup 上滑動 slidedown 下滑動 turn 翻頁 horizontal 水平 vertical 垂直 collapsible 折疊 corners 拐角 flow 流 reverse 反向 pop 彈窗 count 總數/計數 plus 加號/正 minus 減號/負 controlgroup 控制組 ~~~ ## 頁面命名 ~~~ default/index.html 首頁 404.html 404錯誤頁 print.html 打印頁 header.html 頁頭 footer.html 頁腳 sitemap.html 網站地圖 passport.html 通行證 rank.html 排行榜 roll.html 滾動新聞 solution.html 解決方案 joinus.html 加入我們 partner.html 合作伙伴 service.html 服務 aboutus.html 關于我們 contact.html 聯系我們 company.html 公司介紹 organization.html 組織結構 culture.html 企業文化 strategy.html 發展策略 honor.html 公司榮譽 aptitudes.html 企業資質 events.html 大事記 business.html 商務合作 contract.html 服務條款 privacy.html 隱私聲明 CSR.html 企業社會責任 news-開頭.html 新聞相關 article-開頭.html 資訊相關 picture-開頭.html 圖片相關 photo-開頭.html 相冊相關 product-開頭.html 產品相關 goods-開頭.html 商品相關 system-開頭.html 系統相關 tag-開頭.html tag相關 brand-開頭.html 品牌相關 help-開頭.html 幫助相關 member-開頭.html 會員相關 search-開頭.html 搜索相關 ~~~ ## 文件命名 ~~~ admin 后臺管理 app 應用 article 資訊 common 公共 config 配置 data 數據 digg 頂 en-us 英文 extend 延伸 install 安裝 Lang 語言包 Lib 庫 mall 商城 picture 組圖 product 商品 search 搜索 section 區塊 shop 商店 static 靜態 system 系統 templates 模版 tuan 團購 ucenter 用戶中心 upload 上傳 video 視頻 vote 投票 zh_tw 繁體中文 zh-cn 簡體中文 ~~~ ## HTTP 狀態消息 當瀏覽器從 web 服務器請求服務時，可能會發生錯誤。 從而有可能會返回下面的一系列狀態消息： ### 1xx: 信息 100 Continue 服務器僅接收到部分請求，但是一旦服務器并沒有拒絕該請求，客戶端應該繼續發送其余的請求。 101 Switching Protocols 服務器轉換協議：服務器將遵從客戶的請求轉換到另外一種協議。 ### 2xx: 成功 200 OK 請求成功（其后是對GET和POST請求的應答文檔。） 201 Created 請求被創建完成，同時新的資源被創建。 202 Accepted 供處理的請求已被接受，但是處理未完成。 203 Non-authoritative Information 文檔已經正常地返回，但一些應答頭可能不正確，因為使用的是文檔的拷貝。 204 No Content 沒有新文檔。瀏覽器應該繼續顯示原來的文檔。如果用戶定期地刷新頁面，而Servlet可以確定用戶文檔足夠新，這個狀態代碼是很有用的。 205 Reset Content 沒有新文檔。但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容。 206 Partial Content 客戶發送了一個帶有Range頭的GET請求，服務器完成了它。 ### 3xx: 重定向 300 Multiple Choices 多重選擇。鏈接列表。用戶可以選擇某鏈接到達目的地。最多允許五個地址。 301 Moved Permanently 所請求的頁面已經轉移至新的url。 302 Found 所請求的頁面已經臨時轉移至新的url。 303 See Other 所請求的頁面可在別的url下被找到。 304 Not Modified 未按預期修改文檔。客戶端有緩沖的文檔并發出了一個條件性的請求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務器告訴客戶，原來緩沖的文檔還可以繼續使用。 305 Use Proxy 客戶請求的文檔應該通過Location頭所指明的代理服務器提取。 306 Unused 此代碼被用于前一版本。目前已不再使用，但是代碼依然被保留。 307 Temporary Redirect 被請求的頁面已經臨時移至新的url。 ### 4xx: 客戶端錯誤 400 Bad Request 服務器未能理解請求。 401 Unauthorized 被請求的頁面需要用戶名和密碼。 402 Payment Required 此代碼尚無法使用。 403 Forbidden 對被請求頁面的訪問被禁止。 404 Not Found 服務器無法找到被請求的頁面。 405 Method Not Allowed 請求中指定的方法不被允許。 406 Not Acceptable 服務器生成的響應無法被客戶端所接受。 407 Proxy Authentication Required 用戶必須首先使用代理服務器進行驗證，這樣請求才會被處理。 408 Request Timeout 請求超出了服務器的等待時間。 409 Conflict 由于沖突，請求無法被完成。 410 Gone 被請求的頁面不可用。 411 Length Required "Content-Length" 未被定義。如果無此內容，服務器不會接受請求。 412 Precondition Failed 請求中的前提條件被服務器評估為失敗。 413 Request Entity Too Large 由于所請求的實體的太大，服務器不會接受請求。 414 Request-url Too Long 由于url太長，服務器不會接受請求。當post請求被轉換為帶有很長的查詢信息的get請求時，就會發生這種情況。 415 Unsupported Media Type 由于媒介類型不被支持，服務器不會接受請求。 416 服務器不能滿足客戶在請求中指定的Range頭。 417 Expectation Failed ### 5xx: 服務器錯誤 500 Internal Server Error 請求未完成。服務器遇到不可預知的情況。 501 Not Implemented 請求未完成。服務器不支持所請求的功能。 502 Bad Gateway 請求未完成。服務器從上游服務器收到一個無效的響應。 503 Service Unavailable 請求未完成。服務器臨時過載或當機。 504 Gateway Timeout 網關超時。 505 HTTP Version Not Supported 服務器不支持請求中指明的HTTP協議版本。