團隊日誌：
https://blog.csdn.net/Seb_Veeeettle/article/details/105749143
個人工作
- 版塊頁面的設計
- 優化用戶交互界面
心得體會
這個項目之前css以及html的命名都缺乏系統性了，十分的不規範；目前這個項目進行大修改不是很現實了，之後我覺得可以有以下借鑑：
在任何一個項目或者系統開發之前都需要定製一個開發約定和規則，這樣有利於項目的整體風格統一、代碼維護和擴展。由於Web項目開發的分散性、獨立性、整合的交互性等，所以定製一套完整的約定和規則顯得尤爲重要。
第一節 CSS樣式文件的命名
建立樣式表文件時，分類編寫樣式到下列樣式表文件中，並統一放在【CSS】文件夾裏：
| 主要 | main.css |
| 文字樣式 | font.css |
| 表格 | table.css |
| 主題 | themes.css |
| 打印 | print.css |
| 補丁 | mend.css |
項目初期，會把不同類別的樣式放於不同的CSS文件，是爲了CSS編寫和調試的方便，在項目後期會爲了網站性能上的考慮會整合不同的CSS文件到一個CSS文件，必要時可壓縮
第二節 CSS選擇符的命名
所有選擇符必須有小寫英文字母或“_”下劃線組成，樣式名必須是表示該樣式的大概含義（禁止出現如Div1、div2、Style1……），參考後面的“樣式命名參考”。對CSS選擇器的使用只允許派生選擇器、類選擇器和屬性選擇器，以及它們的組合使用，嚴禁使用ID選擇器（ID是用於JavaScript的編寫）。
如：li span {…}td.fancy {…}input[type="text"]{…}
當定義的樣式名比較複雜時用下劃線把層次分開，比如：dcrm_logo{ …} dcrm_logo_ico{…}
第三節 圖片的命名與書寫
圖片的命名原則小寫英文字母名稱放在頭尾兩部分，用“_”下劃線隔開，頭部表示此圖片的大類性質例如廣告、標誌、菜單、按鈕等等；尾部表示圖片的概念。設計人員在PS中保存圖片時，請使用“文件”à“存儲爲Web和設備所用的格式”。
第四節 CSS註釋書寫規範
4.1 提示和標籤信息註釋
這是註釋最常用的途徑，可以爲自己或其他開發人員留下提示信息可以避免後期引起的不必要的困惑和麻煩。這種應用簡潔性最爲重要。
.search{
border:1px solid #fff; /Border Color/ }
注意：註釋內容和前面樣式語句間有3個空格，後面1個空格
4.2 修改樣式註釋（時間和相關人員）
/*__Styles Updated: Thu 4.8.08 @ 5:15 p.m. Author: hour
---------------------------------------------------------*/
第五節 CSS佈局編碼標準和建議
5.1 建立樣式表索引
樣式表頭部索引定義可以幫助你和其它人弄清楚該樣式表文件的相關信息，它一般是一段格式化的CSS註釋文本寫在 main.css中。給出該CSS文件作者的相關信息；定義站點的佈局，記錄文件版本號（利於多作者協作及將來更新）
/*---------------------------------------------------------------------------------------------
*Filename: main.css
*Description: Global CSS
*Version: 1.0.0(2009-12-28)YYYY-MM-DD
*Website: http://www.testsoft.com
=STRUCTURE:================================== == ==== =====
*Page width: 980px
*Number of columns: 2
--------------------------------------------------------------------------------------------*/
5.2 命名錨點 的使用
命名錨點是用來規劃整個CSS文件結構的（就好像書籤一樣），從而使整個CSS文件獲得良好的組織。命名錨點一般也是書寫在樣式表頭部的索引註釋中。CSS本身沒有內部的錨點系統，所以我一般採用下面的小技巧來完成。在頭部索引拷貝你想找到的錨點，並在整個文檔中查找，從而獲取該CSS節。
*==STRUCTURE:===============================================
$__header Header Definitions
$__menu Global Site
$__content Everything within the content
-----------------------------------------------------------------------------------------------*/
/*__header
-----------------------------------------------------------------------------------------------*/
{...Header CSS Definitions...}
/*__menu
----------------------------------------------------------------------------------------------*/
{...Header CSS Definitions...}
5.3 建立良好的CSS編碼順序
最後定義的 CSS 樣式將會覆蓋在其之前定義的所有已經存在、或與之衝突的樣式，比如下面這個例子：
p { color: red; background: yellow;}
p { color: green;}
以上的段落最終將呈現綠色的字體，並帶有黃色的背景，這是因爲最後定義的 color:green 將之前定義的 red 覆蓋掉了，至於黃色背景爲何沒有消失，那是因爲第二個 p 的定義中並沒有與之衝突的定義，因此它還是有效的。
5.4 合適的縮寫
在CSS中經常會利用縮寫把多個相同類型的屬性定義指定爲一個。CSS縮寫會使CSS文檔更加乾淨、簡潔；縮寫語法參考相關章節。
5.5 CSS圖像拼合(即CSS Sprites技術)
CSS Sprites技術：將用到的所有小圖片（圖標）合併爲一張圖片，使用css背景屬性，來控制圖片的顯示位置和方式。CSS Sprites技術的應用可以大大減少HTTP請求的次數，減輕服務器壓力，同時縮短了懸停加載圖片所需要的時間延遲，使效果更流暢，不會停頓。
5.6 CSS組合和嵌套
CSS組合
你不必重複有相同屬性的多個選擇符，你只要用英文逗號（,）隔開選擇符就可以了。
h2 { color: red; }
.w3cbbs { color: red; }
.w3cbbs_52css { color: red; }
則你可以這樣寫h2,.w3cbbs,.w3cbbs_52css { color: red; }
CSS嵌套
CSS結構好的話，沒有必要使用過多的類或者標識選擇符。這是因爲你可以指定在選擇符內的選擇符。
.top { padding: 1em;}
.top h1 { color: #ff0; }
.top p { color: red; font-weight: bold; }
常用CSS選擇符命名參考
