一个html布局的模板

<!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=utf-8" /><style>.divStyle{width:99%; height:auto; float:left;}.divStyle1{display:block; width:38%;float:left; text-align:right;}.divStyle2{display:block; width:61%; float:left;}.fontStyle{font-family:SimSun;color: #666;}.fontStyle1{;font-family:SimSun;color: #000;}</style></head><body><div style="width:99%;height:170px;"> <div style="width:100%; height:70px; text-align:center"> <img style="display:inline-block; width:290px; height:70px; float:left" src='alibaba.jpg'/> <span style="display:inline-block; width:280px; float:left; font-size:30px; text-align:center"><strong> 费用报销</strong> </span> <span style="display:inline-block; width:180px; float:left; font-size:30px; text-align:center"> </span> <img style="display:inline-block; width:150px; height:50px; float:left" src='jBarCOde.jpg'/></div> <div style="width:99%; height:30px;"><span><h4>报销概要</h4></span></div>  <div class='divStyle'> <div style='width:32%; float:left;'> <span class='divStyle1'>申请人：</span> <span class='divStyle2'>101010 周周</span> </div> <div style='width:35%; float:left;'> <span class='divStyle1'>日期：</span> <span class='divStyle2'>2014-11-11</span> </div> <div style='width:33%; float:left;'> <span class='divStyle1'>报销单号：</span> <span class='divStyle2'>123456789</span> </div> </div>   <div class='divStyle'> <div style='width:32%; float:left;'> <span style='display:block; width:38%;float:left; text-align:right'>公司：</span> <span style='display:block; width:61%; float:left'>阿里巴巴中国有限公司</span> </div> <div style='width:35%; float:left;'> <span style='display:block; width:38%;float:left; text-align:right'>部门：</span> <span style='display:block; width:61%; float:left'>海外事业部门</span> </div> </div>   <div class='divStyle'> <div class='fontStyle'> <div style='width:99%; float:left;'> <span style='display:block; width:12.2%;float:left; text-align:right'>报销说明：</span> <span style='display:block; width:80%; float:left'>阿里巴巴中国有限公司的报销</span> </div> </div> </div>  <div style='width:99%; height:50px; float:left'><span><h4>报销明细</h4></span></div> <div style='width:99%; height:20px; float:left'> <table border="1" cellspacing="0" cellpadding="0" style='width:99%; height:20px; float:left ;table-layout:fixed; word-break:break-strict;'> <tr> <th>费用类型</th> <th>费用发生时间</th> <th>详细信息</th> <th>消费金币/币种</th> <th>报销汇率</th> <th>报销金额</th> </tr> <tr class='fontStyle'> <th>差旅-飞机票</th> <th>2016-3-14</th> <th>出发地-目的地：广州-杭州</th> <th>980(CNY)</th> <th>1000</th> <th>980(CNY)</th> </tr> </table> </div> <div style='width:99%; height:160px;'><span></span></div> <div class='divStyle'> <div style='width:70%; float:left;'> <span style='display:block; width:100%;float:right;'></span> </div> <div style='width:19%; float:left;'> <div class='fontStyle'> <span style='display:block; width:80%;float:right;'><h5>收到的报销金额(CNY):</h5></span> </div> </div> <div style='width:9%; float:left;'> <span style='display:block; width:100%;float:left;'><h2>980</h2></span> </div> </div></div></body></html>