search

博客列表 >9.5作业-圣杯布局小案例

9.5作业-圣杯布局小案例

lee的学习记录博客
lee的学习记录博客原创
2019年09月06日 21:51:59843浏览

采用圣杯布局的方法，制作首页的一个小案例

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局首页小案例</title>
    <style>
        /* 样式初始化 */
        
        * {
            margin: 0;
            padding: 0
        }
        
        img {
            border: 0;
            display: block
        }
        
        ul,
        li {
            list-style: none;
        }
        
        a {
            outline: none;
        }
        
        a:link,
        a:visited {
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: none;
        }
        /* 伪类清浮动来解决父级塌陷的问题  */
        
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        /* 案例样式开始 */
        
        .header {
            background: #333;
            /* overflow: hidden;这里我注释掉了，因为我想尝试使用一下伪类清浮动的方法去解决父级塌陷的问题 */
        }
        
        .nav {
            width: 90%;
            background: antiquewhite;
            margin: 0 auto;
        }
        
        .logo {
            width: 10%;
            float: left;
            /* text-align: center; */
        }
        
        .logo a {
            font-size: 20px;
            line-height: 30px;
            color: rgb(228, 231, 12);
        }
        
        .navul {
            width: 90%;
            float: left;
        }
        
        .navul a {
            width: auto;
            padding: 0 15px;
            height: 30px;
            line-height: 30px;
            color: aliceblue;
            font-size: 15px;
            float: left;
        }
        
        .navul a:hover {
            background: bisque;
            color: rgb(12, 9, 240);
        }
        
        .slider {
            width: 90%;
            margin: 10px auto;
        }
        
        .slider img {
            width: 100%;
        }
        /* 圣杯布局样式 */
        
        .content {
            width: 90%;
            margin: 10px auto;
        }
        
        .main {
            width: 100%;
            min-height: 500px;
            float: left;
            box-sizing: border-box;
            padding-left: 210px;
            /* 使用210px的原因是不想紧贴在左右两边上，空个10px左右的位置 */
            padding-right: 210px;
            background: bisque;
        }
        
        .left {
            width: 200px;
            min-height: 646px;
            float: left;
            margin-left: -100%;
            background: rgb(228, 129, 7);
            box-sizing: border-box;
            padding: 0 10px;
        }
        
        .right {
            width: 200px;
            min-height: 646px;
            float: left;
            margin-left: -200px;
            background: rgb(7, 176, 228);
            box-sizing: border-box;
            padding: 0 10px;
        }
        
        .footer {
            background: #333;
        }
        
        .footer p {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        
        .footer p a {
            color: #eee;
            width: auto;
            padding-right: 15px;
        }
        
        .footer p a:after {
            content: "|";
            display: inline-block;
            width: 1px;
            position: relative;
            left: 10px;
            top: -2px;
            color: #999;
            font-size: 12px;
        }
        
        .footer p a:last-child:after {
            display: none;
        }
        
        .main h3 a {
            font-size: 24px;
            text-align: center;
            display: block;
            width: 100%;
            line-height: 60px;
        }
        
        .main li {
            width: 20%;
            margin: 2.5%;
            box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
            float: left;
            padding: 0 0 10px 0;
        }
        
        .main_cp {
            width: 100%;
            text-align: center;
        }
        
        .main_cp img {
            width: 100%;
        }
        
        .main_cp a {
            color: rgb(22, 22, 22);
            font-size: 16px;
            line-height: 25px;
        }
        
        .main_price {
            float: left;
            color: rgb(114, 6, 6);
            font-size: 16px;
            padding-left: 10px;
        }
        
        .buy {
            float: right;
            font-size: 16px;
            padding: 0 10px;
            border: 1px solid #eee;
            border-radius: 5px;
            background: azure;
            margin-right: 10px;
        }
        
        .buy a {
            color: #000;
        }
        
        .left h3 a {
            font-size: 24px;
            display: block;
            width: 100%;
            line-height: 60px;
        }
        
        .left ul li a {
            width: auto;
            line-height: 30px;
        }
        
        .right h3 a {
            font-size: 24px;
            display: block;
            width: 100%;
            line-height: 60px;
        }
        
        .right ul li a {
            width: auto;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <!-- 头部内容 -->
    <div class="header clearfix">
        <div class="nav">
            <div class="logo"><a>LOGO</a></div>
            <ul class="navul">
                <li><a>首页</a></li>
                <li><a>产品介绍</a></li>
                <li><a>新闻内容</a></li>
                <li><a>关于我们</a></li>
                <li><a>联系我们</a></li>
            </ul>
        </div>
    </div>
    <!-- 幻灯内容 -->
    <div class="slider">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567706007496&di=d32991ecd3e4c383b85e1410ac7008e2&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01084f5951fc51a8012193a3eddb28.jpg" alt="">
    </div>

    <!-- 网站内容 采用圣杯3栏布局，中间main部分自适应并优先展示-->
    <div class="content clearfix">
        <div class="main">
            <h3><a href="">商品展示</a></h3>
            <ul>
                <li>
                    <div class="main_cp">
                        <a href="/"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567780449421&di=ccc49d8075a13b67e078d76e4b09b5b3&imgtype=0&src=http%3A%2F%2Fn1.itc.cn%2Fimg8%2Fwb%2Frecom%2F2016%2F10%2F18%2F147677450793628401.JPEG"
                                alt="">这是一个商品名称</a>
                    </div>
                    <span class="main_price">价格：100</span>
                    <span class="buy"><a href="/">点击***</a></span>
                </li>
                <li>
                    <div class="main_cp">
                        <a href="/"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567780449421&di=ccc49d8075a13b67e078d76e4b09b5b3&imgtype=0&src=http%3A%2F%2Fn1.itc.cn%2Fimg8%2Fwb%2Frecom%2F2016%2F10%2F18%2F147677450793628401.JPEG"
                                alt="">这是一个商品名称</a>
                    </div>
                    <span class="main_price">价格：100</span>
                    <span class="buy"><a href="/">点击***</a></span>
                </li>
                <li>
                    <div class="main_cp">
                        <a href="/"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567780449421&di=ccc49d8075a13b67e078d76e4b09b5b3&imgtype=0&src=http%3A%2F%2Fn1.itc.cn%2Fimg8%2Fwb%2Frecom%2F2016%2F10%2F18%2F147677450793628401.JPEG"
                                alt="">这是一个商品名称</a>
                    </div>
                    <span class="main_price">价格：100</span>
                    <span class="buy"><a href="/">点击***</a></span>
                </li>
                <li>
                    <div class="main_cp">
                        <a href="/"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567780449421&di=ccc49d8075a13b67e078d76e4b09b5b3&imgtype=0&src=http%3A%2F%2Fn1.itc.cn%2Fimg8%2Fwb%2Frecom%2F2016%2F10%2F18%2F147677450793628401.JPEG"
                                alt="">这是一个商品名称</a>
                    </div>
                    <span class="main_price">价格：100</span>
                    <span class="buy"><a href="/">点击***</a></span>
                </li>
                <li>
                    <div class="main_cp">
                        <a href="/"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567780449421&di=ccc49d8075a13b67e078d76e4b09b5b3&imgtype=0&src=http%3A%2F%2Fn1.itc.cn%2Fimg8%2Fwb%2Frecom%2F2016%2F10%2F18%2F147677450793628401.JPEG"
                                alt="">这是一个商品名称</a>
                    </div>
                    <span class="main_price">价格：100</span>
                    <span class="buy"><a href="/">点击***</a></span>
                </li>
                <li>
                    <div class="main_cp">
                        <a href="/"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567780449421&di=ccc49d8075a13b67e078d76e4b09b5b3&imgtype=0&src=http%3A%2F%2Fn1.itc.cn%2Fimg8%2Fwb%2Frecom%2F2016%2F10%2F18%2F147677450793628401.JPEG"
                                alt="">这是一个商品名称</a>
                    </div>
                    <span class="main_price">价格：100</span>
                    <span class="buy"><a href="/">点击***</a></span>
                </li>
            </ul>
        </div>
        <div class="left">
            <h3><a href="">商品分类</a></h3>
            <ul>
                <li>
                    <a>商品类型1</a>
                </li>
                <li>
                    <a>商品类型2</a>
                </li>
                <li>
                    <a>商品类型3</a>
                </li>
                <li>
                    <a>商品类型4</a>
                </li>
                <li>
                    <a>商品类型5</a>
                </li>
            </ul>
        </div>
        <div class="right">
            <h3><a href="">推荐商品</a></h3>
            <ul>
                <li>
                    <a>商品1</a>
                </li>
                <li>
                    <a>商品2</a>
                </li>
                <li>
                    <a>商品3</a>
                </li>
                <li>
                    <a>商品4</a>
                </li>
                <li>
                    <a>商品5</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 底部内容 -->
    <div class="footer">
        <p>
            <a href="">© php中文网版本所有</a>
            <a href="">0551-666***999</a>
            <a href="">皖ICP备19***666</a>
        </p>
    </div>
</body>

</html>

运行实例 »

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


总结：

  1. 圣杯布局和双飞翼布局，在区别上，是中间区域main这个级块，外面是否再包含一个div，但是在实际的应用和页面美化需求上，很容易在main里面设置一些div，这里好像圣杯布局又变成了双飞翼布局的感觉。

  2. 布局的细节，特别是等间距布局的问题。

  3. 清浮动的作用和使用情况。简单的理解，存在父子级包含div块的时候，解决父级高端被折叠需要使用，还有浮动对齐的时候，需要使用，主要解决同级div位置的问题。

上一条：Css基础之浮动与布局（绝对定位、浮动定位实现三列布局）—2019年9月5日下一条：Css选择器对比分析（相邻选择器与兄弟选择器、nth-child()与nth-of-type()）以及padding和margin使用—2019年9月3日
作业 前端作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多