您的位置：首页 > Web前端 > HTML

一个html布局的模板

2016-04-19 18:44 716 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航