• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

    网页设计中的固定布局

    • 2019-05-24 13:45:42
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.com

    网页设计中,固定布局模型的速度之所以快,主要原因是布局不依赖于表单元格的内容。其布局是根据该表以及表中列和单元格的width值决定的。

    网页设计时固定布局模型的工作包括以下简单步骤:

    1、width属性值不是auto的所有列元素会根据width值设置该列的宽度。

    2、如果一个列的宽度为auto——不过,表首行中位于该列的单元格width不是auto——则根据该单元格宽度设置此列的宽度。如果这个单元格跨多列,则宽度在这些列上平均分配。

    3、在以上两步之后,如果列的宽度仍为auto,会自动确定其大小,使其宽度尽可能相等。

    此时,表的宽度设置为表的width值或列宽度之和(取其中较大者)。如果表宽度大于其列宽总和,将二者之差除以列数,再把得到的这个宽度增加到每一列上。

    网页设计时,这种方法的速度很快,因为所有列宽度都由表的第一行定义。首行后所有行中的单元格都根据首行所定义的列宽确定大小。后面这些行中的单元格不会改变列宽,这意味着为这些单元格指定的width值都会被忽略。如果一个单元格的内容无法放下,该单元格的overflow值将决定单元格内容是剪裁。可见还是生成一个滚动条。

    考虑以下样式和标记:

    table{table-layout: fixed; width: 400px;

    border-collapse: collapse;}

    td {border: 1px solid;}

    Col#c1 {width: 200px;}

    #r1c2 {width: 75px;}

    #r2c3 {width: 500px;}

    <table>

    <colgroup>

    <col id="cl"><col id="c2"><col id="c3"><col id="c4">

    </colgroup>

    <tr>

    <td id="rlcl">l-l</td><td id="r1c2">l-2</td>

    <td id="rlc3">l-3</td><td id="rlc4">1-4</td>

    </tr>

    <tr>

    <td id="r2cl">2-l</td><td id="r2c2">2-2</td>

    <td id="r2c3">2-3</td><cd id="r2c4">2-4</td>

    </tr>

    <tr>

    <td id=" r3c1">3-1</td><td id=" r3 e2">3-2</td>

    <Cd id="r3c3">3-3</td><td id="r3c4">3-4</td>

    </tr>

    <tr>

    <td id="r4cl">4-l</tdxtd id="r4c2">4-2</td>

    <td id="r4c3">4-3</tdxtd id="r4c4">4-4</td>

    </tr>

    </table>

    注意,在网页设计时,使用固定宽度布局模型时,没有必要非得为表指定一个显式宽度,不过如果指定一个宽度确实有所帮助。例如,给定以下样式,用户代理可能计算出表的宽度比父元素的width窄50像素。它就会在固定布局算法中使用计算得到的这个宽度:

    table{table-layput: fixed; margin: 0 25px;width: auto;}


    当前文章标题:网页设计中的固定布局

    当前URL:http://www.0737dz.com/news/wzzz/3027.html

    上一篇:网页设计中的表大小

    下一篇:网页设计中的自动布局

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图