<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

    常用鏈接

    留言簿

    隨筆檔案

    文章檔案

    相冊

    搜索

    •  

    最新評論

    閱讀排行榜

    評論排行榜

    主站蜘蛛池模板: 国产亚洲精品福利在线无卡一| 黄页网站在线观看免费| 97无码人妻福利免费公开在线视频 | 亚洲国产国产综合一区首页| jizz免费在线影视观看网站| 亚洲国产精品成人久久蜜臀 | 曰批免费视频播放在线看片二 | 麻豆亚洲av熟女国产一区二| 亚洲欧洲免费视频| 97亚洲熟妇自偷自拍另类图片| 国产成人免费ā片在线观看老同学| 亚洲乱码国产乱码精品精| 久久青草免费91线频观看站街| 亚洲最大福利视频网站| 1000部免费啪啪十八未年禁止观看 | 亚洲电影中文字幕| 99无码人妻一区二区三区免费 | 亚洲va成无码人在线观看| 无码免费午夜福利片在线| 亚洲av无码成人影院一区| 亚洲AV无码成人精品区大在线| 中国在线观看免费的www| 亚洲精品无码不卡| 毛片a级毛片免费观看品善网| 欧洲亚洲综合一区二区三区 | 日韩电影免费在线观看中文字幕| 亚洲春黄在线观看| 日本免费一区尤物| 中文字幕无码免费久久9一区9| 亚洲av永久无码制服河南实里| 久久99九九国产免费看小说| 日日摸日日碰夜夜爽亚洲| 亚洲综合av永久无码精品一区二区| 88av免费观看入口在线| 99亚洲男女激情在线观看| 亚洲色婷婷六月亚洲婷婷6月| 4虎1515hh永久免费| 免费看一级高潮毛片| 亚洲国产综合专区在线电影| 永久在线毛片免费观看| 中文字幕在线免费看线人|