項目技術經驗總結二:系統多風格的實現

來源:互聯網
上載者:User
項目|項目 在剛剛完成的一個系統中,(基於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>



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。