为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 [study]如何用css进行网页布局

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

2016.08.06 09:33 2834浏览
[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>

课程来源

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
11
获赞与收藏
53

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

142篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消