开发学院软件开发C语言 改变网站的色彩 阅读

改变网站的色彩

 2010-09-30 22:35:29 来源:WEB开发网   
核心提示:曾经是否想给您的网站的观众有机会去定制网站的色彩?这篇文章给出了使用ASP.NET来建立自己这样的网站的一个解决方案,在这里,改变网站的色彩,我们使用ASP.NET母版页,所选择的语言是C#,首先的一个关键点是样式是aspx文件而不是css文件,central.aspx文件渲染一个CSS文件,如msn.com和bbc.

曾经是否想给您的网站的观众有机会去定制网站的色彩?这篇文章给出了使用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;
}

1 2 3  下一页

Tags:改变 网站 色彩

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读