前端学习CSS网页布局篇（五）

最新推荐文章于 2024-07-18 14:29:38 发布

AnalyzeSystem

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量718

点赞数

分类专栏：前端从入门到精通前端学习笔记文章标签： css 布局前端

本文链接：https://blog.csdn.net/AnalyzeSystem/article/details/52794420

版权

前端学习笔记同时被 2 个专栏收录

6 篇文章 2 订阅

订阅专栏

前端从入门到精通

5 篇文章 0 订阅

订阅专栏

本篇简述利用CSS网页布局，知识点较少，了解实践一下就搞定了。

一列布局

又与代码比较简单，就不做过多说明，直接贴代码和效果图

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
    <title>单列布局</title>
<style type="text/css">
    body{
         margin: 100px;padding: 0;
    }

    .header{
         background: #ccc;
         width: 200px;
         color: #555;
         height: 100px;
         margin:0 auto;
    }

     .content{
         width: 200px;
         background: #444;
         color: #fff;
         height: 200px;
         margin:0 auto;
    }

     .footer{
         width: 200px;
         background: #ccc;
         color: #555;
         height: 100px;
         margin:0 auto;
    }
</style>
</head>
<body>
<div class="header">

</div>
<div class="content">

</div>
<div class="footer">

</div>

</body>
</html>

运行效果图如下：

自适应宽度及固定宽度的二列布局的实现

自适应宽度与固定宽度主要区别在于一个用百分比布局控制一个用固定值控制，下面是相关代码（固定宽度布局这里就不贴了）

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
    <title>自适应布局</title>
<style type="text/css">
    body{
         background: #d3d4d7;
         margin: 200px;padding: 0;
    }

    .main{
        background: #FFF;
        height: 400px;
        margin: auto;
    }

    .left{
         background: #ccc;
         width: 30%;
         height: 50%;
         float: left;
    }

    .right{
        background: #444;
        width: 70%;
        height: 50%;
        float: right;
    }
</style>
</head>
<body>
<div class="main">
<div class="left">

</div>

<div class="right">

</div>
</div>
</body>
</html>

运行效果图：

用position定位方法实现自适应效果的三列布局

三列布局用到position的绝对定位属性（不用float），实现左右拖动让中间列自适应，主要知识点：position、margin。

下面是相关代码

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
    <title>单列布局</title>
<style type="text/css">
    body{
         background: #eee;
         margin: 0;
         padding: 0;
    }

    .left{
         background: #FF0000;
         width: 20%;
         height: 100%;
         position: absolute;
         left: 0;
         top: 0;
    }

    .center{
        background: #444444;
        width: 60%;
        height: 100%;
        margin: 0 20% 0 20%;
    }

    .right{
        background: #FFF;
        width: 20%;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>
</head>
<body>

<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</body>
</html>

运行效果图：

用HTML+CSS实现复杂结构的混合布局

跟随慕课网学习，发现这块的知识比较简单，这里仅贴上自己的实践代码块和效果图，本篇仅作纪录，并无多少知识点。

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
    <title>混合布局</title>
    <style type="text/css">
        body{
            background: #ccc;
            margin: 0;
            padding: 0;
        }

        .left{
            background: #E3E0D5;
            width: 20%;
            height: 100%;
            float: left;
        }

        .right{
            background: #595959;
            width: 80%;
            height: 100%;
            float: right;
        }

        .header{
            height: 50px;
            margin: 0 auto;
            background: #FFF;
        }

        .footer{
            width: 60%;
            height: 100px;
            margin: 0 auto;
            background: #FFF;

        }

        .main{
            width: 60%;
            height: 800px;
            margin: 0 auto;
            background: #888888;
        }

        .login{
            height: 150px;
            background: #F0F0F0;
            margin: 10 auto;
        }
    </style>
</head>
<body>

    <div class="header">

    </div>
    <div class="main">
        <div class="left">
            <div class="login"></div>
        </div>
        <div class="right">

        </div>
    </div>
    <div class="footer">

    </div>

</body>
</html>

效果图：

三列布局不仅仅是绝对定位可以实现，其他方式也可以，条条道路通罗马。

AnalyzeSystem

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
前端学习CSS网页布局篇（五）

本篇简述利用CSS网页布局，知识点较少，了解实践一下就搞定了。一列布局又与代码比较简单，就不做过多说明，直接贴代码和效果图<!DOCTYPE html><html><meta charset="utf-8" /><head> <title>单列布局</title><style type="text/css"> body{ margin: 100px;padd
复制链接

扫一扫