运用圣杯布局网站首页的简单测试 -- 2019年09月05日 - 作业

首页 > 博客列表 > 运用圣杯布局网站首页的简单测试 -- 2019年09月05日

博主信息

博文 10

粉丝 0

访问量 6335

专题推荐

更多>

实例

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

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/style.css">
    <title>布局案例: 通用的圣杯布局</title>
</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="slider">
        <img src="static/images/timg.jpg" alt="">
    </div>
    <!--主体-->
    <div class="container">
        <!--    圣杯DOM结构-->
        <!--    主体-->
        <div class="main">
            <h1>商品展示区</h1>
            <div class="list">
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt="">
                            <div class="price">
                                <small>原价：<del>¥1000</del></small>
                                <span>特价：¥680</span>
                            </div>
                            <p><button>立即抢购</button></p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="list">
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt="">
                            <div class="price">
                                <small>原价：<del>¥1000</del></small>
                                <span>特价：¥680</span>
                            </div>
                            <p><button>立即抢购</button></p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="list">
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt="">
                            <div class="price">
                                <small>原价：<del>¥1000</del></small>
                                <span>特价：¥680</span>
                            </div>
                            <p><button>立即抢购</button></p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="list">
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt="">
                            <div class="price">
                                <small>原价：<del>¥1000</del></small>
                                <span>特价：¥680</span>
                            </div>
                            <p><button>立即抢购</button></p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="list">
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt="">
                            <div class="price">
                                <small>原价：<del>¥1000</del></small>
                                <span>特价：¥680</span>
                            </div>
                            <p><button>立即抢购</button></p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="list">
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt="">
                            <div class="price">
                                <small>原价：<del>¥1000</del></small>
                                <span>特价：¥680</span>
                            </div>
                            <p><button>立即抢购</button></p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="list">
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt="">
                            <div class="price">
                                <small>原价：<del>¥1000</del></small>
                                <span>特价：¥680</span>
                            </div>
                            <p><button>立即抢购</button></p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="list">
                <div class="item">
                    <a href="">
                        <div class="shop">
                            <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt="">
                            <div class="price">
                                <small>原价：<del>¥1000</del></small>
                                <span>特价：¥680</span>
                            </div>
                            <p><button>立即抢购</button></p>
                        </div>
                    </a>
                </div>
            </div>

        </div>

        <!--    左侧边栏-->
        <div class="left">
            <h1>商品列表</h1>
            <ul>
                <li><a href="">我的商品1</a></li>
                <li><a href="">我的商品2</a></li>
                <li><a href="">我的商品3</a></li>
                <li><a href="">我的商品4</a></li>
                <li><a href="">我的商品5</a></li>
                <li><a href="">我的商品6</a></li>
                <li><a href="">我的商品7</a></li>
                <li><a href="">我的商品8</a></li>
                <li><a href="">我的商品9</a></li>
                <li><a href="">我的商品10</a></li>
            </ul>
        </div>

        <!--    右侧边栏-->
        <div class="right">
            <h1>最新新闻</h1>
            <ul>
                <li><a href="">行业新闻1</a></li>
                <li><a href="">行业新闻2</a></li>
                <li><a href="">行业新闻3</a></li>
                <li><a href="">行业新闻4</a></li>
                <li><a href="">行业新闻5</a></li>
                <li><a href="">行业新闻6</a></li>
                <li><a href="">行业新闻7</a></li>
                <li><a href="">行业新闻8</a></li>
                <li><a href="">行业新闻9</a></li>
                <li><a href="">行业新闻10</a></li>
            </ul>
        </div>

    </div>

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

</html>

运行实例 »

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

实例

body,
h1,
p {
    /*border: 1px solid red;*/
    margin: 0;
}


/*头部样式 开始*/

.header {
    /*background-color: lightgray;*/
    background-color: black;
}


/*头部内容区*/

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


/*头部中的导航*/

.header .content .nav {
    /*清空ul默认样式*/
    /*margin-top: 0;*/
    /*margin-bottom: 0;*/
    /*padding-left: 0;*/
    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;
    /*去掉a标签的默认下划线*/
    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 {
    list-style: none;
    padding: 10px 20px;
}

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

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


/* 右侧排行版 */

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

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

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

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

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

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


/*主体使用圣杯来实现*/


/*第一步: 设置主体的宽度*/

.container {
    width: 90%;
    /* background-color: lightgray; */
    margin: 5px auto;
    /*border: 5px dashed black;*/
}


/*第二步: 将中间内容区, 左侧和右侧的宽高进行设置*/

.left {
    width: 200px;
    min-height: 880px;
    /* background-color: lightgreen; */
}

.right {
    width: 200px;
    min-height: 880px;
    /* background-color: lightcoral; */
}

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


/*第三步: 将主体,左, 右全部浮动*/

.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;
}


/*页面的底部样式开始*/

.footer {
    /*background-color: lightgray;*/
}

.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;
}


/* 商品展示区 */

.main {
    box-sizing: border-box;
    border: 1px solid #555555;
}

.main h1 {
    color: #555;
    padding: 5px 5px;
    margin: 5px 5px;
    border-bottom: 1px solid #555555;
}

.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;
}

运行实例 »

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

这个圣杯布局使用起来十分方便,以后可以轻松运用到实战中了~~

批改状态：合格

老师批语：这个案例写完, 你的css水平又上了一个层次

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

mysql

2019-09-24 22:17:27