我是一名自学成才的程序员,通常我可以自己解决问题,但这是一个顽固的问题。我正在为我的 friend 重新设计一个网站,我已经成功地编写了他网站的移动版本代码,但事实证明桌面版本很难。
该站点是一个家庭酒吧的数据库,跟踪; Drinkers、Shots、Units 和 Tabs。索引页面是一个排行榜,其中包含已购买的饮酒者和最后一杯酒。我的问题是将 Drinkers Ranks 定位在排行榜上以跨多个网络浏览器工作。
它看起来像这样:(截图)
http://giblets-grave.co.uk/previews/1400x900_GG-desktop_design_final.jpg
交替背景是我愿意放弃的东西,如果它使回显结果更容易的话。
我尝试过使用表格、div、ul/li 的..我使用的示例:
<table cellpadding="0" cellspacing="0">
<col width="85px" />
<col width="65px" />
<col width="65px" />
<tr>
<th colspan="3" align="left">Chris Clarkson</th>
</tr>
<tr>
<td>
<div class="crop round-five body-shadow" >
<img src="uploads/1.jpg" class="" />
</div>
</td>
<td>
<ul><h2>382.73</h2><li>units</li></ul><br />
</td>
<td>
<ul><h2>613</h2><li>shots</li></ul><br />
</td>
</tr>
</table>
但结果一团糟,有人能帮忙吗?
最佳答案
在我看来,绝对应该使用表格来做到这一点。
至于显示交替颜色,您可能希望使用 nth-child() 伪类将背景颜色应用于 tr。
JSFIDDLE: http://jsfiddle.net/XYh7f/
HTML:
<div class="container">
<div class="leaderboard">
<table id="main">
<tr>
<td>Leaderboard</td>
</tr>
<tr>
<td>
<table class="client">
<tr>
<th colspan="3">Chris Clarkson</th>
</tr>
<tr>
<td>IMG</td>
<td>267.26 units</td>
<td>457 shots</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="client">
<tr>
<th colspan="3">Chris Clarkson</th>
</tr>
<tr>
<td>IMG</td>
<td>267.26 units</td>
<td>457 shots</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="drinks">
<table id="main-data">
<tr>
<td class="data-title"><h2>Last Drinks Served</h2></td>
</tr>
<tr>
<table class="data">
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
</table>
</tr>
</table>
</div>
</div><!-- END CONTAINER -->
CSS:
/* CONTAINER STYLES */
.container {
width: 960px;
}
.leaderboard {
float: left;
}
.drinks {
float: left;
}
/* LEADER BOARD STYLES */
table {
color: #eee;
width: 200px;
background: none;
}
tr { background: none; }
td { background: none; }
#main {
text-align: center;
}
#main tr:nth-child(odd) {
background: #444;
}
#main tr:nth-child(even) {
background: #555;
}
#main tr td .client tr {
background: none;
}
/* LAST DRINKS SERVED STYLES */
#main-data {
width: 740px;
}
#main-data tr:nth-child(odd) {
background: #444;
}
.data {
width: 740px;
}
.data tr:nth-child(odd) {
background: #222;
}
.data td {
border-right: 1px solid #000;
}
.data tr:nth-child(even) {
background: #333;
}
.data-title {
padding: 0 0 0 60px;
}
.data-time {
text-align: right;
width: 120px;
}
.data-shots {
text-align: right;
width: 60px;
}
.data-drink {
text-align: center;
width: 240px;
}
.data-drinker {
text-align: left;
width: 200px;
}
.data-date {
width: 140px;
}
关于php - HTML、CSS 和 PHP 跨浏览器样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14707903/