CSS基础学习——基本布局

最新推荐文章于 2023-03-04 15:36:06 发布

梦起孟心

最新推荐文章于 2023-03-04 15:36:06 发布

阅读量220

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/qq_41890177/article/details/107585032

版权

CSS 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

一、双飞翼布局

由三列组成，两端固定，中间自适应。

双飞翼布局的优点：兼容性好，兼容所有主流浏览器，包括万恶的IE6，因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        .container{
            width: 100%;
            overflow: hidden;
        }
        .column{
            float: left;
            height: 200px;
        }
        .left{
            width: 300px;
            background-color: #f00;
            margin-left: -100%;
        }

        .center{
            width: 100%;
            background-color: #0f0;
        }
        .right{
            width: 300px;
            background-color: #00f;
            margin-left: -300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column center"></div>
        <div class="column left"></div>
        <div class="column right"></div>
    </div>
</body>
</html>

不管怎么移动，都只是中间列的长度在变化

固定宽度的左列宽度为300px，当margin-left:-100%时，这个左边列会脱离自己所在行，向上一行浮动，margin-left: -300px;意思相同

注意这里。不是看见负数就会向上一行浮动，比如-20px，-20%，都是不一定的，一定要规定固定宽度为多少，比如上述事例中规定的额300px，如果改成200px，则margin-left也需要修改成-200px

二、圣杯布局

由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。布局时与双飞翼比增加了定位和偏移设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 600px;
        }
        /*头部+尾部*/
        .header,.footer{
            width: 100%;
            height: 100px;
            line-height: 100px;
            background-color: #2fff99;
            text-align: center;
            font-size: 30px;
        }
        /*主体*/
        .container{
            padding: 0 200px;
            overflow: hidden;
        }
        .column{
            float: left;
            height: 400px;
            position: relative;
        }
        .left{
            width: 200px;
            background-color: #f00;
            margin-left: -100%;
            left: -200px;
        }
        .center{
            width: 100%;
            background-color: #0f0;
        }
        .right{
            width: 200px;
            background-color: #0ff;
            margin-left: -200px;
            right:-200px;
        }
    </style>
</head>
<body>
    <!-- 一个网页通常由上中下本部分组成 -->
    <!--1.header头部-->
    <div class="header">#header</div>
    <!--2.content主体内容区-->
    <div class="container">
        <div class="column center"></div>
        <div class="column left"></div>
        <div class="column right"></div>
    </div>
    <!--3.footer尾部-->
    <div class="footer">#footer</div>
</body>
</html>

效果和第一个布局一样，怎么伸缩都是中间在变化，其中min-width: 600px;表示，网页最小宽度为600px，也就是你只能将页面缩减到宽度为600px，不能在缩小

三、侧边栏固定布局

（一）两栏布局

1、左侧固定，右侧自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局，左固定</title>
    <style>
        body{
            font-size: 18px;
            min-width: 600px;
        }
        .container{
            width: 100%;
            overflow: hidden;
        }
        .left{
            width: 150px;
            height: 200px;/* 实际开发中，不要给出高度，高度是由内容自行撑开 */
            float: left;
            background-color: #f00;
            color: #fff;
        }
        .right{
            width: 100%;
            height: 200px;
            float: left;
            background-color: #0f0;
            color: #fff;
            margin-left: 155px;
            position: relative;
            top: -200px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">左侧固定</div>
    <div class="right">右侧自适应</div>
</div>
</body>
</html>

2、左侧自适应，右侧固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局，右固定</title>
    <style>
        body{
            font-size: 18px;
            min-width: 600px;
        }
        .container{
            width: 100%;
            overflow: hidden;
        }
        .left{
            width: 100%;
            height: 200px;
            float: left;
            background-color: #f00;
        }
        .right{
            width: 150px;
            height: 200px;
            float: left;
            background-color: #0ff;
            margin-left: -150px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">左侧自适应</div>
    <div class="right">右侧固定</div>
</div>
</body>
</html>

3、左右都固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局，左右固定</title>
    <style>
        body{
            font-size: 18px;
            min-width: 600px;
        }
        .container{
            width: 1000px;
            overflow: hidden;
        }
        .left{
            width: 200px;
            height: 200px;
            float: left;
            background-color: #f00;
            color: #fff;
        }
        .right{
            width: 790px;
            height: 200px;
            float: right;
            background-color: #0ff;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">左侧固定</div>
    <div class="right">右侧固定</div>
</div>
</body>
</html>

这个相对来说简单一些，都是固定的

（二）三栏布局

1、左侧固定，中间自适应，右侧固定

和双飞翼布局差不多

2、左侧自适应，中间和右侧固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧自适应，中间和右侧定宽</title>
    <style>
        .container{
            color: #fff;
            overflow: hidden;
        }
        .left{
            width: 100%;
            float: left;
            background-color: #ad513d;
        }
        .content{
            height: 200px;
            line-height: 200px;
            margin-right: 300px;
        }
        .center,.right{
            float: right;
            width: 150px;
            height: 200px;
            line-height: 200px;
            position: relative;
            top: -200px;
        }
        .center{
            background-color: #44ffc5;
        }
        .right{
            background-color: #ff6bb1;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">
        <div class="content">左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应</div>
    </div>
    <div class="right">右侧定宽</div>
    <div class="center">中间定宽</div>
</div>
</body>
</html>

3、左侧和中间固定，右侧自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧和中间固定，右侧自适应</title>
    <style>
        .container{
            color: #fff;
            overflow: hidden;
        }
        .left,.center{
            position: relative;
            float: left;
            width: 200px;
            height: 150px;
            line-height: 150px;
        }
        .left{
            background-color: #79ff40;
        }
        .center{
            background-color: #ff8499;
        }
        .right{
            float: right;
            width: 100%;
            height: 150px;
            line-height: 150px;
            background-color: #5b4cff;
            margin-left: -400px;
        }
        .content{
            margin-left: 400px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">左侧固定</div>
    <div class="center">中间固定</div>
    <div class="right">
        <div class="content">右侧自适应</div>
    </div>
</div>
</body>
</html>

梦起孟心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习——基本布局

一、双飞翼布局由三列组成，两端固定，中间自适应。双飞翼布局的优点：兼容性好，兼容所有主流浏览器，包括万恶的IE6，因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style>
复制链接

扫一扫