<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    posts - 64,  comments - 9,  trackbacks - 0

    需求一個不規則表格,table局限性太大,用樣式表來畫出來。每個行和列寬度高度都可以控制,十分方便。
    源碼:

    <!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" />
    <meta name="author" content="Chomo" />
    <link rel="start" title="Home" />
    <title></title>
    <style type="text/css">
    * {
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     list-style:none; 
     font-family:宋體;
     font-size:12px;
    }
    #main{
     margin-left:15%;
     margin-top:40px;
     width:70%; 
     }
    #main ul{
     margin-left:1px;
     margin-top:1px;
     width:100%;
     height:100%;  
     }
    #main ul li{
     float:left;
     height:23px;
     border:1px solid #cfdae8;
     margin-left:-1px;
     margin-top:-1px;
     text-align:center;
     }
     
    #main ul li.title11{width:9%; height:90px; line-height:90px }
    #main ul li.title12{width:40%; height:90px; line-height:90px}
    #main ul li.title13{width:10%; height:90px; line-height:90px}
    #main ul li.title14{width:40%; height:90px; line-height:90px}

    #main ul li.title21{width:9%; height:30px; line-height:30px }
    #main ul li.title22{width:40%; height:30px; line-height:30px}
    #main ul li.title23{width:15%; height:30px; line-height:30px}
    #main ul li.title24{width:35%; height:30px; line-height:30px}

    #main ul li.title31{width:60%; height:30px; line-height:30px}
    #main ul li.title32{width:19%; height:30px; line-height:30px}
    #main ul li.title33{width:20%; height:30px; line-height:30px}

    #main ul li.title41{width:60%; height:90px; line-height:30px}
    #main ul li.title42{width:19%; height:90px; line-height:30px}
    #main ul li.title43{width:20%; height:90px; line-height:30px}

    #main ul li.title51{width:99.2%; height:30px; text-align:left; line-height:30px}

    #main ul li.title61{width:40%; height:90px; line-height:90px}
    #main ul li.title62{width:30%; height:90px; line-height:90px}
    #main ul li.title63{width:29.1%; height:90px; line-height:90px}


    </style>
    </head>
    <body>
    <div id="main">
    <ul>
    <!--第1行-->
     <li  class="title11">防偽碼</span></li>
     <li  class="title12"></li>
     <li  class="title13">密碼區</li>
     <li  class="title14"></li>
     <!--第2-1行-->
     <li  class="title21">付款方</li>
     <li  class="title22"></li>
     <li  class="title23"></li>
     <li  class="title24"></li>
     <!--第2-2行-->
     <li  class="title21">收款方</li>
     <li  class="title22"></li>
     <li  class="title23"></li>
     <li  class="title24"></li>
      <!--第3行-->
     <li  class="title31">項目</li>
     <li  class="title32">金額</li>
     <li  class="title33">備注</li>
       <!--第4行-->
     <li  class="title41"></li>
     <li  class="title42"></li>
     <li  class="title43"></li>
     <!--第5行-->
     <li  class="title51">合計金額</li>
     <!--第6行-->
     <li  class="title61">1212</li>
     <li  class="title62"></li>
     <li  class="title63"></li>
    </ul>

    </div>

    <br />
    </body>

    </html>
    效果如圖:

    要點:
    line-height:90px。行高指的是文本行的基線間的距離
    每行寬度的合不能大于 100%,否則會分行。

    posted on 2009-07-30 17:47 super_nini 閱讀(1297) 評論(0)  編輯  收藏

    只有注冊用戶登錄后才能發表評論。


    網站導航:
     
    <2009年7月>
    2829301234
    567891011
    12131415161718
    19202122232425
    2627282930311
    2345678

    常用鏈接

    留言簿

    隨筆檔案

    文章檔案

    相冊

    搜索

    •  

    最新評論

    閱讀排行榜

    評論排行榜

    主站蜘蛛池模板: 菠萝菠萝蜜在线免费视频| 亚洲人成电影网站| 日本一区二区在线免费观看 | 国产av无码专区亚洲国产精品| 国产午夜亚洲精品| 成年女人喷潮毛片免费播放| 亚洲伊人色一综合网| 99在线精品视频观看免费| 91亚洲自偷在线观看国产馆| 曰批视频免费30分钟成人| 亚洲六月丁香六月婷婷蜜芽| 男女超爽刺激视频免费播放| 日韩亚洲不卡在线视频中文字幕在线观看| 免费在线观看h片| 亚洲日本乱码卡2卡3卡新区| 青青草国产免费久久久91| 亚洲JLZZJLZZ少妇| 亚洲国产成人久久一区久久| 在线免费视频你懂的| 婷婷久久久亚洲欧洲日产国码AV| 1000部拍拍拍18勿入免费视频下载| 亚洲精品在线电影| 好吊妞视频免费视频| 美女被艹免费视频| 久久亚洲精品视频| 91黑丝国产线观看免费| 亚洲JIZZJIZZ妇女| 亚洲无线观看国产精品| 2019中文字幕免费电影在线播放| 亚洲人xxx日本人18| 亚洲成av人片一区二区三区| 手机看片国产免费永久| 亚洲国产视频一区| 国产区卡一卡二卡三乱码免费| 中文字幕乱码系列免费| 亚洲国产成人九九综合| 国产精品va无码免费麻豆| 东方aⅴ免费观看久久av | 青青青国产色视频在线观看国产亚洲欧洲国产综合 | 日本高清免费网站| 999zyz**站免费毛片|