CSS之Div+Css布局（二）-优快云博客

本文链接：https://blog.youkuaiyun.com/lxjstudyIT/article/details/52458784

本篇复习的是div+css布局的相关属性，浮动以及溢出处理。
这里写图片描述
代码演示：

<html>
    <head>
        <title>Div+Css布局(布局相关的属性)</title>
        <meta charset="utf-8">
        <style type="text/css">
            body{
                padding:0;
                margin:0;
            }
            .div{
                width:300px;
                height:300px;
                background-color:green;
                position:relative;
                left:10px;
                top:10px;
            }
            span{
                position:absolute;
                background-color:#ff6600;
                color:#fff;
                top:-10px;
                right:0;
            }
            .fixed{
                position:fixed;
                background-color:#ff6600;
                color:#fff;
                top:100px;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <span>浏览次数:222</span>
        </div>
        <div class="fixed">
            <p>联系电话：1111111</p>
            <p>联系QQ：865591805</p>
            <p>联系地址:广东省汕尾市</p>
        </div>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
            <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
    </body>
</html>

运行结果：
这里写图片描述

代码演示：

<html>
    <head>
        <title>Div+Css布局(浮动和溢出处理)</title>
        <meta charset="utf-8">
        <style type="text/css">
            body{
                padding:0;
                margin:0;
            }
            .div{
                width:960px;
                height:600px;
                margin:0 auto;
                background-color:#f1f1f1;
            }
            .left{
                float:left;
                width:260px;
                height:460px;
                background:#ccc;
            }
            .right{
                float:right;
                width:690px;
                height:460px;
                background:#ddd;
                margin-bottom:10px;
            }
            .clear{
                clear:both;
            }
            .bottom{
                margin-top:10px;
                height:200px;
                width:960px;
                background:red;
            }
            .jianjie{
                width:260px;
                height:120px;
                background:red;
                overflow:auto;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <div class="left">
                <div class="jianjie">
                    从前山里有座庙，庙里有一个老和尚和一个小和尚。
                    从前山里有座庙，庙里有一个老和尚和一个小和尚。
                    从前山里有座庙，庙里有一个老和尚和一个小和尚。
                    从前山里有座庙，庙里有一个老和尚和一个小和尚。
                    从前山里有座庙，庙里有一个老和尚和一个小和尚。
                    从前山里有座庙，庙里有一个老和尚和一个小和尚。
                    从前山里有座庙，庙里有一个老和尚和一个小和尚。
                    从前山里有座庙，庙里有一个老和尚和一个小和尚。
                </div>
            </div>
            <div class="right"></div>
            <div class="clear"></div>
            <div class="bottom"></div>
        </div>
    </body>
</html>