在刚刚完成的一个系统中,(基于asp.net)要求系统提供多风格,用户可自由选择系统风格.我们通过采用css样式文件替换,简单有效地实现了该项功能.实现步骤如下:
1.定义css样式文件,可命名为style_blue.css等:
2.在每个程序页面(*.aspx)设置相应的css中class
3.用户登陆时取出其设置的风格(值为css文件名,如style_blue)利用session保存
4.进到特定页面,从session取出css风格,在文件头加载相应的css文件(如style_blue.css)
当然,如果需要多种风格就要预制多个css文件.
同那种把页面元素的颜色值写在数据库里,然后再读出来的做法相比较,
优点:
工作量少\不需要与数据库多次打交道(仅进入系统时候读取用户设置的css文件名)
缺点:不能由用户自由设置页面元素的风格.,但由用户自己设置页面元素要求用户有一定的美学基础,此缺点在应用系统中一般可不计.
附录一:css样式文件
a:link,a:active,a:visited{text-decoration:none ;color:#000000}
a:hover{text-decoration: underline;color:#4455aa}.
selecteditem
{
background-color:#8ac8df;
}
body
{
font-family:verdana,sans-serif;font-size: 9pt;background-color: #f6f6f6;
scrollbar-face-color: #dee3e7;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #dee3e7;
scrollbar-3dlight-color: #d1d7dc;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #efefef;
scrollbar-darkshadow-color: #98aab1;
}
.table_table
{
font-family:verdana,sans-serif;
font-size:9pt;
background-color:#4682b4
}
.table_head
{
font-family:verdana,sans-serif;
font-size: 10pt;
background-color: #c1d0e1;
color:#ffffff;
background-image: url(blue.gif);
}
.table_strong
{
font-family:verdana,sans-serif;
font-size: 9pt;
background-color: #4682b4;
color:#ffffff;
font-weight:bold;
}
.table_trline
{
font-family:verdana,sans-serif;
font-size: 9pt;
background-color: #c1d0e1;
height:19pt;
text-align:center;
color:#ffffff;
font-weight:bold;
}
tr
{
font-family:宋体;
font-size: 9pt;
background-color: #f8f8f3;
text-align:center
}
.t{line-height: 1.4}
div
{
font-family:verdana,sans-serif;
font-size: 9pt;
}
form{font-family:verdana,sans-serif; font-size: 8pt}
input{font-size: 9pt; color: #000080; background-color: #efefef}
input.buttonface {font-size: 9pt; color: #000080; background-color: #d2e9ff}
input.dialogbotton {font-size: 9pt; color: rgb(0,0,128); background-color: rgb(255,204,51)}
.submit{font-size: 9pt; color: #000080; background-color: #d2e9ff}
textarea {border-width: 1; border-color: #000000; background-color: #efefef; font-family: 宋体; font-size: 9pt;}
select {border-width: 1; border-color: #000000; background-color: #ffffff; font-family: 宋体; font-size: 9pt; }
option{font-family: 宋体; font-size: 9pt;background-color: #efefef}.menu_button
{
border-bottom: #1864ae 1px solid;
border-left:rgb(233,244,249) 0px solid;
border-right: #1864ae 1px solid;
border-top: #0051e7 0px solid;
cursor: hand;
background-color:#4682b4;
}
.menu
{
font-size:9pt;
background-color:#74a3c9;
}
.navpoint {
cursor: hand; color:white; font-family: webdings;background-color:#4682b4;
}
p{font-family:verdana,sans-serif; font-size: 9pt}
br{font-family:verdana,sans-serif; font-size: 9pt}
附录二:在*.aspx页面中datagrid设置css中的class
<asp:datagrid id="dgrdnet" runat="server" class="table_table" width="100%" enableviewstate="false"
autogeneratecolumns="false" cellpadding="1" cellspacing="1" cssclass="table_table" borderwidth="0px">
<alternatingitemstyle horizontalalign="left" verticalalign="middle"></alternatingitemstyle>
<itemstyle horizontalalign="left" height="30px"></itemstyle>
<headerstyle height="24px" cssclass="table_head"></headerstyle>
<columns>
<asp:boundcolumn datafield="rfq_number" headertext="rfq"></asp:boundcolumn>
<asp:boundcolumn datafield="item_code" headertext="itemcode"></asp:boundcolumn>
<asp:templatecolumn headertext="itemdesc">
<itemtemplate>
<asp:textbox runat="server" text='<%# databinder.eval(container, "dataitem.item_desc") %>' >
</asp:textbox>
</itemtemplate>
<edititemtemplate>
<asp:textbox runat="server" text='<%# databinder.eval(container, "dataitem.item_desc") %>'>
</asp:textbox>
</edititemtemplate>
</columns>
</asp:datagrid>
