[study]如何用css進(jìn)行網(wǎng)頁布局

標(biāo)簽：

Html/CSS

[study]如何用css进行网页布局

@(学习)[前端技术, css]

常见的网页布局

基本常见的布局：一列布局、两列布局、三列布局和混合布局。前端工程师，就是通过浮动、定位等技术，实现设计师的设计。用一句高大上的话来说，前端工程师将技术与艺术完美的结合在一起的一个岗位（PS：觉得自己好幸运，可以从事前端这个行业。）。

一列布局

<!DOCTYPE html>
<html>
<head>
    <title>一列布局</title>
    <style type="text/css">
    .header{
        height: 200px;
        background-color: blue;
    }
    .container,.footer{
        width: 960px;
        margin: 0 auto;
    }
    .container{     
        height: 800px;
        background-color: #ccc;
    }
    .footer{
        height: 400px;
        background-color: #3c3c3c;
    }
    </style>
</head>
<body>
<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>
</body>
</html>

两列布局

<!DOCTYPE html>
<html>
<head>
    <title>两列布局</title>
    <style type="text/css">
    .header{
        height: 200px;
        background-color: blue;
    }
    .container,.footer{
        width: 960px;
        margin: 0 auto;
    }
    .container{     
        height: 800px;
        background-color: #ccc;
    }
    .left{
        width: 350px;
        height: 800px;
        float: left;
        background-color: green;
    }
    .right{
        width: 350px;
        height: 800px;
        float: right;
        background-color: green;
    }
    .footer{
        height: 400px;
        background-color: #3c3c3c;
    }
    </style>
</head>
<body>
<div class="header"></div>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>

定位布局

<!DOCTYPE html>
<html>
<head>
    <title>两列定位布局</title>
    <style type="text/css">
    .header{
        height: 200px;
        background-color: blue;
    }
    .container,.footer{
        width: 960px;
        margin: 0 auto;
    }
    .container{     
        height: 800px;
        position: relative;
        background-color: #ccc;
    }
    .left{
        width: 350px;
        height: 800px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: green;
    }
    .center{
        margin: 0 350px 0 350px;
    }
    .right{
        width: 350px;
        height: 800px;
        position: absolute;
        top: 0;
        right: 0;
        background-color: green;
    }
    .footer{
        height: 400px;
        background-color: #3c3c3c;
    }
    </style>
</head>
<body>
<div class="header"></div>
<div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</div>
<div class="footer"></div>
</body>
</html>

混合布局

<!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}
/*
任务2：中间分为2两栏，其中，左侧（left）宽度为200px， 右侧（right）宽度自适应

任务3：要求右侧（right）先加载，左侧（left）后加载

任务4：编写的代码要兼容ie6
*/
.top{
    height: 200px;
    background-color: #ccc
}
.main{
    position: relative;
}
.left{
    width: 200px;
    height: 600px;
    background-color: blue;
}
.right{
    height: 600px;
    position: absolute;
    right: 0;       /*左右都设置为0*/
    left: 0;
    margin-left: 210px;
    background-color: green;
}
.foot{
    height: 400px;
    background-color: red;
}
</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>

课程来源