论坛首页 Web前端技术论坛

一个关于页面样式设计的问题,希望大家能点评下!

浏览 5394 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-03-30  
xml 代码
  1.   
  2. #nav{   
  3.     font-size:14px;   
  4.     color:#3333CC;   
  5. }  

这两天在做一个改变页面样式的设计,雷同于网易的高级页面样式设置功能,如果有不了解的可以先去163的博克玩玩!
最开始的想法是把用户设置的所有样式都寸到数据库里面去,比如把博克的标题的样式寸到数据库里面,别的用户访问的时候在到数据库里面读出来,然后显示,想来想去,这个方法肯定不行,如果这样做的话  , 那数据库会累死克啊!  最后想到一个方法,每个用户创建一个css文件,把用户更改的样式都写在这个css文件里面去!由于本人不是很懂css,请教了位css高手,果然可以!下面是我的做法,不知道各位还有什么好的方法可以供我参考下!

建立一个html文件,代码如下:

xml 代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5.    
  6. <title>无标题文档</title>  
  7. </head>  
  8.   
  9. <body>  
  10.   
  11. <div id="nav" >  
  12.     这个是用来测试的页面!   
  13. </div>  
  14.   
  15. </body>  
  16. </html>  

建立一个main.css文件,这个文件是系统建立的,可以把他看成是一个模板css,代码如下:

xml 代码
  1. #nav{ width:184px; height:23px; float:left; font-size:14px; color:#F6516D; font-weight:bold; background:transparent; text-align:left; margin:50px 0 0 30px;display:inline}  

然后在建立一个user.css文件,这个文件是用户自己定义的样式,注意 这里的id是一样的,都是nav,代码如下:

两个css文件建立好后,就把它导入到上面的html文件中去,注意,这个时候的两个css文件的先后顺序很重要,系统定义的样式因该放在前面,用户定义的因该放在后面,  那么用户定义的css文件遇到和系统定义的css文件相同的id,那么就会取代系统定义的.
xml 代码

  1. <link href="main.css" rel="stylesheet" type="text/css" />  
  2. <link href="user.css" rel="stylesheet" type="text/css" />  

这样做的好处就不用把用户设置的样式保存到数据库里面去,而现在就只要生成一个css文件,大大提高了页面的速度,只不过在生成css文件会复杂些,各位能是说说你们的看法不?谢谢拉!
  • css.rar (890 Bytes)
  • 下载次数: 38
   发表时间:2007-03-30  
我也赞成生成一个css文件,
然后在数据库设置一个标志,,判断用系统的还是用户自己的。
0 请登录后投票
   发表时间:2007-03-31  
这样试下:
...
<link id="cssDef" href="main.css" rel="stylesheet" type="text/css" /> 
...

function changeCss(href){
    $("cssDef").href = href;
    alert("更换样式成功!");
}
0 请登录后投票
   发表时间:2007-03-31  
如果用户的设置不多的话,也可以将用户的设置保存在一个Cookie中。一个Cookie可以保存40k内容,其实还是可以保存很多设置的。
可以写一个JS脚本,在客户端访问这个Cookie,取出其中的设置,根据这些设置修改具体的style。

这个方法的好处是一旦设置保存了之后,全部的处理都在客户端执行,不涉及到服务器端的处理。

具体的处理流程是:
服务器端Java代码添加Cookie并保存用户设置->在页面中设置一个onload事件,调用一个JS函数->JS函数访问Cookie,取出其中的设置,根据这些设置修改style的内容。

如何使用JS访问Cookie请看《JavaScript权威指南》。
0 请登录后投票
   发表时间:2007-03-31  
dlee 写道
如果用户的设置不多的话,也可以将用户的设置保存在一个Cookie中。一个Cookie可以保存40k内容,其实还是可以保存很多设置的。
可以写一个JS脚本,在客户端访问这个Cookie,取出其中的设置,根据这些设置修改具体的style。

这个方法的好处是一旦设置保存了之后,全部的处理都在客户端执行,不涉及到服务器端的处理。

具体的处理流程是:
服务器端Java代码添加Cookie并保存用户设置->在页面中设置一个onload事件,调用一个JS函数->JS函数访问Cookie,取出其中的设置,根据这些设置修改style的内容。

如何使用JS访问Cookie请看《JavaScript权威指南》。


用户换台机器就不行了...个人觉得还是服务端处理比较好
0 请登录后投票
   发表时间:2007-03-31  
用户的设置可以存在两个地方,数据库和Cookie,如果发现数据库中保存有数据,而Cookie中没有,可以重建这个Cookie。
Cookie相当于一个缓存,设置保存在Cookie中,可以减少与服务器的交互,对于提高性能还是有一些意义的。
0 请登录后投票
   发表时间:2007-04-01  
我们也有类似的需求,不过我们是生成后放到文件服务器上
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics