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

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

Blogger Information

Blog 14

fans 1

comment 0

visits 7376

Special Recommendation

More>

Related recommendations

实例

<!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，少用了几个属性。

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

手抄：

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

php的变量定义以及字符串的变量分析及应用--2018年8月21日作业

2018-08-22 00:56:48