代码如下:
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<style type="text/css">
<!--
.STYLE1 {
font-size: 14px
line-height: 20px
letter-spacing: 3px
}
.STYLE2 {
font-size: 12px
letter-spacing: 5px
}
.STYLE3 {
font-size: 10px
color: #cccccc
float:right
margin-top:7px
}
.STYLE7 {font-size: 14pxline-height: 20pxletter-spacing: 3pxcolor: #1F6989}
-->
</style>
</head>
<body>
<div id="wrapper">
<div align="center">
<table width="783" height="258" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="287" height="258" valign="top" style="padding-left:1px"><table width="293" border="0" cellspacing="10">
<tr>
<th width="271" height="160" scope="col"><table width="240" height="29" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="240" height="29" background="tb_top.gif" class="font14" style="padding-left:20px">
<div align="left"><span class="STYLE3" >MORE</span><strong><font color="#009933">商信</font>通
| <span class="STYLE2"><font face="Geneva, Arial, Helvetica, sans-serif">推荐商户</font></span>
</strong></div></td>
</tr>
</table>
哦,我觉得从你问的问题来看可能思路不太对头。因为内容是11:00,那么我想左半部分蓝色背景根本不是正解。如9:00 10:0011:00
可能你需要的是从9点半开始到11:00之间的部分是蓝色才对。
这种情况下通常带有时间的方格是表格,然后根据时间长短计算出蓝色部分的长度(和位置),然后用绝对定位的方式和时间表格叠加即可。