双飞翼布局css+html

原创 2019-04-30 11:24:52 276
摘要:<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <link rel="stylesheet" href="style.css">    <title

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="style.css">

    <title>双飞翼布局</title>

    <style>

        .container{

            margin: 0 auto;

            width: 1000px;

        }

        .wrap{

            width: inherit;


        }

        .main{

            margin: 0 310px 0 210px;

            border: 1px solid #dedede;

            min-height: 600px;

        }

        .left{

            width: 200px;

            margin-left: -100%;

            background-color: lightcoral;

        }

        .right{

            width: 300px;

            margin-left: -300px;

            background-color: aqua;

        }

        .wrap,.left,.right{

            float: left;

            min-height: 600px;

        }

    </style>

</head>

<body>

<div>

    <div>

        <div>中间</div>

    </div>

    <div>

        左侧

    </div>

    <div>右侧</div>

</div>

</body>

</html>


批改老师:查无此人批改时间:2019-05-05 09:37:36
老师总结:完成的不错。刚接触编程会比较辛苦,要坚持。继续加油。

发布手记

热门词条