天堂新版在线资源,国产av成人一区二区三区

首頁 > 博客列表 > 固定定位，雙飛翼與圣杯布局--2018年8月17日作業(yè)

博主信息

博文 14

粉絲 0

評論 0

訪問量 13354

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

實例

<!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>青海省都蘭縣的荒漠戈壁上，分布著中國規(guī)模最大的吐蕃墓葬群，距今大約一千多年的歷史。其中規(guī)模最大的古墓葬——血渭一號大墓，被當(dāng)?shù)孛耖g稱為“九層妖塔”。這座墓葬所在的熱水墓群成為盜墓分子覬覦的對象。近期，在公安部的組織指揮下，青海省公安機(jī)關(guān)偵破了“315”盜掘古文化遺址古墓葬案，抓獲了盜墓團(tuán)伙成員26名，追繳了被盜掘的全部文物646件。</p>
	</div>
</body>
</html>

運(yùn)行實例 ?

點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例

實例

<!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;/*使當(dāng)前區(qū)塊能夠包住內(nèi)部的浮動區(qū)塊*/
            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">左側(cè)</div>

    <div class="right">右側(cè)</div>
</div>

<!-- 底部 -->
<div class="footer"><!-- 底部 -->
    <div class="content">底部</div>
</div>
</body>
</html>

運(yùn)行實例 ?

點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例

實例

<!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">左側(cè)</div>

    <div class="right">右側(cè)</div>
</div>

<!-- 底部 -->
<div class="footer"><!-- 底部 -->
    <div class="content">底部</div>
</div>
</body>
</html>

運(yùn)行實例 ?

點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例

實例

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

運(yùn)行實例 ?

點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例

總結(jié)：

雙飛冀與圣杯布局分析:

共同點(diǎn):

1.目標(biāo)都是要將頁面的主要內(nèi)容區(qū),優(yōu)先渲染出來,提升用戶體驗;

2.都是三列布局,左右二列固定,中間內(nèi)容區(qū)自適應(yīng);

3.三列全部采用浮動處理;

4.要求中間的內(nèi)容區(qū)不能被擋住,必須全部完整展示.

二者的區(qū)別在于對中間內(nèi)容區(qū)的處理上:

雙飛冀:

1.中間區(qū)塊必須要套一個父級容器;

2.將父級容器寬度設(shè)置為100%,將要渲染的內(nèi)容放在內(nèi)部的主體盒子中;

3.當(dāng)左右區(qū)塊通過設(shè)置負(fù)外邊距方式與主體同行后;

4.再通過給內(nèi)容容器的父容器設(shè)置左右外邊距margin的方式,將左右二列排列到位.

圣杯:

1.不需要為中間內(nèi)容區(qū)創(chuàng)建父級容器,DOM結(jié)構(gòu)比雙飛冀略微簡單些;

2.其它操作與雙飛冀基本相同,只不是中間區(qū)塊的內(nèi)容是通過相對定位來實現(xiàn)的.

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

固定定位，雙飛翼與圣杯布局--2018年8月17日作業(yè)

2018-08-20 17:09:57

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

實例

實例

實例

實例