界面设计（）
样式
有时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开发培训视频教程
