利用div+css实现几种经典布局的详解,样式以及代码!

教程大全  / 只看大图  / 倒序浏览   ©

#楼主# 2020-2-29

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
为你朗读
1 分钟
一、左右两侧,左侧固定宽度200px,右侧自适应占满

效果
利用div+css实现几种经典布局的详解,样式以及代码!-1.jpg html代码
<div class="container">
                <div class="left"></div>
                <div class="right"></div>
        </div>
css代码
*{
                        margin: 0px;
                        padding: 0px;
                }
                .container{
                        height: 500px;
                        background: yellow;
                }
                .left{
                        float: left;
                        width: 200px;
                        height: 100%;
                        background: red;
                }
                .right{
                        margin-left: 200px;
                        background: green;
                        height: 100%;
                }这个实现起来比较的简单,左侧的div给浮动,右侧的divmargin-left使其从左侧div右侧开始展现,加背景颜色方便观察。
二、左中右三列,左右个200px固定,中间自适应占满

利用div+css实现几种经典布局的详解,样式以及代码!-2.jpg html代码
<div class="container">
                <div class="left"></div>
                <div class="right"></div>
                <div class="center"></div>
        </div>css代码
*{
                        margin:0px;
                        padding: 0px;
                }
                .container{
                        background: yellow;
                        height: 500px;
                }
                .left{
                        background: red;
                        float: left;
                        width: 200px;
                        height: 100%;
                }
                .center{
                        /*第一种用浮动,加上左右外边距,不用绝对定位
                                这里我推荐把html中的right写在center的前面,如果按顺序写的话会把right挤到下面,感兴趣的可以自己试试
                        */
                        /*margin: 0 200px;*/

                        /*第二种用浮动加绝对定位*/
                        /*position: absolute;
                        left: 200px;
                        right: 200px;*/

                        background: grey;
                        height: 500px;
                }
                .right{
                        background: green;       
                        float: right;
                        width: 200px;
                        height: 100%;
                }三、上中下三行,头部200px高,底部200px高,中间自适应占满

利用div+css实现几种经典布局的详解,样式以及代码!-3.jpg html代码
<div class="container">
                <div class="top"></div>
                <div class="center"></div>
                <div class="bottom"></div>
        </div>css代码
*{
                        margin:0px;
                        padding: 0px;
                }
                .container{
                        background: yellow;
                        width: 100%;
                }
                .top{
                        background: red;
                        width: 100%;
                        height: 200px;
                        position: absolute;
                        top: 0;
                }
                .center{
                        width: 100%;
                        background: grey;
                        position: absolute;
                        top: 200px;
                        bottom: 200px;
                }
                .bottom{
                        width: 100%;
                        background: green;       
                        height: 200px;
                        position: absolute;
                        bottom: 0;这里用到了绝对定位,把上面的和下面的分别设置top:0,bottom:0 固定在上下两端,中间的距离上下200px即可
四、上下两部分,底下这个固定高度200px,如果上面的内容少,那么这个footer就固定在底部,如果内容多,就把footer挤着往下走

利用div+css实现几种经典布局的详解,样式以及代码!-4.jpg html代码
<div class="container">
                <div class="content"></div>
                <div class="footer"></div>
        
        </div>css代码
*{
                        margin: 0px;
                        padding: 0px;
                }
                html{
                        height: 100%;
                }
                body{
                        min-height: 100%;
                        position: relative;
                }
                .content{
                        width: 100%;
                        background:red;
                        padding-bottom: 200px;
                }
                .footer{
                        width: 100%;
                        height: 200px;
                        background: green;
                        position: absolute;
                        bottom: 0;
                }固定footer在底部和把foorter往下挤着走都比较容易实现,但是合到一起,就不好弄了吧,其实也不难,更改content的高度,就可以看到效果了


必要的设置就是html要有高度,body的最小高度要有,footer是依照body进行绝对定位的,
了解了这些就不难实现了
分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

  • 主题

    5

  • 帖子

    79

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆