ASP.NET项目开发指南:界面设计(1)
界面设计( )
样式
有时Web站点需要一个前台界面 这可能相当容易 只要打开常用的编辑器 然后编写一页一页的页面即可 但当突然被告知要修改页面的布局 样式 或者其他基本的UI内容就相当麻烦了 恐怕没有什么比因为颜色或者其他微不足道的原因而让人不得不重新编写页面更糟糕的事情了 为了避免这类维护方面的噩梦发生 用户界面最好要做到易于维护和修改
通常使用级联样式表来划分不同类型的UI元素 如标题 各种表 背景色以及字型 这样将有一个主样式表来帮助提供一致的外观 这些类真正的优点在于任何时候在修改任何用户接口元素时 只需修改CSS文件中的记录项 而不用担心跟踪每一个页面(此页面显示要修改的特定UI元素)
下面给出主样式表源文件ST_GinShopManage css 如程序 所示
程序 ST_GinShopManage css
H {
font family: Verdana Arial;
font size: medium;
}
H {
font family: Verdana Arial;
font size: *** all;
}
/*对BODY内的字体名称 大小和四边的外延边距的设置*/
BODY {
font family: Verdana Arial;
font size: x *** all;
margin: ;
}
/*对表格内的字体名称和大小的设置*/
TABLE {
font family: Verdana Arial;
font size: x *** all;
}
INPUT
{
font size: x *** all;
font family: Verdana Arial;
}
/*对下拉菜单的字体名称和大小的设置*/
SELECT
{
font size: x *** all;
font family: Verdana Arial;
}
/* 以下是对超链接的颜色 状态等的设置*/
a:link {
color: #FF ;
font weight: bold;
text decoration: none;
}
a:active {
color: #FF ;
font weight: bold;
text decoration: none;
}
a:visited {
color: #FF ;
font weight: bold;
text decoration: none;
}
a:hover {
color: #FF ;
font weight: bold;
text decoration: underline;
}
/* 用户自定义样式设置 */
navtable {
background color: # ;
color: #FFFFFF;
font weight: bold;
}
navtext {
color: #FFFFFF;
font weight: bold;
}
navlink:link {
color: silver;
text decoration: none;
}
navlink:active {
color: silver;
text decoration: none;
}
navlink:visited {
color: silver;
text decoration: none;
}
navlink:hover {
color: white;
text decoration: underline;
}
rheader {
background color: # ;
color: white;
font weight: bold;
}
rheadercol {
border color: black;
border style: solid;
border width: ;
}
rheadercoll {
border color: black;
border right: ;
border style: solid;
border width: ;
}
rheadercolr {
border color: black;
border left: ;
border style: solid;
border width: ;
}
rbody {
background color: #FFFFFF;
}
rbodycol {
border color: black;
border style: solid;
border top: ;
border width: ;
}
*** alltext {
COLOR: gray;
FONT FAMILY: Verdana Arial;
FONT SIZE: pt;
LINE HEIGHT: %
}
返回目录 ASP NET项目开发指南
编辑推荐
ASP NET MVC 框架揭秘
ASP NET开发宝典
lishixinzhi/Article/program/net/201311/15994