双飞翼布局和圣杯布局的运用 - 我的作业

本节课学习了双飞翼布局和圣杯布局的基础知识，知识点较多，应该多写多记。
实例
<style>
body,
h1,
ul,
p {
    margin: 0;
    padding: 0;
}


.header {

    background-color: black;
}



.header .content {
    width: 90%;
    background-color: black;
    margin: 0 auto;
    height: 60px;
}



.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;
    text-align: center;
    line-height: 60px;
    color: white;
    padding: 0 15px;
    text-decoration: none;
}

.header .content .nav .item a:hover {
    background-color: red;
    font-size: 1.1rem;
}




.slider {
    width: 90%;
    margin: 0 auto;
}

.slider img {
    width: 100%;
}




.left {
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #555555;
}

.left h1 {
    color: #555;
    font-size: 1.3rem;
    border-bottom: 1px solid #555555;
}

.left ul {
    margin-top: 20px;
    padding: 0;
}

.left ul li,
.right ul li {
    list-style: none;
    padding: 10px 20px;
}

.left ul li a,
.right ul li a {
    text-decoration: none;
    color: #555555;
}

.left ul li a:hover {
    color: coral;
    text-decoration: underline;
    cursor: pointer;
}



.container {
    width: 90%;
    background-color: lightgray;
    margin: 5px auto;
}



.left {
    width: 200px;
    min-height: 800px;
    background-color: lightgreen;
}

.right {
    width: 200px;
    min-height: 800px;
    background-color: lightcoral;
}

.main {
    width: 100%;
    background-color: lightblue;
    min-height: 800px;
}

.main h2 {
    text-align: center;
}

.main .list {
    width: 98%;
    MARGIN: 0 AUTO;
    box-sizing: border-box;
}

.main .list .shop {
    padding: 5px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
}

.main .list .shop:hover {
    box-shadow: 5px 5px 5px rgba(72, 69, 69, 0.3);
}

.main .list .shop .shopname {
    text-align: center;
    height: 30px;
    line-height: 30px;
    color: #555;
}

.main .list .shop .shopname:hover {
    text-decoration: underline;
}

.main .list .shop p,
.main .list .shop .price {
    text-align: center;
    height: 30px;
    padding: 5px 15px;
}

.main .list .shop p {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main .list .shop .price small {
    float: left;
    line-height: 30px;
}

.main .list .shop .price span {
    float: right;
    line-height: 30px;
    color: red;
}

.main .list .item {
    width: 25%;
    float: left;
    box-sizing: border-box;
    padding: 5px;
}

.main .list .item a {
    text-decoration: none;
    color: #999;
}

.main .item img {
    width: 100%;
    box-sizing: border-box;
}



.main,
.left,
.right {
    float: left;
}

.container {
    overflow: hidden;
}



.main {
    box-sizing: border-box;
    padding-left: 200px;
    padding-right: 200px;
}

.left {
    margin-left: -100%;
}

.right {
    margin-left: -200px;
    padding: 10px;
    box-sizing: border-box;
}

.right .item {
    list-style: none;
}

.right .item:nth-of-type(1) {
    color: red;
}

.right .item:nth-of-type(2) {
    color: yellow;
}


.footer .content {
    width: 90%;
    background-color: #444444;
    height: 60px;
    margin: 0 auto;
}

.footer .content p {
    text-align: center;
    line-height: 60px;
}

.footer .content p a {
    color: #999999;
    text-decoration: none;
}

.footer .content p a:hover {
    color: white;
}

</style>
   <!--头部-->
    <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="slider">
        <img src="static/images/timg.jpg" alt="">
    </div>
    <!--主体-->
    <div class="container">
        <!--    圣杯DOM结构-->
        <!--    主体-->
        <div class="main">
            <h2>网站模板</h2>
            <div class="list">
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://cdn.taomizhan.com/uploads/181203/1-1Q2032343415H.jpg" alt="">

                            <div class="shopname">商品1</div>
                            <div class="price">
                                <small>原价：<del>¥100</del></small>
                                <span>特价：¥50</span>
                            </div>
                            <p>这是一条凑字数的产品描述呀呀呀呀</p>
                        </div>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://cdn.taomizhan.com/uploads/181203/1-1Q2032343415H.jpg" alt="">

                            <div class="shopname">商品1</div>
                            <div class="price">
                                <small>原价：<del>¥100</del></small>
                                <span>特价：¥50</span>
                            </div>
                            <p>这是一条凑字数的产品描述呀呀呀呀</p>
                        </div>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://cdn.taomizhan.com/uploads/181203/1-1Q2032343415H.jpg" alt="">

                            <div class="shopname">商品1</div>
                            <div class="price">
                                <small>原价：<del>¥100</del></small>
                                <span>特价：¥50</span>
                            </div>
                            <p>这是一条凑字数的产品描述呀呀呀呀</p>
                        </div>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://cdn.taomizhan.com/uploads/181203/1-1Q2032343415H.jpg" alt="">

                            <div class="shopname">商品1</div>
                            <div class="price">
                                <small>原价：<del>¥100</del></small>
                                <span>特价：¥50</span>
                            </div>
                            <p>这是一条凑字数的产品描述呀呀呀呀</p>
                        </div>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://cdn.taomizhan.com/uploads/181203/1-1Q2032343415H.jpg" alt="">

                            <div class="shopname">商品1</div>
                            <div class="price">
                                <small>原价：<del>¥100</del></small>
                                <span>特价：¥50</span>
                            </div>
                            <p>这是一条凑字数的产品描述呀呀呀呀</p>
                        </div>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://cdn.taomizhan.com/uploads/181203/1-1Q2032343415H.jpg" alt="">

                            <div class="shopname">商品1</div>
                            <div class="price">
                                <small>原价：<del>¥100</del></small>
                                <span>特价：¥50</span>
                            </div>
                            <p>这是一条凑字数的产品描述呀呀呀呀</p>
                        </div>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://cdn.taomizhan.com/uploads/181203/1-1Q2032343415H.jpg" alt="">

                            <div class="shopname">商品1</div>
                            <div class="price">
                                <small>原价：<del>¥100</del></small>
                                <span>特价：¥50</span>
                            </div>
                            <p>这是一条凑字数的产品描述呀呀呀呀</p>
                        </div>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://cdn.taomizhan.com/uploads/181203/1-1Q2032343415H.jpg" alt="">

                            <div class="shopname">商品1</div>
                            <div class="price">
                                <small>原价：<del>¥100</del></small>
                                <span>特价：¥50</span>
                            </div>
                            <p>这是一条凑字数的产品描述呀呀呀呀</p>
                        </div>
                    </a>
                </div>

            </div>
        </div>

        <!--    左侧边栏-->
        <div class="left">
            <h2>商品列表</h2>
            <ul>
                <li><a href="">小程序</a></li>
                <li><a href="">网站模板</a></li>

                <li><a href="">微信开发</a></li>
                <li><a href="">网站运营</a></li>

            </ul>
        </div>

        <!--    右侧边栏-->
        <div class="right">
            <h2>热门模板</h2>
            <ul>
                <li class="item">1、wordpress模板</li>
                <li class="item">2、Typecho模板</li>
                <li class="item">3、织梦模板</li>
                <li class="item">4、帝国CMS模板</li>
                <li class="item">5、小程序源码</li>
            </ul>
        </div>

    </div>

    <!--底部-->
    <div class="footer">
        <!--    底部内容区-->
        <div class="content">
            <p>
                <a href="">© php中文网版本所有</a>   |  
                <a href="">0551-666***999</a>   |  
                <a href="">皖ICP备19***666</a>
            </p>
        </div>
    </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
学习两个布局的感受：看起来简单，自己写起来要人命，多多练习才行。
Correction status：qualified

Teacher's comments：感觉写起来好难, 根本原因, 还是对原理不理解, 想通了, 写起来飞快, 像这样的布局,五年前,我几乎每周都要写, 所以现在写起来根本不需要思考, 说到底, 还是写得少,也思考的不够