实例
<!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.其它操作与双飞冀基本相同,只不是中间区块的内容是通过相对定位来实现的.
