继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

siberiawolf0307
关注TA
已关注
手记 4
粉丝 11
获赞 53
[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>

课程来源

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP