简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 图文混排.固定定位。双飞翼布局。圣杯步骤2018-8-17
Blogger Information
Blog 16
fans 0
comment 1
visits 18542
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
图文混排.固定定位。双飞翼布局。圣杯步骤2018-8-17
安丰的博客
Original
1009 people have browsed it

问题:双飞冀与圣杯布局的最大区别在哪里？

主体区域的来源 作为2种布局的最大区别,

双飞翼的主体结构是由2测的挤压形成, 布局主体区域可以随着浏览器大小变化

圣杯的主体结构是通过相对定位设置出来的宽度固定 无法进行调整



实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>

    <style>
        .header,.footer{
            width: 100%;
            height: 40px;
            background-color: rgba(56, 97, 33, 0.9);
        }
        .content{
            width:1000px;
            min-height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: #888888;
            margin: auto;

        }
        .container{
            width: 600px;
            background-color: #39ff18;
            height: 400px;
            margin: auto;

        }
        .main{
            width: 100%;
            min-height: 400px;
            background-color: #ff1618;
            float: left;

        }
        .left{
            width: 200px;
            height:400px;
            background-color: #ffff0a;
            float: left;
            margin-left: -100%;
            position: relative;/*相对定位 优先设置相对定位参数*/
            left:-200px;       
        
        }
        .right{
            width: 200px;
            height:400px;
            background-color: #ffff0a;
            float: left;
            margin-left: -200px;
            position: relative;
            right:-200px;
        }

    </style>
</head>
<body>
<div class="header">
    <div class="content">头部</div>
</div>

<div class="container">
    <div class="main">主体内容区</div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>

<div class="footer">
    <div class="content">尾部</div>
</div>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼三列布局</title>


    <style>
        .header{
            width: 100%;
            height:40px;
            background-color: #cccccc;
        }
        .content{
            width: 1000px;
            min-height: 40px;
            background-color: yellow;
            margin:  auto;
            text-align: center;
            line-height: 40px;

        }
        .container{
            width: 1000px;
            background-color: #39FF1B;
            margin:  10px auto;
            overflow: hidden;
        }
        .warp{   /*存放主体样式*/
            width: 100%;
            background-color: #888888;
            float: left;


        }
        .main{  /*存放主体内容*/
            min-height: 400px;
            background-color: #ff514d;
            margin: 0 210px;
        }
        .left{
            width: 200px;
            height: 400px;
            background-color: lightpink;
            float: left;
            margin-left: -100%;
        }
        .right{
            width: 200px;
            height: 400px;
            background-color: #ffc1ff;
            float: left;
            margin-left: -200px;
        }
        .footer{
            width: 100%;
            height:40px;
            background-color: #cccccc;
        }
    </style>
</head>





<body>

    <div class="header">
        <div class="content">头部</div>
    </div>

    <div class="container">
        <div class="warp">
            <div class="main">主体内容区</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>

    <div class="footer">
        <div class="content">尾部</div>
    </div>

</body>




</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图文混排</title>
    <style>
        h1,p{
            margin: 10px 10px;


        }
        h1{
            color: black;
        
            margin-left: 2rem;
            padding-top: 2rem;
            padding-bottom: 0;

        }
        div{
            width: 600px;
            height: 600px;
            background-color: pink;
            border-radius: 2rem;
            margin: 1rem;
            clear: both;


        }

        img{
            width: 150px;
            height: 150px;
            float: left;
            margin-left: 2rem;
            margin-right: 2rem;
            margin-bottom: 0

        }
        p{
            margin-left: 2rem;
            text-indent: 2rem;
            font-size: 24px;

        }


    </style>



</head>
<body>
<div class="box1">
    <h1>犬类祖先</h1>
    <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=755f02826e380cd7e21ea5ef9144ad14/f11f3a292df5e0fe5c047433576034a85edf72e0.jpg" alt="box1">
    <p>
        狗是由狼驯化而来的。 早在狩猎采集时代， 人们就已驯养狗为狩猎时的助手。 因此， 狗要算是人类最早驯养的家畜。 河北武安磁山、 河南新郑裴李岗、 浙江余姚河姆渡等遗址， 都出土有狗骨骼， 足证其驯养历史之久远。 山东胶县三里河出土的狗形鬶(图3-50)，造型生动逼真，使我们得见新石器时代家犬的形态特征。 陕西西安半坡遗址出土的狗骨， 头骨较小， 额骨突出， 肉裂齿小， 下颌骨水平边缘弯曲， 与现在华北狼有很大区别， 说明人类驯养狗的历史确实很早
    </p>
</div>

<div class="box2">
    <h1>基因密码</h1>

    <p>
        狗的进化与淀粉消化有关：来自乌普萨拉大学的研究人员通过比较狗和狼的全基因组，揭示了在野生犬进化为人类最好的朋友这一过程中发生了许多的改变。不出所料的是，这些差异性区域有许多都影响了大脑，这或许可以解释狼与狗之间的性情差异。此外，这一比较研究还指出了几个与消化相关的区域，包括帮助分解淀粉的基因。
    </p>
    <img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=f2aa7c6136d12f2eca05a9627fc3d5ff/b03533fa828ba61e2195d5994134970a304e5908.jpg" alt="">
    <p>
        研究人员表示，通过找到人类，食用人类的剩饭剩菜，狗有可能进行了自我驯化。以色列化石及遗传研究将狗的驯化时期确定为大约1万年前，与农业革命时期相吻合，那时人类从游牧狩猎者转变为在定居点耕作及生活。一些科学家们认为，狼被吸引到了这些早期定居点的垃-圾场，以蔬菜和谷类植物剩饭菜为食。
    </p>
</div>

</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div img{
          width:20px;
        height:20px;
    }
    box{
        display:block;
        position: fixed;
        right:20px;
        margin-top: 200px;
    }
    body{
        height:2000px
    }
    box2{
        display:block;
        position: fixed;
       left:30px;
    }
    ul{
        padding:0;
        margin: 0;
        background-color: lightcoral;
    }
    li {
        /*background-color:lightyellow;*/
        list-style: none;
    }
    h2{
        background-color: #b3d4fc;
        margin:0;
    }
</style>

<body>
<box>
    <div>
        <H2>在线客2服</H2>
    </div>
    <div class="box1">
        <img src="http://img17.3lian.com/d/file/201703/01/7ed5ae70cad0431cb57c51afbcd4c369.gif"  for ="email">
        <a href="http://www.php.cn" id="email">在线客2服</a>
    </div>
    <div class="box2">
        <img src="http://img17.3lian.com/d/file/201703/01/7ed5ae70cad0431cb57c51afbcd4c369.gif" >
        <a href="http://www.php.cn">在线客2服</a>
    </div>
    <div class="box3">
        <img src="http://img17.3lian.com/d/file/201703/01/7ed5ae70cad0431cb57c51afbcd4c369.gif" >
        <a href="http://www.php.cn">在线客2服</a>
    </div>





</box>

    <box2>
        <div>
            <h2>售前咨询</h2>
            <ul>
                <li>
                    <img src="http://img17.3lian.com/d/file/201703/01/7ed5ae70cad0431cb57c51afbcd4c369.gif" alt="售前" width="200px">
                    <a href="http://www.php.cn">详细了解</a>
                </li>
                   <li>
                       <img src="http://img17.3lian.com/d/file/201703/01/7ed5ae70cad0431cb57c51afbcd4c369.gif" alt="售前" width="200px">
                       <a href="http://www.php.cn">详细了解</a>
                   </li>
            </ul>
        </div>

    </box2>


</body>
</html>

运行实例 »

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


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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！