62,046
社区成员
发帖
与我相关
我的任务
分享关于修改网页风格的问题，希望各位大神给些意见和建议
现在正做一项目。提供四种样式供用户选择使用。
就像空间一个，随用户喜欢，可以更换自己喜欢的样式风格。
自己的想法：先将这四种样式，称为style（样式内还有样式，也就每个字段又可以映射出多个样式，就叫子样式吧，不大会形容呀）以html的形式，存到数据库中。用户根据自己喜欢的样式，选择子样式后，存到style表中（都是源码），然后再从数据库中调用出来，应用到用户页面。
大概思路是这样，不知道正不正确。
样式表大概这样：
总样式表----------字段样式表----------元素样式 & 字体大小
style表-----------color表---------------红色 & 中号
大致是这样。如果这样可以，想知道，从数据库中读出数据后，怎么应用到前台。像下面的代码
源码从数据库中取出后存在后台的的一变量 str 中，如何放在下面<body></body>中或表格的<td></td>中</table>
分数不多了，求各位指点点
就像空间一个，随用户喜欢，可以更换自己喜欢的样式风格。
自己的想法：先将这四种样式，称为style（样式内还有样式，也就每个字段又可以映射出多个样式，就叫子样式吧，不大会形容呀）以html的形式，存到数据库中。用户根据自己喜欢的样式，选择子样式后，存到style表中（都是源码），然后再从数据库中调用出来，应用到用户页面。
大概思路是这样，不知道正不正确。
样式表大概这样：
总样式表----------字段样式表----------元素样式 & 字体大小
style表-----------color表---------------红色 & 中号
大致是这样。如果这样可以，想知道，从数据库中读出数据后，怎么应用到前台。像下面的代码
源码从数据库中取出后存在后台的的一变量 str 中，如何放在下面<body></body>中或表格的<td></td>中</table>
分数不多了，求各位指点点
...全文
请发表友善的回复…
发表回复
心灵彩虹 2012-11-13
- 打赏
- 举报
http://www.88web.org/
国外精美css模板大全
http://www.cnblogs.com/chuanbo8/archive/2009/05/12/1454830.html
shoon0312 2012-11-12
- 打赏
- 举报
虽然知道是套模版，但自动将固定的动态数据运用到模版里，这里就不是很清楚
shoon0312 2012-11-12
- 打赏
- 举报
能发几个链接我看一下吗，我是做后台的，在套用模版后，用户还可以根据自己喜欢，更改页面字体等样式。
心灵彩虹 2012-11-12
- 打赏
- 举报
http://www.360doc.com/content/11/0804/17/4553438_138057723.shtml
心灵彩虹 2012-11-12
- 打赏
- 举报
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>
附录三:加载css文件处理代码(c#):
protected override void Render(HtmlTextWriter writer)
{
//输出Header的HTML
writer.WriteLine("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" >");
writer.WriteLine("<html>");
writer.WriteLine("<head>");
writer.WriteLine("<title>{0}</title>",Title == null ? "Page":Title);
writer.WriteLine("<META http-equiv=‘’Content-Type‘’ content=\"text/html; charset=gb2312\">");
writer.WriteLine("<META content=\"Huawei RQS\" name=‘’keywords‘’>");
if(UserInfo!=null)
writer.WriteLine("<link href=\"{0}/style_" + UserInfo.Style + ".css\" type=‘’text/css‘’ rel=‘’stylesheet‘’>",CssPath);
else
writer.WriteLine("<link href=\"{0}/style_" + pageStyle.ToString() + ".css\" type=‘’text/css‘’ rel=‘’stylesheet‘’>",CssPath);
for(int idx=0;idx<styles.Count;idx++)
writer.WriteLine("<link href=\"{0}/{1}\" type=‘’text/css‘’ rel=‘’STYLESHEET‘’>",CssPath,styles[idx]);
for(int idx=0;idx<scripts.Count;++idx)
writer.WriteLine("<script language=\"JavaScript\" src=‘’" + ScriptsPath + "/{0}‘’></script>",this.scripts[idx]);
writer.WriteLine("</head>");
if(OnBodyRender!=null) OnBodyRender(this,EventArgs.Empty);
base.Render (writer);
writer.WriteLine("</html>");
}
心灵彩虹 2012-11-12
- 打赏
- 举报
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>
附录三:加载css文件处理代码(c#):
protected override void Render(HtmlTextWriter writer)
{
//输出Header的HTML
writer.WriteLine("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" >");
writer.WriteLine("<html>");
writer.WriteLine("<head>");
writer.WriteLine("<title>{0}</title>",Title == null ? "Page":Title);
writer.WriteLine("<META http-equiv=‘’Content-Type‘’ content=\"text/html; charset=gb2312\">");
writer.WriteLine("<META content=\"Huawei RQS\" name=‘’keywords‘’>");
if(UserInfo!=null)
writer.WriteLine("<link href=\"{0}/style_" + UserInfo.Style + ".css\" type=‘’text/css‘’ rel=‘’stylesheet‘’>",CssPath);
else
writer.WriteLine("<link href=\"{0}/style_" + pageStyle.ToString() + ".css\" type=‘’text/css‘’ rel=‘’stylesheet‘’>",CssPath);
for(int idx=0;idx<styles.Count;idx++)
writer.WriteLine("<link href=\"{0}/{1}\" type=‘’text/css‘’ rel=‘’STYLESHEET‘’>",CssPath,styles[idx]);
for(int idx=0;idx<scripts.Count;++idx)
writer.WriteLine("<script language=\"JavaScript\" src=‘’" + ScriptsPath + "/{0}‘’></script>",this.scripts[idx]);
writer.WriteLine("</head>");
if(OnBodyRender!=null) OnBodyRender(this,EventArgs.Empty);
base.Render (writer);
writer.WriteLine("</html>");
}
叶子 2012-11-12
- 打赏
- 举报
例如4种风格，写4个css模版，然后再数据库中存储css模版的名称，
这样用户加载的时候可以选择不同的模版并保存。
风一样的大叔 2012-11-12
- 打赏
- 举报
我看好多网上的源码，都是事先写好CSS模板的，然后直接引用就可以了，没有用数据库保存
