返回首页
当前位置: 主页 > CSS教程 >

以图例方式介绍CSS制作网页详细步骤(7)

时间:2010-02-01 16:55来源:未知 作者:admin 点击:
不清理 布局看上去会像这样: 几个列漂在footer上方,footer环绕着列。这可不对! 清理 方法相当简单,我们只需要在三个列后面加上一个div,如下: div

不清理

布局看上去会像这样:

几个列漂在footer上方,footer环绕着列。这可不对!

清理

方法相当简单,我们只需要在三个列后面加上一个<div>,如下:

<div id="content">  
          
    <div class="column1">  
      
        <h2>a sleek design</h2>  
          
        <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
        <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
        <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
        <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  
    </div>  
    <div class="column2">  
          
        <h2>tutorials</h2>  
      
        <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
        <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
        <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
        <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  
  
    </div>  
    <div class="column3">  
      
        <h2>recent work</h2>  
  
        <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
        <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
        <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
        <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  
      
    </div>  
      
    <div style="clear:both"></div>  
      
</div> 
 

看到底部的<div style="clear:both"></div>了吗?只用一个声明清理那三个列的空<div>,就解决了我们的问题。

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名:密码: 验证码:点击我更换图片
推荐赞助商
推荐内容