搜索
博主信息
博文 26
粉丝 0
评论 3
访问量 24599
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
有关圣杯布局-2019/9/5
西门吃雪
原创
809人浏览过

有关于样式虽然听懂了但是动手做了,又是另外一回事

效果图

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

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style5.css">
    <title>布局案例: 通用的圣杯布局</title>
</head>
<style>
    .boss {
        width: 780px;
        margin: 25px auto;
        border: solid 1px red;
        overflow: hidden;
    }
    
    .boss div {
        width: 190px;
        float: left;
        border: solid 1px gray;
    }
    
    .boss div img {
        display: block;
        width: 90%;
        margin: 10px 10px;
    }
</style>

<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">

            <div class="boss">
                <div><img src="static/images/5b6066c595298928.jpg " alt=" " /></div>
                <div><img src="static/images/5b6066c595298928.jpg" alt="" /></div>
                <div><img src="static/images/5b6066c595298928.jpg " alt=" " /></div>
                <div><img src="static/images/5b6066c595298928.jpg " alt="" /></div>
                <div><img src="static/images/5b6066c595298928.jpg " alt="" /></div>
                <div><img src="static/images/5b6066c595298928.jpg " alt=" " /></div>
                <div><img src="static/images/5b6066c595298928.jpg" alt="" /></div>
                <div><img src="static/images/5b6066c595298928.jpg " alt=" " /></div>
                <div><img src="static/images/5b6066c595298928.jpg " alt="" /></div>
                <div><img src="static/images/5b6066c595298928.jpg " alt="" /></div>
                <div><img src="static/images/5b6066c595298928.jpg " alt="" /></div>
                <div><img src="static/images/5b6066c595298928.jpg " alt="" /></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="">&copy; php中文网版本所有</a> &nbsp; | &nbsp;
                <a href="">0551-666***999</a> &nbsp; | &nbsp;
                <a href="">皖ICP备19***666</a>
            </p>
        </div>
    </div>
</body>

</html>

QQ截图20190907194720.jpg

QQ截图20190907194920.jpg  

                                                          总结

跟上老师的思维并不难,难道是动手的时候突然发现自己掌握的很少,

而且掌握的,都是之前自己特别深入去研究的一些东西。

总之对于样式怎么说呢 ,听的再多不如给一个具体的问题。然后去解决。

其他代码都是跟着老师抄的所以就不上图了只上传自己写的那部分。

只有自己动手才是自己的东西。

批改状态:合格

老师批语:布局之前建议先画个草图, 整理出一个大致的思路, 不要上来就写
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学