天天看点
返回

一个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:%; height:auto; float:left;}
.divStyle1{display:block; width:%;float:left; text-align:right;}
.divStyle2{display:block; width:%; 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>
web静态html html 布局
上一篇: printJS 打印 无头无尾 style 加 @page { margin: 0; } body { padding: 100px;}
下一篇: html+栅格布局下一行,less如何实现bootstrap的12栅格布局

继续阅读