博客列表 >双飞翼布局案例

双飞翼布局案例

桃儿的博客
桃儿的博客原创
2019年04月30日 15:52:41722浏览

思路:必须先创建中间主体区块,确保它优先被渲染出来, 现创建左右二列

中间内容区需要创建一个父级容器进行包裹

.header 头部

.container 主体 : .wrap>.main主体内容       .left    .right

.footer 底部

假如 .container宽度1000px ,.wrap宽度是继承,.wrap占整个容器宽度,.left和.right都200px.

.wrap和.left和.right全部左浮动。那么container需要清除浮动(overflow:hidden).

.left:margin-left:-100%,移动到左边显示。

.right:margin-left:-200px,移动到右边显示。

把.main主体内容要想显示出来:

.main设置padding-left:200px;      padding-right:200px

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<link rel="stylesheet" href="static/css/style1.css">-->
    <style>
        /******************* 头部样式开始 ******************/
        .header{
            background-color:lightgrey;
        }
        .header .content{
            width:1000px;
            height: 60px;
            background-color: black;
            margin:0 auto;
        }
        /*设置.nav目的是清空导航UL元素的默认样式*/
        .header .content .nav{
            margin-top:0;
            margin-bottom:0;
            padding-left: 0;
        }
        .header .content .nav .item{
            list-style:none;
        }
        .header .content .nav .item a{
            float:left;
            text-decoration:none;
            min-width:80px;
            min-height: 60px;
            line-height: 60px;
            color:white;
            padding:0 50px;
            text-align:center;
        }
        .header .content .nav .item a:hover{
            background-color: lightsteelblue;
            font-size:1.5rem;
            color:red;
        }
        /******************* 头部样式结束 ******************/

        /******************* 主体样式开始 ******************/
        .container{
            width:1000px;
            margin:5px auto;
            background-color:lightgray;
            overflow:hidden;
        }
        .container .wrap{
            width:inherit;
            min-height: 800px;
            background-color: aqua;
        }
        .container .left{
            width:200px;
            min-height: 800px;
            background-color: lightgreen;
        }
        .container .right{
            width:200px;
            min-height: 800px;
            background-color: lightsteelblue;
        }
        .wrap , .left ,.right{
            float:left;
        }
        .left{
            margin-left:-100%;
        }
        .right{
            margin-left:-200px;
        }
        .main{
            padding-left: 200px;
            padding-right: 200px;
        }

        /******************* 主体样式结束 ******************/

        /******************* 底部样式开始 ******************/
        .footer {
            background-color: lightgray;
        }
        .footer .content{
            width:1000px;
            height: 60px;
            background-color:#444;
            margin:0 auto;
        }
        .footer .content p{
            text-align: center;
            line-height: 60px;
        }
        .footer .content a{
            text-decoration:none;
            color:lightgrey;
        }
        .footer .content a:hover{
            color:white;
        }
        /******************* 底部样式结束 ******************/
    </style>
    <title>双飞翼布局案例</title>
</head>
<body>
<!--头部-->
<!--.header>.content>ul.nav>li.item*4>a-->
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="">首页</a></li>
            <li class="item"><a href="">公司新闻</a></li>
            <li class="item"><a href="">最新产品</a></li>
            <li class="item"><a href="">联系我们</a></li>
        </ul>
    </div>
</div>
<!--中间主体-->
<div class="container">
    <!--思路:必须先创建中间主体区块,确保它优先被渲染出来, 现创建左右二列-->
    <!--中间内容区需要创建一个父级容器进行包裹-->
    <div class="wrap">
        <div class="main">主体部分</div>
    </div>
    <div class="left">左侧部分</div>
    <div class="right">右侧部分</div>
</div>
<!--底部-->
<div class="footer">
    <div class="content">
        <p>
            <a href="">© PHP中文网版权所有</a>  | 
            <a href="">0551-88889999</a>  | 
            <a href="">皖ICP2016098801-1</a>
        </p>

    </div>
</div>
</body>
</html>

运行实例 »

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


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