怎么将下图效果放到一个框内-HTML教程-爱易网页

怎么将下图效果放到一个框内

日期：2014-05-17　浏览次数：20698 次

如何将下图效果放到一个框内

如何将图中放到一个table内，且border="1"的效果，
等同table也可以（我试过直接加table不行，CSS我不会用），各位帮忙
上图对应的原代码

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript" type="text/JavaScript"> 
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<title>无标题文档</title>
<body>
 <table border="0"  cellspacing="0" cellpadding="0" width="430" height="40">
<tr>
<td align=left>2012-2-1</td><td align=center></td><td align=right>2012-2-29</td>
</tr>
</table> 
     <div id="0" style="position:absolute; width:200px; height:115px; z-index:1">
        <table border="0"  cellspacing="0" cellpadding="0" width="400" height="20">
          <tr>
            <td bgcolor="3499D0" width="400" align=center height="30"></td>
         </tr>
       </table>
       </div>
 
       <div id="1" style="position:absolute; width:200px; height:115px; z-index:1">
        <table border="0"  cellspacing="0" cellpadding="0" width="400" height="20">
          <tr>
            <td  align=center width="213.333333333333" height="30"></td> 
            <td bgcolor="#FF0000" align=center width="186.666666666667" height="30"></td> 
           </tr>
          </table>
       </div>
 
</body>
</html>

------解决方案--------------------

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
</style>
</head>
<body>
<div>
    <div style="height:35px; line-height:28px; width:90px; text-align:center;float:left;border:1px solid #b2bfe2;">2012-2-28</div>
    <div style="float:left;border:1px solid #b2bfe2; border-left:0; height:35px;">
        <div style="border-bottom:1px solid #b2bfe2;">
            <span style="margin-left:19px; margin-right:170px;">8:00</span>
            <span style="margin-right:170px;">13:00</span>
            <span style="margin-right:19px;">18:00</span>
        </div>
        <div style="margin-left:33px; margin-right:33px; background-color:#3CF;">
        1    
        </div>
    </div>
</div>
</body>
</html>

------解决方案--------------------

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

怎么将下图效果放到一个框内

相关资料更多>

推荐阅读更多>