几个有用的web页面的格式调整实例 -

peterlij

浏览: 60837 次
性别:
来自: 西安

最近访客更多访客>>

飞天奔月

a964208170

qq85609655

yuanyuan7891

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

几个有用的web页面的格式调整实例

博客分类：

1. 使DIV大小正好包含内容

<!DOCTYPE html>
<html>
<head>
    <style>
        .fitContent {
          display:-moz-inline-stack;
          display:inline-block;
          zoom:1;
          *display:inline;
        }
    </style>
    
    <script>
        function addDiv() {
            var div = document.createElement('div');
            div.appendChild(document.createTextNode("Dynamic node"));
            div.style.border="1px solid green";
            div.className="fitContent"
            
            document.body.appendChild(div);
        }
    </script>
</head>
<body onload = "addDiv();">
    <div style="border:1px solid red;" class="fitContent">
        I should be in div's center
    </div>
</body>
</html>

未使用fitContent样式时，两个div的显示在IE和FireFox上面都一样，如下：

使用了fitContent样式之后，两个div的显示在IE和FireFox上面都一样，如下：

2. 使DIV内容自动充满DIV

<!DOCTYPE html>
<html>
<head>
    <style>
        .autoFitContainer {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }
        
    </style>
    
</head>
<body onload = "addDiv();">
    <div style="position: absolute; border:2px solid red; width:100px; height:100px;">
        <span style="background-color:yellow;" class="autoFitContainer">Auto Fit Container</span>
    </div>
</body>
</html>

未使用autoFitContainer样式时，两个div的显示在IE和FireFox上面都一样，如下：

使用了autoFitContainer样式之后，两个div的显示在IE和FireFox上面都一样，如下：

3. 在表格的单元格的任意位置中添加子元素

<html>
    <head> 
    </head>
    <body>
        <div style="position:relative;width:200px;background:#dccbbe;border:1px solid black;">
          <table border="1" align="center" cellpadding="0" cellspacing="2" bgcolor="white">
            <tr>
              <td align="center">Test1</td>
              <td >
                <div style="position:relative;height:50px;width:70px;background:yellow;">
                    <span style="position:absolute;top:0;left:0;background:red;">Test4</span>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div style="position:relative;height:50px;width:50px;text-align:center;line-height:50px;background:purple;">
                    <span style="background:magenta;">Test2</span>
                </div>
              </td>
              <td>
                <div style="position:relative;height:50px;width:70px;background:green;">
                    <div style="position:absolute;bottom:0;right:0;background:lime;">Test5</div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div style="position:relative;height:70px;width:50px;text-align:center;line-height:70px;background:maroon;">
                    <span style="background:pink;">Test3</span>
                 </div>
              </td>
              <td>
                <div style="position:relative;height:50px;width:70px;background:blue;">
                    <span style="position:absolute;top:15px;right:0;background:aqua;">Test6</span>
                </div>
              </td>
            </tr>
          </table>
        </div>
    </body>
</html>

运行效果如下：