我的网站上有一个gamimng部分,允许用户使用颜色(蓝色,红色和绿色)显示其统计数据的快速状态。
我希望根据每个用户生成类似的内容。到目前为止我有这个:
<style>
.box2 {
height: 20px;
background: blue;
float:left;
width:120px;
}
.box3 {
height: 20px;
background: green;
float:left;
width:30px;
}
.box1 {
height: 20px;
background: red;
float:left;
width:140px;
}
</style>
<div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
我应该将css直接放在页面中吗?什么是使用PHP实现这个的最佳方法?
答案 0 :(得分:15)
您始终可以使用PHP生成的文件,并将其包含为CSS文件,如:
<link rel="stylesheet" type="text/css" href="/css/userstats.php" />
然后在此文件中,您可以使用当前会话查找用户统计信息,然后使用PHP生成。不要忘记把标题放在:
header("Content-type: text/css");
示例php:
background: #<?php echo $colorX; ?>; // assuming the $colorX is HEX
如果你喜欢使用.htaccess重写文件,你也可以这样看起来不那么明显:
RewriteEngine On
RewriteBase /
RewriteRule ^css/userstats.css$ /path/to/generatedfile.php [L,NC]
所以你可以使用:
<link rel="stylesheet" type="text/css" href="css/userstats.css" />
示例代码:
<style>
div.bar {
height: 25px;
}
div.bar div {
display: block;
float:left;
height: 25px;
margin: 0;
padding: 0;
position: relative;
}
div.bar div.red {
background: #DD3030;
-webkit-box-shadow: -5px 0px 8px 2px #DD3030;
-moz-box-shadow: -5px 0px 8px 2px #DD3030;
box-shadow: -5px 0px 8px 2px #DD3030;
width:140px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-radius: 8px 0px 0px 8px;
border-radius: 8px 0px 0px 8px;
z-index:10;
}
div.bar div.blue {
background: #3388DD;
-webkit-box-shadow: 0px 0px 8px 2px #3388DD;
-moz-box-shadow: 0px 0px 8px 2px #3388DD;
box-shadow: 0px 0px 8px 2px #3388DD;
width:120px;
z-index:5;
}
div.bar div.green {
background: #1CAD32;
-webkit-box-shadow: 5px 0px 8px 2px #1CAD32;
-moz-box-shadow: 5px 0px 8px 2px #1CAD32;
box-shadow: 5px 0px 8px 2px #1CAD32;
width:30px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 8px 8px 0px;
border-radius: 0px 8px 8px 0px;
z-index:10;
}
</style>
<div class="bar">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
jsfiddle: http://jsfiddle.net/g9Vrx/
答案 1 :(得分:0)
如果颜色是完全可自定义的,那么最好的方法是每次页面加载每个用户时生成CSS,或者在用户更改其首选项中的颜色时生成一次,并将其存储在缓存或数据库中。然后只需提取并使用它。
同样,如果颜色是完全可自定义的(不像几种预定义的颜色),那么你应该在HTML页面中包含CSS,因为用PHP修改外部CSS文件是相当复杂和不必要的。