如何用CSS进行网页布局学习总结殷的博客

页面布局：对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等

页面布局分为4种：

一栏布局

两栏布局

三栏布局

混合布局

灵活利用float、position对页面进行布局

清除浮动

方法一:

针对受到浮动影响的元素操作 clear：both；

方法二：

针对受到浮动影响的元素操作 width：100%；overflow:hidden;

混合布局代码

<!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" />
    <title>混合布局编程挑战</title>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font-size: 30px;
        color: #fff
    }
    
    .top {
        height: 200px;
        background-color: #ccc;
    }
    
    .main {
        height: 500px;
        background-color: red;
    }
    
    .left {
        width: 200px;
        height: 500px;
        float: left;
        background-color: #0000FE;
    }
    
    .right {
        width: 300px;
        height: 500px;
        float: right;
        background-color: #350C0C;
    }
    
    .foot {
        height: 100px;
        background-color: #E59018;
    }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="main">
        <div class="right">right</div>
        <div class="left">left</div>
    </div>
    <div class="foot">foot</div>
</body>

</html>

如何用CSS进行网页布局学习总结 殷的博客

如何用CSS进行网页布局学习总结殷的博客