博客列表 >html和css基础知识(圣杯布局练习)—2018年8月20日 12:43:49

html和css基础知识(圣杯布局练习)—2018年8月20日 12:43:49

Hi的博客
Hi的博客原创
2018年08月20日 12:47:11737浏览

布局在html中是不不可少的,圣杯是经典的布局。

作用在于主体优先渲染,他和双飞翼布局最大的区别在于。他指定主体内容的宽度,然后填充内部元素

左和右用相对定位来指定位置。以下是我的代码。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 100%;
            height: 100px;
            background: powderblue;

        }
        .footer{
            width: 100%;
            height: 100px;
            background: powderblue;

        }
        .content{
            width: 1000px;
            min-height: 100%;
            margin: 0 auto;
            background: #0388f1;
            text-align: center;
            line-height: 100px;
        }
        .container{
            width: 800px;
            background: #39ff1b;
            margin: auto;
            overflow: hidden;
            padding: 0 100px;
            text-align: center;
        }
        .main{
            width: 100%;
            min-height: 800px;
            background: #333333;
            float: left;
        }
        .left{
            width: 100px;
            min-height: 800px;
            background:pink;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -100px;
        }
        .right{
            width: 100px;
            min-height: 800px;
            background: powderblue;
            float: left;
            margin-left: -100px;
            position: relative;
            right: -100px;
        }
        ul{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            display: block;
            float: left;
            margin-left: 100px;

        }
        a{
            text-decoration: none;
            color: white;
        }
        a:llink{
            color: white;
        }
        a:visited{
            color: white;
        }
        .maid1{
            width: 100%;
            height: 580px;
            background:red;
            margin-bottom: 10px;
        }
        .zuo{
            width: 300px;
            height: 400px;
            background: lime;
            float: left;
            margin-top: 50px;
            margin-left: 10px
        }
        .you{
            width: 480px;
            height: 580px;
            float: right;
            margin-top: 50px;
            line-height: 80px;
        }
        .you li{
            display: block;
            min-height: 100%;
            width: 480px;
            border-bottom: 2px dotted black;
            text-align: left;
        }
        .maid2{
            width:100%;
            height: 210px;
            background: aquamarine;
        }
        .z1{
              width: 150px;
              height: 150px;
              margin: 0 20px;
              margin-top: 47px;
              float: left;
              background: #efefef;
          }
        .z2{
            width: 150px;
            height: 150px;
            margin: 5px 20px;
            background: #efefef;
            float: left;
        }
        .left1 {
            width: 100%;
            height: 395px;
            background: #ffe80e;
        }
        .left2{
            width: 100%;
            height: 395px;
            background: beige;
            margin-top: 10px;
        }
        .right1 {
            width: 100%;
            height: 395px;
            background: #ffe80e;
            margin-bottom: 10px;
        }
        .right2{
            width: 100%;
            height: 395px;
            background: beige;
        }


    </style>
</head>
<body>
<div class="header">
    <div class="content">
        <ul>
            <li><a href="test">首页</a></li>
            <li><a href="test">新闻</a></li>
            <li><a href="test">娱乐</a></li>
            <li><a href="test">音乐</a></li>
            <li><a href="test">关于我们</a></li>
            <li><a href="test">联系我们</a></li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="main">
        <div class="maid1">
            <div class="zuo"></div>
            <div class="you">
                <ul>
                    <li><a href="test">1.文章</a></li>
                    <li><a href="test">2.文章</a></li>
                    <li><a href="test">3.文章</a></li>
                    <li><a href="test">4.文章</a></li>
                    <li><a href="test">5.文章</a></li>
                    <li><a href="test">6.文章</a></li>
                </ul>
            </div>
        </div>
        <div class="maid2">
            <div class="z1"></div>
            <div class="z2"></div>
            <div class="z2"></div>
            <div class="z2"></div>

        </div>
    </div>
    <div class="left">
        <div class="left1"></div>
        <div class="left2"></div>
    </div>
    <div class="right">
        <div class="right1"></div>
        <div class="right2"></div>
    </div>
</div>
<div class="footer">
    <div class="content">
        <ul>
            <li><a href="test">首页</a></li>
            <li><a href="test">新闻</a></li>
            <li><a href="test">娱乐</a></li>
            <li><a href="test">音乐</a></li>
            <li><a href="test">关于我们</a></li>
            <li><a href="test">联系我们</a></li>
        </ul>
    </div>
</div>
</body>
</html>

运行实例 »

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


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