简体中文(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 14
fans 0
comment 0
visits 11113
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
892 people have browsed it


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图文混排</title>
	<style>
		 h1, p {
        margin: 0;
    }
    .box {
        width: 700px;
        background-color: green;
        font-size: 1rem;
        color: black;
        border-radius: 1rem;
        padding: 20px;
    }

    .box h1 {
        text-align: center;
        margin-bottom: 20px;
    }
    .box img {
        width: 250px;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .box p {
        text-indent: 2rem;
        line-height: 1.5rem;
    }
	</style>
</head>
<body>
	<div class=box>
		<h1>九层妖塔”旁古墓被盗案告破！</h1>
		<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2678016616,3616058424&fm=173&app=25&f=JPEG?" alt="" width="300">
		<p>青海省都兰县的荒漠戈壁上，分布着中国规模最大的吐蕃墓葬群，距今大约一千多年的历史。其中规模最大的古墓葬——血渭一号大墓，被当地民间称为“九层妖塔”。这座墓葬所在的热水墓群成为盗墓分子觊觎的对象。近期，在公安部的组织指挥下，青海省公安机关侦破了“315”盗掘古文化遗址古墓葬案，抓获了盗墓团伙成员26名，追缴了被盗掘的全部文物646件。</p>
	</div>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双飞翼三列布局</title>
	<style>
		
        .header, .footer {
            width: 100%;
            height: 80px;
            background-color: pink;
        }
        .footer {
          	clear: both;
        }

        .content {
            width: 1000px;
            min-height: 100%;
            background-color: lightskyblue;
            margin: auto;
            text-align: center;
            line-height: 60px;
        }

        .container {
            width: 1000px;
            margin:auto;
            overflow: hidden;/*使当前区块能够包住内部的浮动区块*/
            background-color: lightgreen;
        }

        .wrap {
            width: 100%;
            background-color: cyan;
            float: left;
        }

        .main {
            min-height:600px;
            margin: 0 200px;  
            background-color: lightgray;

        }
        .left {
            width: 200px;
            min-height:600px;
            float:left;
            margin-left:-100%;
            background-color: blue;
        }
        .right {/
            width: 200px;
            min-height:600px;
            float:left;
            margin-left:-200px;
            background-color: red;

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

<div class="container"><!-- 主体 -->

    <div class="wrap">
        <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>
        .header, .footer {
            width: 100%;
            height: 60px;
            background-color: pink;
            color:white;
        }

        .footer {
            clear: both;
        }

        .content {
            width: 1000px;
            height: 100%;
            background-color: gray;
            margin: auto;
            text-align: center;
            line-height: 60px;
        }

        .container {
            width: 600px;
            background-color: orange;
            margin:auto;
            overflow: hidden;
            padding:0 200px;


        }

        .container .main {
            min-height: 650px;
            width: 100%;
            float:left;
            background-color: blue;
        }

        .container .left {
            width: 200px;
            min-height: 650px;
            float:left;
            margin-left: -100%;
            position: relative;
            left: -200px;
            background-color: brown;

        }

        .container .right {
            width: 200px;
            min-height: 650px;
            float:left;
            margin-left:-200px;
            position: relative;
            right:-200px;
            background-color: green;
        }
    </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>QQ</title>
</head>
<body>
<style>
    .box {
        vertical-align: middle;
        width: 240px;
        height: 300px;

        position: fixed;
        bottom: 0;
        right: 0;
        background-color: #eeeeee;
    }

    ul {
        padding: 0;
    }
    ul li {
        width: 240px;
        height: 50px;
        list-style: none;
        line-height: 50px;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }
    img {
        vertical-align: middle;
    }
    a {
        height: 34px;
        text-decoration: none;
        color: #999;
        vertical-align: middle;
    }

</style>

<div class="box">
    <ul>
        <li>
            <img style="width:40px" src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2958518472,3404372203&fm=179&app=42&f=JPEG?" alt="">
            <a href="http://wpa.qq.com/msgrd?v=3&uin=1524038885&site=hupaiyule&menu=yes" >在线客-1</a>
        </li>
        <li>
            <img style="width:40px" src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2958518472,3404372203&fm=179&app=42&f=JPEG?" alt="">
            <a href="http://wpa.qq.com/msgrd?v=3&uin=1524038885&site=hupaiyule&menu=yes">在线服-2</a>
        </li>
        <li>
            <img style="width:40px" src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2958518472,3404372203&fm=179&app=42&f=JPEG?" alt="">
            <a href="http://wpa.qq.com/msgrd?v=3&uin=1524038885&site=hupaiyule&menu=yes">在线客-3</a>
        </li>
    </ul>

</div>
</body>
</html>

运行实例 »

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


总结：

双飞冀与圣杯布局分析:

共同点:

1.目标都是要将页面的主要内容区,优先渲染出来,提升用户体验;

2.都是三列布局,左右二列固定,中间内容区自适应;

3.三列全部采用浮动处理;

4.要求中间的内容区不能被挡住,必须全部完整展示.

二者的区别在于对中间内容区的处理上:

双飞冀:

1.中间区块必须要套一个父级容器;

2.将父级容器宽度设置为100%,将要渲染的内容放在内部的主体盒子中;

3.当左右区块通过设置负外边距方式与主体同行后;

4.再通过给内容容器的父容器设置左右外边距margin的方式,将左右二列排列到位.

圣杯:

1.不需要为中间内容区创建父级容器,DOM结构比双飞冀略微简单些;

2.其它操作与双飞冀基本相同,只不是中间区块的内容是通过相对定位来实现的.

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！