布局方案（双飞翼）2019-07-08

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <link rel="stylesheet" href="static/css/style6.css">
</head>
<body>
<!--头部-->
<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>
            <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-65358899</a>  | 
                <a href="">皖ICP备18***333-1</a>
            </p>
        </div>
    </div>
</body>
</html>

实例

.header{
    background-color: gray;
}
.header .content{
    width: 1000px;
    height: 60px;
    background-color: black;
    margin: 0 auto;
}
.header .content .nav{
    margin: 0;
    padding: 0;
}
.header .content .nav .item{
    list-style: none;
 }
.header .content .nav .item a{
    float: left;
    min-width: 80px;
    min-height: 60px;
    line-height: 60px;
    color: white;
    text-decoration: none;
    padding: 0 15px;
}
.header .content .nav .item a:hover{
    background-color: red;
    font-size: 1.1rem;
}
/*将主体部分使用双飞翼布局三列布局*/
/*主体 ：宽度100% 并且要浮动*/
/*左边栏 ：浮动*/
/*右边栏：浮动*/

.container{
    width: 1000px;
    min-height: 800px;
    margin: 30px auto;
    background-color: lawngreen;
    overflow: hidden;
}
.wrap{
    width: inherit;
    height: 800px;
    background-color: lightcyan;
}
.left{
    width: 200px;
    height: 800px;
    background-color: lightskyblue;
}
.right{
    width: 200px;
    height: 800px;
    background-color: lightcoral;
}
/*全部浮动*/
.wrap,.left,.right{
    float: left;
}
.left{
    margin-left: -100%;
}
.right{
    margin-left: -200px;
 }


.main{
    margin: 0 200px;
}
.footer{
    background-color: gray;
}
.footer .content{
    width: 1000px;
    height: 60px;
    background-color: #444;
    margin: 0 auto;
}
.footer .content p{
    text-align: center;
    line-height: 60px;

}
.footer .content p a{
    color: #eee;
    text-decoration: none;
}
.footer .content a:hover{
    color: white;
}

运行实例 »

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

实例

实例

相关文章