改变网站的色彩
2010-09-30 22:35:29 来源:WEB开发网曾经是否想给您的网站的观众有机会去定制网站的色彩?这篇文章给出了使用ASP.NET来建立自己这样的网站的一个解决方案。在这里,我们使用ASP.NET母版页,所选择的语言是C#。
如msn.com和bbc.co.uk网站允许用户改变他们的网站模板颜色。这个想法看上去似乎是个噱头,并似乎有点毫无意义的,因为不是每个人都需要的,或者是符合每个人的口味。
但也有一些地方- 如MSN和BBC等大型组织会花很多钱在市场营销研究上。
首先,让我们看看演示的顺序和文件要求。我们使用Default.aspx开始,
所有的工作在 central.aspx 和master.cs中完成。
首先的一个关键点是样式是aspx文件而不是css文件。central.aspx文件渲染一个CSS文件,因为我们在文档内容的顶部声明。样式表如下:
<% Response.ContentType = "text/css";%>
<%@ Page Language="C#"%>
<%
string colormedium = null;
string colorstrong = null;
string colorweak = null;
string logo = null;
HttpCookie cookie = Request.Cookies["colorme"];
if (cookie == null) {
Random RandomClass = new Random();
int RandomNumber = 0;
RandomNumber = RandomClass.Next(1, 5);
if (RandomNumber == 1) {
colorstrong = "#55AAFB";// - strong blue
colormedium = "#8FC8FD";// - medium blue
colorweak = "#C9E5FF";// - weak blue
logo = "url('images/picassocode-blue.jpg')";//- blue logo
}
else if (RandomNumber == 2) {
colorstrong = "#AF51FF";// - strong purple
colormedium = "#CB8DFF";// - medium purple
colorweak = "#E6C9FF";// - weak purple
logo = "url('images/picassocode-purple.jpg')";//- purple logo
}
else if (RandomNumber == 3) {
colorstrong = "#FFBD4C";// - strong orange
colormedium = "#FFD189";// - medium orange
colorweak = "#FFE8C5";// - weak orange
logo = "url('images/picassocode-orange.jpg')";//- orange logo
}
else if (RandomNumber == 4) {
colorstrong = "#FF5489";// - strong pink
colormedium = "#FF91B8";// - medium pink
colorweak = "#FFCDE0";// - weak pink
logo = "url('images/picassocode-pink.jpg')";//- pink logo
}
else if (RandomNumber == 5) {
colorstrong = "#C3E473";// - strong green
colormedium = "#DDEFA5";// - medium green
colorweak = "#F1F9D7";// - weak green
logo = "url('images/picassocode-green.jpg')";//- green logo
}
}
else if (cookie != null) {
if (cookie.Value == "blue") {
colorstrong = "#55AAFB";// - strong blue
colormedium = "#8FC8FD";// - medium blue
colorweak = "#C9E5FF";// - weak blue
logo = "url('images/picassocode-blue.jpg')";//- blue logo
}
else if (cookie.Value == "purple") {
colorstrong = "#AF51FF";// - strong purple
colormedium = "#CB8DFF";// - medium purple
colorweak = "#E6C9FF";// - weak purple
logo = "url('images/picassocode-purple.jpg')";//- purple logo
}
else if (cookie.Value == "orange") {
colorstrong = "#FFBD4C";// - strong orange
colormedium = "#FFD189";// - medium orange
colorweak = "#FFE8C5";// - weak orange
logo = "url('images/picassocode-orange.jpg')";//- orange logo
}
else if (cookie.Value == "pink") {
colorstrong = "#FF5489";// - strong pink
colormedium = "#FF91B8";// - medium pink
colorweak = "#FFCDE0";// - weak pink
logo = "url('images/picassocode-pink.jpg')";//- pink logo
}
else if (cookie.Value == "green")
{
colorstrong = "#C3E473";// - strong green
colormedium = "#DDEFA5";// - medium green
colorweak = "#F1F9D7";// - weak green
logo = "url('images/picassocode-green.jpg')";//- green logo
}
}
%>
body { font-family: Tahoma,Verdana,
Arial;font-size:100%;padding:0;margin:0;
background-color:#CFCFB8;color:#9a9a9a}
a{ color:<% = colorstrong %>
text-decoration:none;
}
a:hover{
text-decoration:underline
}
table {
border-collapse : collapse;
}
table td, table th {
padding : 0;
}
.img_border{border:1px solid #000;margin:5px}
.logo{background-image:<% = logo%>}
.mediumback{background-color:<% = colormedium%>}
.mediumborder{border:solid 3px <% = colormedium%>}
.mediumtext{color:<% = colormedium%>}
.strongback{background-color:<% = colorstrong%>}
.strongborder{border:solid 3px <% = colorstrong%>}
.strongtext{color:<% = colorstrong%>}
.weakback{background-color:<% = colorweak%>}
.weakborder{border:solid 3px <% = colorweak%>}
.weaktext{color:<% = colorweak%>}
/* menu */
.mymenu{
margin: 5px 0;
padding: 0;
}
.mymenu a.menuitem{
background-color:<% =colorweak %>;
font-size:85%;
color: #000000;
display: block;
position: relative;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
border-bottom: 1px solid #9A9A9A;
text-align:left;
}
.mymenu a.menuitem:hover{
background-color:#ffffff;
}
更多精彩
赞助商链接