<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色香蕉一区二区三区蜜桃| 国产∨亚洲V天堂无码久久久| 亚洲乱码中文字幕小综合| 久久免费公开视频| 亚洲处破女AV日韩精品| 免费一区二区无码东京热| 91成人免费福利网站在线| 亚洲精品无码乱码成人| 免费无码H肉动漫在线观看麻豆| 亚洲欧洲国产精品香蕉网| 色www永久免费网站| 水蜜桃亚洲一二三四在线| 4虎1515hh永久免费| 亚洲欧洲精品一区二区三区| 免费A级毛片无码无遮挡内射| 亚洲国产精品线观看不卡| 99视频在线精品免费观看6| 亚洲AV永久无码精品网站在线观看| 国内一级一级毛片a免费| 亚洲av第一网站久章草| 亚洲国产一区视频| 国产免费一区二区三区不卡| 久久精品国产亚洲精品2020| 啦啦啦高清视频在线观看免费| 亚洲欧美日韩国产精品一区| 国产一区二区三区在线免费观看| 一级a性色生活片久久无少妇一级婬片免费放| 亚洲国产小视频精品久久久三级| 国产啪精品视频网站免费尤物| 亚洲理论片在线观看| 日韩免费毛片视频| 国产大片免费天天看| 亚洲福利一区二区| 国产无遮挡裸体免费视频| 精品国产呦系列在线观看免费| 内射干少妇亚洲69XXX| 精品国产免费观看久久久| 伊人免费在线观看| 亚洲人成网亚洲欧洲无码| 国内精品久久久久久久亚洲| 美女被免费喷白浆视频|