界面設計（）
樣式
有時Web站點需要一個前台界面這可能相當容易只要打開常用的編輯器然後編寫一頁一頁的頁面即可但當突然被告知要修改頁面的布局樣式或者其他基本的UI內容就相當麻煩了恐怕沒有什麼比因為顏色或者其他微不足道的原因而讓人不得不重新編寫頁面更糟糕的事情了為了避免這類維護方面的噩夢發生用戶界面最好要做到易於維護和修改
通常使用級聯樣式表來劃分不同類型的UI元素如標題各種表背景色以及字型這樣將有一個主樣式表來幫助提供一致的外觀這些類真正的優點在於任何時候在修改任何用戶接口元素時只需修改CSS文件中的記錄項而不用擔心跟蹤每一個頁面（此頁面顯示要修改的特定UI元素）
下面給出主樣式表源文件ST_GinShopManagecss如程序所示
程序 ST_GinShopManagecss
H {
fontfamily: Verdana Arial;
fontsize: medium;
}
H {
fontfamily: Verdana Arial;
fontsize: small;
}
/*對BODY內的字體名稱大小和四邊的外延邊距的設置*/
BODY {
fontfamily: Verdana Arial;
fontsize: xsmall;
margin: ;
}
/*對表格內的字體名稱和大小的設置*/
TABLE {
fontfamily: Verdana Arial;
fontsize: xsmall;
}
INPUT
{
fontsize: xsmall;
fontfamily: Verdana Arial;
}
/*對下拉菜單的字體名稱和大小的設置*/
SELECT
{
fontsize: xsmall;
fontfamily: Verdana Arial;
}
/* 以下是對超鏈接的顏色狀態等的設置*/
a:link {
color: #FF;
fontweight: bold;
textdecoration: none;
}
a:active {
color: #FF;
fontweight: bold;
textdecoration: none;
}
a:visited {
color: #FF;
fontweight: bold;
textdecoration: none;
}
a:hover {
color: #FF;
fontweight: bold;
textdecoration: underline;
}
/* 用戶自定義樣式設置 */
navtable {
backgroundcolor: #;
color: #FFFFFF;
fontweight: bold;
}
navtext {
color: #FFFFFF;
fontweight: bold;
}
navlink:link {
color: silver;
textdecoration: none;
}
navlink:active {
color: silver;
textdecoration: none;
}
navlink:visited {
color: silver;
textdecoration: none;
}
navlink:hover {
color: white;
textdecoration: underline;
}
rheader {
backgroundcolor: #;
color: white;
fontweight: bold;
}
rheadercol {
bordercolor: black;
borderstyle: solid;
borderwidth: ;
}
rheadercoll {
bordercolor: black;
borderright: ;
borderstyle: solid;
borderwidth: ;
}
rheadercolr {
bordercolor: black;
borderleft: ;
borderstyle: solid;
borderwidth: ;
}
rbody {
backgroundcolor: #FFFFFF;
}
rbodycol {
bordercolor: black;
borderstyle: solid;
bordertop: ;
borderwidth: ;
}
smalltext {
COLOR: gray;
FONTFAMILY: Verdana Arial;
FONTSIZE: pt;
LINEHEIGHT: %
}
返回目錄ASPNET項目開發指南
編輯推薦
ASPNET MVC 框架揭秘
ASPNET開發寶典
ASP NET開發培訓視頻教程
From:http://tw.wingwit.com/Article/program/net/201311/15994.html
