WEB界面開發規范
頁面命名規則
1. 每個功能頁面在系統中配置菜單時統一使用index.jsp或index.html
2. 每個頁面的title必須設置為和菜單配置中相同的中文
3. 對于JSP頁面都需要在頁面的最開始部分增加以下語句 <%@ page contentType="text/html;
charset=UTF-8" %>
4. 對于HTML頁面都需要在頁面的最開始部分增加以下語句
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5. 對于頁面中控件的屬性設置都需要用雙引號包括起來。
控件命名規則
頁面編碼過程中用到的所有控件命名都需要遵循相應規則,方便程序的可讀性。采用控件類型縮寫前綴(小寫)+英文單詞(第一個字母大寫)的方法來命名每一個控件。具體規則如下:
控件名稱 |
前綴
| </tr>
Button |
btn |
Form |
frm |
Select |
sel |
TextArea |
txt |
Input |
ipt |
Image |
img |
DIV |
div |
</tbody>
</table>
變量定義規則
頁面編碼過程中用到的所有變量定義都需要遵循相應規則,方便程序的可讀性。采用數據類型縮寫前綴(小寫)+英文單詞(第一個字母大寫)的方法來命名每一個變量。具體規則如下:
數據類型 |
前綴 | </tr>
整數 |
i
|
小數 |
f |
字符 |
s |
布爾 |
b |
日期 |
d |
數組 |
arr |
</tbody>
</table>
函數定義規則
頁面編碼過程中用到的所有函數定義都需要遵循相應規則,方便程序的可讀性。采用前綴(fuc)+英文單詞(第一個字母大寫)的方法來命名每一個函數。
CSS文件使用
n 頁面的規范
關鍵字 |
說明 | </tr>
body |
頁面內容基本樣式 |
</tbody>
</table>
n 表格的規范
關鍵字 |
說明 | </tr>
table |
表格基本樣式 |
</tbody>
</table>
n 層的規范
關鍵字 |
說明 | </tr>
div |
層基本樣式 |
</tbody>
</table>
n 鏈接的規范
關鍵字 |
說明 | </tr>
a |
超鏈接基本樣式 |
</tbody>
</table>
n DataGrid的規范
關鍵字 |
說明 | </tr>
table.datatable |
數據表的基本樣式 |
table.datatable thead |
數據表的頁眉樣式 |
table.datatable tbody |
數據表的表格體樣式 |
table.datatable tfoot |
數據表的頁腳樣式 |
table.datatable tr.row_odd |
數據表的奇數行樣式 |
table.datatable tr.row_even |
數據表的偶數樣式 |
table.datatable tr.row_selected |
數據表的選中行樣式 |
table.datatable tr.row_active |
數據表的當前激活表格的選中行樣式 |
table.datatable td.indicate |
數據表的指示器樣式 |
</tbody>
</table>
n 下拉表格的規范
關鍵字 |
說明 | </tr>
table.dropdowntable |
下拉表格的基本樣式 |
table.dropdowntable thead |
下拉表格的頁眉樣式 |
table.dropdowntable tbody |
下拉表格的表格體樣式 |
table.dropdowntable tfoot |
下拉表格的頁腳樣式 |
table.dropdowntable tr.row_odd |
下拉表格的奇數行樣式 |
table.dropdowntable tr.row_even |
下拉表格的偶數行樣式 |
table.dropdowntable tr.row_selected |
下拉表格的選中行樣式 |
</tbody>
</table>
n 編輯框
關鍵字 |
說明 | </tr>
.editor |
編輯框的基本樣式 |
.editor_active |
激活的編輯框的基本樣式 |
</tbody>
</table>
n 按鈕
關鍵字 |
說明 | </tr>
.button |
按鈕的基本樣式 |
.button_down |
被按下按鈕的基本樣式 |
</tbody>
</table>
n 數據導航條控件
關鍵字 |
說明 | </tr>
table.datapilot |
數據導航條的基本樣式 |
</tbody>
</table>
n 樹狀列表控件
關鍵字 |
說明 | </tr>
table.tree |
樹狀列表的基本樣式 |
table.tree tr.row_odd |
樹狀列表奇數行的基本樣式 |
table.tree tr.row_even |
樹狀列表偶數行的基本樣式 |
table.tree tr.row_selected |
樹狀列表當前行的基本樣式 |
table.tree tr.row_rightclick |
樹狀列表的響應當前鼠標右擊的行基本樣式 |
table.tree .expandbutton |
樹狀列表展開按鈕的基本樣式 |
table.tree .icon |
樹狀列表的圖標樣式 |
</tbody>
</table>
n 字段標題控件
關鍵字 |
說明 | </tr>
.fieldlabel |
字段標題的樣式 |
</tbody>
</table>
n 數據標簽控件
關鍵字 |
說明 | </tr>
.datalabel |
數據標簽的基本樣式 |
</tbody>
</table>
n 標簽頁控件
關鍵字 |
說明 | </tr>
.tabset |
標簽頁的基本樣式 |
.tab |
標簽頁中的單個標簽的樣式 |
</tbody>
</table>
n 菜單控件
關鍵字 |
說明 | </tr>
table.menu |
菜單的基本樣式 |
table.menu tr |
菜單行的基本樣式 |
table.menu tr.row_selected |
菜單選中行的基本樣式 |
table.menu tr.row_disabled |
菜單無效行的基本樣式 |
</tbody>
</table>
n 菜單工具條控件
關鍵字 |
說明 | </tr>
table.menubar |
菜單工具條的基本樣式 |
table.menubar .button |
菜單工具條中按鈕的基本樣式 |
table.menubar .button_active |
菜單工具條中當前按鈕的基本樣式 |
table.menubar .button_hot |
菜單工具條相應鼠標的按鈕的基本樣式 |
</tbody>
</table>
n 下拉選單的邊框控件
關鍵字
|
說明 | </tr>
.dropdown_frame |
下拉選單的邊框的樣式 |
</tbody>
</table>
n 日歷控件
關鍵字 |
說明 |
.calendar |
日歷控件的基本樣式 |
.calendar .title |
日歷控件頁眉的基本樣式 |
.calendar .footer |
日歷控件頁腳的基本樣式 |
.calendar .cell_day |
日歷控件日期單元格的基本樣式 |
.calendar .cell_selected |
日歷控件當前單元格的基本樣式 |
.calendar .cell_trailing |
日歷中前月和后月的日期單元格的基本樣式 |
本文由用戶
jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!
sesese色