自学前端第十天~

最新推荐文章于 2024-06-10 21:57:03 发布

弹走鱼尾纹~

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量334

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_41575188/article/details/123698716

版权

今天在昨天自适应的基础上学习了一些常用的页面布局，两栏布局、三栏布局，以及表单进阶的一些属性。

两栏布局

就是将页面划分成左右两块的布局，一般来说左边是固定宽度的导航栏，右边是自适应宽度的内容。首先需要清除默认的边距，设置窗口自适应，然后对于左边盒子设置200px的固定宽度和100%的高度并使之左浮动，因为盒子是块级元素，必须设置浮动两个盒子才能并列。右边盒子设置100%的高度，和200px的左边距来“见缝插针”，因为浮动的盒子会影响后面的盒子，在空间足够的情况下能够并列排放。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .box1{
            background-color: red;
            height: 100%;
            width: 200px;
            float: left;
        }
        .box2{
            background-color: yellow;
            height: 100%;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

还可以使用calc函数来计算自适应的宽度。

此时两个盒子都需要设置浮动。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .box1{
            background-color: red;
            height: 100%;
            width: 200px;
            float: left;
        }
        .box2{
            background-color: yellow;
            height: 100%;
            width: calc(100% - 200px);
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

三栏布局

 <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        html,body{
            height: 100%;
        }
        .box1{
            width: 200px;
            height: 100%;
            background-color: red;
            float: left;
        }
        .box2{
            height: 100%;
            background-color: green;
            margin-left: 200px;
            margin-right: 200px;
            
        }
        .box3{

最低0.47元/天解锁文章

弹走鱼尾纹~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自学前端第十天~

今天在昨天自适应的基础上学习了一些常用的页面布局，两栏布局、三栏布局，以及表单进阶的一些属性。两栏布局就是将页面划分成左右两块的布局，一般来说左边是固定宽度的导航栏，右边是自适应宽度的内容。首先需要清除默认的边距，设置窗口自适应，然后对于左边盒子设置200px的固定宽度和100%的高度并使之左浮动，因为盒子是块级元素，必须设置浮动两个盒子才能并列。右边盒子设置100%的高度，和200px的左边距来“见缝插针”，因为浮动的盒子会影响后面的盒子，在空间足够的情况下能够并列排放。<style&
复制链接

扫一扫