博客列表 >圣杯布局--2018年03月29日

圣杯布局--2018年03月29日

彪小A的博客
彪小A的博客原创
2018年03月29日 09:49:29662浏览
<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .header,.footer{
            color: white;
            /*宽度自适应*/
 width: 100%;
            height: 60px;
            background-color: lightgray;
        }
        .footer{
            clear: both;
        }
        .content{
            max-width: 1000px;
            min-height: 100%;
            background-color: gray;
            margin: auto;
            text-align: center;
            line-height: 60px;
        }
        .container{
            margin: auto;
            width: 600px;
            background-color: yellow;
            overflow: hidden;
            padding: 0 200px;
        }
        .container .left,.right{
            float: left;
            width: 200px;
            height: 650px;
            position: relative;
        }
        .container .left{
            left: -200px;
            margin-left: -100%;
            background-color: lightskyblue;
        }
        .container .right{
            right: -200px;
            margin-left: -200px;
            background-color: lightgreen;
        }
        .container .main{
            width: 100%;
            height: 650px;
            float: left;
            background-color: wheat;

        }

    </style>
    <meta charset="UTF-8">
    <title>圣杯三列</title>
</head>
<body>
<!--头部-->
<div class="header">
    <div class="content">网站头部</div>
</div>


<!--主体-->
<!--1、创建一个大的盒子-->
<div class="container">
    <!--按照顺序创建盒子-->
    <!--中间-->
 <div class="main">中间</div>
    <!--左侧-->
 <div class="left">左侧</div>
    <!--右侧-->
 <div class="right">右侧</div>
</div>



<!--底部-->
<div class="footer">
    <div class="content">网站底部</div>
</div>
</body>
</html>

<!--双飞翼布局
1、创建一个大的盒子 必须设置宽度
2、按照中间、左边、右边的顺序创建三个区块
3、设置三个区块的属性:3.1 三个区块都设置为左浮动(float:left) 3.2 中间部分宽度必须为100% 3.3 设置后左侧、右侧会被挤到下面中间的下面,按照以下设置恢复到正常位置设置左侧区块的margin-left:-100% 右侧区块的margin-left:-200px
-->

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