博客列表 >第8期0904作业

第8期0904作业

宏利的博客
宏利的博客原创
2019年09月04日 22:45:34507浏览
  • 1. 实例演示如何消除子元素浮动造成父元素高度折叠的影响

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/public/static/index/css/demo1.css?a={:time()}">
</head>
<style>
    .div {
        border: solid 2px red;
        /* 使用overflow:hidden 来消除元素浮动对父类的影响 */
        overflow: hidden;
        padding: 20px;
    }
    
    .div>div {
        float: left;
        height: 500px;
        width: 33.3%;
    }
    
    .left {
        background: lightseagreen;
    }
    
    .content {
        background: lightpink;
    }
    
    .right {
        background: limegreen;
    }
</style>

<body>

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

    </div>





</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

  • 2. 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)

  • 2. 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)

  • 相对定位

  • 实例

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="/public/static/index/css/demo1.css?a={:time()}">
    </head>
    <style>
        .main {
            border: solid 2px red;
            /* 使用overflow:hidden 来消除元素浮动对父类的影响 */
            overflow: hidden;
            height: 800px;
        }
        
        .main>div {
            height: 800px;
            width: 33.33%;
            text-align: center;
            line-height: 800px;
        }
        
        .left {
            background: lightseagreen;
        }
        
        .content {
            background: lightpink;
            position: relative;
            top: -800px;
            left: 33.33%;
        }
        
        .right {
            background: limegreen;
            position: relative;
            top: -1600px;
            left: 66.66%;
        }
    </style>
    
    <body>
    
        <div class="main">
            <div class="left"> 左版块</div>
            <div class="content">内容区</div>
            <div class="right">右版块</div>
    
        </div>
    
    
    
    
    
    </body>
    
    </html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

  • 绝对定位 实例

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="/public/static/index/css/demo1.css?a={:time()}">
    </head>
    <style>
        .main {
            border: solid 2px red;
            /* 使用overflow:hidden 来消除元素浮动对父类的影响 */
            height: 800px;
            margin: 0;
            padding: 0;
            position: relative;
        }
        
        body {
            margin: 0;
            padding: 0;
        }
        
        .main>div {
            height: 800px;
            width: 33.33%;
            text-align: center;
            line-height: 800px;
        }
        
        .left {
            background: lightseagreen;
        }
        
        .content {
            background: lightpink;
            position: absolute;
            top: 0px;
            left: 33.33%;
        }
        
        .right {
            background: limegreen;
            position: absolute;
            top: 0px;
            left: 66.66%;
        }
    </style>
    
    <body>
    
        <div class="main">
            <div class="left"> 左版块</div>
            <div class="content">内容区</div>
            <div class="right">右版块</div>
    
        </div>
    
    
    
    
    
    </body>
    
    </html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议