浮动、固定定位应用和双飞翼、圣杯布局的应用--2018年8月17日作业

QQ在线询问代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ在线询问</title>
</head>
<body>
<div class="top"></div>
<div class="qq">
    <ul>
        <li><img src="https://thumbnail0.baidupcs.com/thumbnail/c1996a395d949f8e800b247b7842e9a1?fid=2671713914-250528-1066397930200704&time=1534813200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-y6vulDyYaK4kyWZCFHplsOye46A%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=5389954465402435594&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video" alt="qq">
            <p>QQ咨询</p></li>
        <li><img src="https://thumbnail0.baidupcs.com/thumbnail/62f496f9637261e7074f7e2a227afe2a?fid=2671713914-250528-903416321969719&time=1534813200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-EdToDBTx0%2BQknbc06dbKpwF7KaA%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=5389967456358392635&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video" alt="微博">
            <p>官方微博</p></li>
        <li><img src="https://thumbnail0.baidupcs.com/thumbnail/5ab7e3f8052cf9a87f36511e63762d09?fid=2671713914-250528-141621392671430&time=1534813200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-ksEBDbsrcWtzq7m6yv4CKiwPWaA%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=5389961940077870736&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video" alt="微信">
            <p>微信二维码</p></li>
        <li><img src="https://thumbnail0.baidupcs.com/thumbnail/2b39427600d8a19bb6ad0ff0e14d6e39?fid=2671713914-250528-184391435532154&time=1534813200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-OikBbvmS6Pk5f%2BZAW%2BRyXW8ANpY%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=5389972044145431857&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video" alt="帮助">
            <p>建站帮助</p></li>
    </ul>
</div>
<style>
 body{
        height: 1000px;
    }
    .top{
        width: 100%;
        height: 400px;
        background-color: #0085FF;
    }
    .qq{
        width: 228px;
        height: 508px;
        background: url(https://thumbnail0.baidupcs.com/thumbnail/63fb32e2feca89b7f163c5a664079415?fid=2671713914-250528-1124511345760336&time=1534813200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-LsWRSG0dQtqRsUwSa%2FB2YDBBwu8%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=5389984462296071834&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video) no-repeat center;
        position: fixed;
        left: 50px;
        top: 100px;
    }
    .qq ul{
        margin-left: 12px;
        padding: 0;
    }
    .qq ul li{
        width: 123px;
        height: 95px;
        list-style: none;

        text-align: center;
    }
    .qq ul li:first-child{
        padding-top: 60px;
    }
    .qq ul li img{
        width: 62px;
        height: 55px;
    }
    .qq ul li:nth-last-child(2){
        height: 130px;
    }
    .qq ul li:nth-last-child(2) img{
        width: 100px;
        height: 100px;
    }
    .qq ul li p{
        margin: 0;
    }
</style>
</body>
</html>

运行实例 »

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

运行图：

$XR$@LL8{~W]I_QLR1NJWMRJ.png$

图文混排代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图文混排</title>
</head>
<body>
<div class="box">
    <img src="https://img.php.cn/upload/course/000/000/003/5a508deef1e58616.jpg" alt="">
    <div class="list">
        <h3>独孤九贱(4)_PHP视频教程</h3>
        <p>江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
            PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用为原则，让你学得会，记得住，用得上。学习PHP编程，不得不提醒阁下，前端的基础知识，还是要有一点的。当然不要求精通，但必须对基本标签、基本概念和术语有一定了解，否则，会对你的学习信心造成小打击哟~~（php中文网上有很多优秀的html,css,javascript教程可供您参考，如果你选择我们官方原创课程最好啦）</p>
        <ul>
            <li>PEterZhu</li>
            <li>2017-03-20 22:47:17</li>
            <li>点击数(1111687)</li>
        </ul>
    </div>
</div>
<style>
    .box img{
        width: 220px;
        height: 160px;
        float: left;
        border-radius: 8px;
    }
    .box .list{
        width: 400px;
        float: left;
        margin-left: 20px;
    }
    .box .list h3{
        font-size: 1rem;
        line-height: 1.5rem;
        margin: 0;
        color: #333;
    }
    .box .list p{
        font-size: 0.9rem;
        line-height: 1.5rem;
        color: #666;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }
    .box .list ul{
        padding: 0;
    }
    .box .list ul li{
        float: left;
        list-style: none;
        font-size: 0.9rem;
        color: #888888;
        margin-right: 10px;
    }
</style>
</body>
</html>

运行实例 »

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

运行图：

MXF47{3KS}PR~~6$MW]DO(H.png

双飞翼布局代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
</head>
<body>
<style>
    body{
        padding: 0;
        margin: 0 auto;
    }
.header,.footer{
    width: 1038px;
    height: 40px;
    text-align: center;
    background-color: #888888;
    line-height: 40px;
}
.footer{
    clear: both;
}
    ul{
        padding: 0;
    }
    ul li{
        color: #C8E1FA;
        list-style: none;
    }
    .box{
        width: 1038px;
        margin: 0 auto;
    }
    .main{
        width: 100%;
        float: left;
    }
    .center{
        min-height: 600px;
        margin: 0 240px 0 180px;
        background-color: #265380;
        border: 1px solid #000;
    }
    .left{
        width: 168px;
        min-height: 600px;
        background-color: #265380;
        float: left;
        margin-left: -100%;
        border: 1px solid #000;
    }
    .left ul li{
        line-height: 2rem;
        text-align: center;
    }
    .right{
        width: 228px;
        min-height: 600px;
        background-color: #265380;
        float: left;
        margin-left: -230px;
        border: 1px solid #000;
    }
    .right h3{
        color: #C8E1FA;
        font-size: 1rem;
    }
    .right ul{
        padding: 0 10px;
    }
    .right ul li{
        width: 100%;
        height: 80px;
        font-size: 0.8rem;
    }
    .right ul li img{
        width: 80px;
        height: 60px;
        float: left;
    }
    .cen{
        padding: 20px 30px;
    }
    .cen_top{
        padding: 20px;
        height: 50px;
        border-bottom: 1px solid #666;
    }
    .cen_top img{
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50px;
    }
    .cen_top_l{
        width: 200px;
        height: 50px;
        float: left;
        color: #C8E1FA;
    }
    .cen_top_l p{
        margin: 0;
        padding: 0;
        line-height: 1.5rem;
        font-size: 0.9rem;
    }


</style>
<div class="header">我是头部</div>
<div class="box">
    <div class="main">
        <div class="center">
            <div class="cen">
                <div class="cen_top">
                    <img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
                    <div class="cen_top_l">
                        <p>雨上  访问了我的主页</p>
                        <p>09：03   来自手机空间</p>
                    </div>
                </div>
            </div>
            <div class="cen">
                <div class="cen_top">
                    <img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
                    <div class="cen_top_l">
                        <p>雨上  访问了我的主页</p>
                        <p>09：03   来自手机空间</p>
                    </div>
                </div>
            </div>
            <div class="cen">
                <div class="cen_top">
                    <img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
                    <div class="cen_top_l">
                        <p>雨上  访问了我的主页</p>
                        <p>09：03   来自手机空间</p>
                    </div>
                </div>
            </div>
            <div class="cen">
                <div class="cen_top">
                    <img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
                    <div class="cen_top_l">
                        <p>雨上  访问了我的主页</p>
                        <p>09：03   来自手机空间</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="left">
        <ul>
            <li>好友动态</li>
            <li>特别相关</li>
            <li>与我相关</li>
            <li>空间达人</li>
            <li>那年今日</li>
            <li>腾讯课堂</li>
            <li>游戏应用</li>
            <li>我的收藏</li>
        </ul>
    </div>
    <div class="right">
        <h3>大家都在看</h3>
        <ul>
            <li>
                <img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
                <p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
            </li>
            <li>
                <img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
                <p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
            </li>
            <li>
                <img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
                <p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
            </li>
            <li>
                <img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
                <p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
            </li>
            <li>
                <img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
                <p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
            </li>
        </ul>
    </div>
</div>
<div class="footer">我是底部</div>
</body>
</html>

运行实例 »

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

运行图：

圣杯布局代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
</head>
<body>
<style>
    body{
        padding: 0;
        margin: 0 auto;
    }
    .header,.footer{
        width: 100%;
        height: 40px;
        text-align: center;
        background-color: #888888;
        line-height: 40px;
    }
    .footer{
        clear: both;
    }
    ul{
        padding: 0;
    }
    ul li{
        color: #C8E1FA;
        list-style: none;
    }
    .box{
        width: 610px;
        margin: 0 auto;
    }
    .center{
        width: 100%;
        min-height: 600px;
        margin: 0 auto;
        float: left;
        background-color: #265380;
        border: 1px solid #000;
    }
    .left{
        width: 168px;
        min-height: 600px;
        background-color: #265380;
        float: left;
        margin-left: -100%;
        border: 1px solid #000;
        position: relative;
        left: -180px;
    }
    .left ul li{
        line-height: 2rem;
        text-align: center;
    }
    .right{
        width: 226px;
        min-height: 600px;
        background-color: #265380;
        float: left;
        margin-left: -230px;
        border: 1px solid #000;
        position: relative;
        right: -240px;
    }
    .right h3{
        color: #C8E1FA;
        font-size: 1rem;
    }
    .right ul{
        padding: 0 10px;
    }
    .right ul li{
        width: 100%;
        height: 80px;
        font-size: 0.8rem;
    }
    .right ul li img{
        width: 80px;
        height: 60px;
        float: left;
    }
    .cen{
        padding: 20px 30px;
    }
    .cen_top{
        padding: 20px;
        height: 50px;
        border-bottom: 1px solid #666;
    }
    .cen_top img{
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50px;
    }
    .cen_top_l{
        width: 200px;
        height: 50px;
        float: left;
        color: #C8E1FA;
    }
    .cen_top_l p{
        margin: 0;
        padding: 0;
        line-height: 1.5rem;
        font-size: 0.9rem;
    }


</style>
<div class="header">我是头部</div>
<div class="box">
    <div class="center">
        <div class="cen">
            <div class="cen_top">
                <img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
                <div class="cen_top_l">
                    <p>雨上  访问了我的主页</p>
                    <p>09：03   来自手机空间</p>
                </div>
            </div>
        </div>
        <div class="cen">
            <div class="cen_top">
                <img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
                <div class="cen_top_l">
                    <p>雨上  访问了我的主页</p>
                    <p>09：03   来自手机空间</p>
                </div>
            </div>
        </div>
        <div class="cen">
            <div class="cen_top">
                <img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
                <div class="cen_top_l">
                    <p>雨上  访问了我的主页</p>
                    <p>09：03   来自手机空间</p>
                </div>
            </div>
        </div>
        <div class="cen">
            <div class="cen_top">
                <img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
                <div class="cen_top_l">
                    <p>雨上  访问了我的主页</p>
                    <p>09：03   来自手机空间</p>
                </div>
            </div>
        </div>
    </div>
    <div class="left">
        <ul>
            <li>好友动态</li>
            <li>特别相关</li>
            <li>与我相关</li>
            <li>空间达人</li>
            <li>那年今日</li>
            <li>腾讯课堂</li>
            <li>游戏应用</li>
            <li>我的收藏</li>
        </ul>
    </div>
    <div class="right">
        <h3>大家都在看</h3>
        <ul>
            <li>
                <img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
                <p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
            </li>
            <li>
                <img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
                <p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
            </li>
            <li>
                <img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
                <p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
            </li>
            <li>
                <img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
                <p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
            </li>
            <li>
                <img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
                <p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
            </li>
        </ul>
    </div>
</div>
<div class="footer">我是底部</div>
</body>
</html>

运行实例 »

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

运行图：

圣杯布局和双飞翼布局最大的区别：

圣杯布局和双飞翼布局都是三栏浮动布局，不同的是在解决中间栏div内容不被遮挡的问题，处理方式和思路不一样。

圣杯布局：处理中间栏内容不被遮挡，将中间的div设置了左右padding后，讲左右两个div用相对定位position：relative，并配合right和left属性，将左右两个div移动后，不遮挡中间div的内容。

双飞翼布局：处理中间内容时，直接在中间div内部再创建一个div放置内容，在该子div上用margin设置左右盒边距，为左右两栏div留出位置，比圣杯布局多用了一个div，少用了几个属性。

个人感觉双飞翼布局比圣杯布局思路更直接和简洁一点。

手抄：

实例

实例

实例

实例

相关文章