今天学习了双飞冀三列布局与圣杯三列布局，听了这节课终于理解了什么是双飞冀布局与圣杯布局。其实以前做的页面也用了，但是只是不知道那些就是双飞冀布局与圣杯布局。
作业编程:固定定位制作QQ在线kefu；
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
</head>
<body>
<!--
1. 固定定位与绝对定位是双胞胎,唯一的区别是定位父级不同.
2. 绝对定位是相对于它最近的有定位属性的父级区块进行定位;
3. 固定定位永远相对于当前的窗口进行定位(body)
-->
<style>
body{
height:1000px;
}
.box1 {
position: fixed;
bottom:50%;
right: 0;
}
</style>
<div class="box1">
<img style="CURSOR: pointer" onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&sid=2229525623&o=2229525623&q=7', '_blank', 'height=502, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" border="0" SRC=http://wpa.qq.com/pa?p=1:2229525623:1 alt="2229525623">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业编程:浮动实现图文混排;
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战图文混排</title>
</head>
<body>
<style>
h2, p {
margin: 0;
}
.box {
width: 700px;
background-color: #efefef;
font-size: 1rem;
color: #555;
border-radius: 1rem;
padding: 20px;
}
.box h2 {
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>
<div class="box">
<h2>《PHP中文网第三期》</h2>
<img src="https://img.php.cn/upload/article/000/000/003/5b49b1f76ccb9475.jpg" alt="">
<p>为了第三期的，我们18位老师和同事历经3月精心准备。每一个PPT，每一行代码，每一个实战案例都是经过
我们老师和同事们反复讨论，反复打磨敲定！我们追求完美，力求每一节课程都是精品！
为了这次课程，我们的老师也是在一起相互试听，不断改进教学风格，坚持幽默，深入浅出，
力求每一个学员都能听得懂，学得会！我们的辅导老师也是早早准备好！跟进监督每位学员的作业
（避免光学不练空架子），及时解答学员的问题，更有回答某些学员的生活上的私人问题~~默默的奉献！
PHP中文网第三期线上班_前端基础学习内容: HTML5,CSS3,JavaScript,jQuery,Vue.js入门,
Bootstrap,页面布局实战 《网站管理后台》的模板开发(综合应用以上所学知识)
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业3编程: 实例演示双飞冀三列布局；
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>经典的三列双飞翼布局</title>
<style type="text/css">
.header, .footer {
width: 100%;
height: 60px;
background-color: lightgray;
}
.footer {
/*底部二边不能有浮动元素*/
clear: both;
}
/*设置头部和底部的中间内容区的基本样式*/
.content {
/*先设置总的宽度,这步很重要*/
width: 1000px;
/*高度直接引用父区块值*/
min-height: 100%;
/*设置参考色:灰色*/
background-color: gray;
/*使自己水平居中*/
margin: auto;
/*使其内部的文本水平垂直居中*/
text-align: center;
line-height: 60px;
}
/*设置主体的基本样式*/
.container {
/*设置主体的总宽度:非常关键*/
width: 1000px;
/*设置主体内部所有区块水平居中*/
margin:auto;
/*使当前区块能够包住内部的浮动区块*/
overflow: hidden;
/*设置背景参考色*/
background-color: yellow;
}
/*设置主体区域中的中间区块的基本样式*/
.wrap {
/*宽度与父区块相同,独占整行,这很重要,可确保后面的浮动元素换行显示*/
width: 100%;
/*参考背景色: 青色*/
background-color: cyan;
/*左浮动,脱离文档流*/
float: left;
}
/*设置中间区块的样式*/
.main {
/*注意:它的宽度是在父区块wrap中设置了,这里不需要重复设置*/
/*给中间内容区设置一个最小高度,这个最终会被真实内容替换*/
min-height:600px;
/*设置左右外边距为left和right的宽度,使他们显示到正确位置*/
margin: 0 200px; /*这是最后一步*/
/*参考背景色:小麦色*/
background-color: wheat;
text-indent: 35px;
line-height: 28px;
height: 28px;
padding: 5px;
}
.left {
/*宽度是必须设置的*/
width: 200px;
/*同理,也设置一个最小高度*/
min-height:600px;
/*设置左浮动:与前面元素一起排列*/
float:left;
/*将左区块拉回到中间区块的起始位置处*/
margin-left:-100%;
/*设置背景参考色:天蓝色*/
background-color: lightskyblue;
}
/*设置右边区块的基本样式*/
.right {
/*同样也要先设置一个宽度*/
width: 200px;
/*高度与先给一个最小高度做为参考,最终会被实际内容替换*/
min-height:600px;
/*同样也要设置左浮动,依次排到left区块的后面*/
float:left;
/*将右区块拉回到上一行的最右侧*/
margin-left:-200px;
/*背景参考色:浅绿*/
background-color: lightgreen;
}
.left ul{
margin:0px;
padding:0px;
}
.left ul li{
text-overflow: ellipsis;
list-style: none;
padding:5px;
}
.right ol{
margin:0px;
padding-left: 22px;
}
.right ol li{
}
</style>
</head>
<body>
<!-- DOM结构 -->
<!-- 头部 -->
<div class="header">
<div class="content">网站头部</div>
</div>
<!-- 主体 -->
<div class="container">
<div class="wrap">
<div class="main">对于php程序员来说，随着php不同版本对于部分函数变量机制的更新改进，往往会让大家因在不同版本下使用同一变量而出现不同结果时而产生疑惑。
那么本篇文章主要给大家详细解释下，为什么在PHP5和PHP7版本下，使用同一global变量时会出现不同结果的问题？下面给大家举一个简单易懂的例子。
对于php程序员来说，随着php不同版本对于部分函数变量机制的更新改进，往往会让大家因在不同版本下使用同一变量而出现不同结果时而产生疑惑。
那么本篇文章主要给大家详细解释下，为什么在PHP5和PHP7版本下，使用同一global变量时会出现不同结果的问题？下面给大家举一个简单易懂的例子。
对于php程序员来说，随着php不同版本对于部分函数变量机制的更新改进，往往会让大家因在不同版本下使用同一变量而出现不同结果时而产生疑惑。
那么本篇文章主要给大家详细解释下，为什么在PHP5和PHP7版本下，使用同一global变量时会出现不同结果的问题？下面给大家举一个简单易懂的例子。
对于php程序员来说，随着php不同版本对于部分函数变量机制的更新改进，往往会让大家因在不同版本下使用同一变量而出现不同结果时而产生疑惑。
那么本篇文章主要给大家详细解释下，为什么在PHP5和PHP7版本下，使用同一global变量时会出现不同结果的问题？下面给大家举一个简单易懂的例子。
对于php程序员来说，随着php不同版本对于部分函数变量机制的更新改进，往往会让大家因在不同版本下使用同一变量而出现不同结果时而产生疑惑。
那么本篇文章主要给大家详细解释下，为什么在PHP5和PHP7版本下，使用同一global变量时会出现不同结果的问题？下面给大家举一个简单易懂的例子。</div>
</div>
<div class="left">
<ul>
<li>2018浪漫七夕：7款程序员必备表白源</li>
<li>关于PHP5和PHP7版本下global变量机</li>
<li>如何增强自己的学习能力？</li>
<li>php中文网手机APP上线通知！</li>
</ul>
</div>
<div class="right">
<ol>
<li>我出现了bool(false)</li>
<li>请问有这套课程的源码和笔记吗</li>
<li>phpstudy安装</li>
<li>课件等相关资料在哪里下载</li>
</ul>
</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 type="text/css">
.header, .footer {
width: 100%;
height: 60px;
background-color: lightgray;
}
.footer {
clear: both;
}
.content {
width: 1000px;
height: 100%;
background-color: gray;
margin: auto;
text-align: center;
line-height: 60px;
}
.container {
width: 600px;
background-color: yellow;
/*父容器自身以及内部所有区块main,left,right水平居中*/
margin:auto;
/*使它能包住浮动区块*/
overflow: hidden;
/*因为左右区块现在覆盖在main之上,挡住了main的内容,现在添加padding来实现自身内容显示*/
padding:0 200px;
}
.container .main {
/*因为暂无内容,先给main,left,right设置一个最小行高*/
min-height: 650px;
/*宽必必须为100%,即与父元素container一致,这样才能使left,right挤下来*/
width: 100%;
float:left;
/*设置参考背景色:小麦色*/
background-color: wheat;
text-indent: 35px;
line-height: 28px;
height: 28px;
}
.container .left {
/*除main外,left和right必须设置宽度*/
width: 200px;
/*最小高度*/
min-height: 650px;
/*左浮动后,因为前面main占据100%宽度,所以自动挤到下一行首*/
float:left;
/*设置左外边距margin为-100%,使它回到main区块的起始点处*/
margin-left: -100%;
/*关键步骤:相对定位,向左为负200,相当于向右移动200px;*/
position: relative;
left: -200px;
/*设置参考背景色:天蓝色*/
background-color: lightskyblue;
}
.container .right {
width: 200px;
min-height: 650px;
/*左浮动后,因为前面main占据100%宽度,所以自动挤到下一行,
并且还遇到前面已经浮动过来的left左侧的区块,所以排到left右边*/
float:left;
/*设置左外边距为当前宽度的负值,使之定位到main区块的右边*/
margin-left:-200px;
/*关键步骤:设置为相对定位,right:-200px意思是向左边移动200px;*/
position: relative;
right:-200px;
/*设置参考背景色:清绿色*/
background-color: lightgreen;
}
.left ul, .right ul{
margin:0px;
padding:0px;
}
.left ul li , .right ul li{
text-overflow: ellipsis;
list-style: none;
padding:5px;
}
</style>
</head>
<body>
<!-- DOM结构 -->
<!-- 头部 -->
<div class="header">
<div class="content">网站头部</div>
</div>
<!-- 内容区 -->
<div class="container">
<div class="main">对于php程序员来说，随着php不同版本对于部分函数变量机制的更新改进，往往会让大家因在不同版本下使用同一变量而出现不同结果时而产生疑惑。
那么本篇文章主要给大家详细解释下，为什么在PHP5和PHP7版本下，使用同一global变量时会出现不同结果的问题？下面给大家举一个简单易懂的例子。
对于php程序员来说，随着php不同版本对于部分函数变量机制的更新改进，往往会让大家因在不同版本下使用同一变量而出现不同结果时而产生疑惑。
那么本篇文章主要给大家详细解释下，为什么在PHP5和PHP7版本下，使用同一global变量时会出现不同结果的问题？下面给大家举一个简单易懂的例子。
对于php程序员来说，随着php不同版本对于部分函数变量机制的更新改进，往往会让大家因在不同版本下使用同一变量而出现不同结果时而产生疑惑。
那么本篇文章主要给大家详细解释下，为什么在PHP5和PHP7版本下，使用同一global变量时会出现不同结果的问题？下面给大家举一个简单易懂的例子。
对于php程序员来说，随着php不同版本对于部分函数变量机制的更新改进，往往会让大家因在不同版本下使用同一变量而出现不同结果时而产生疑惑。
那么本篇文章主要给大家详细解释下，为什么在PHP5和PHP7版本下，使用同一global变量时会出现不同结果的问题？下面给大家举一个简单易懂的例子。
对于php程序员来说，随着php不同版本对于部分函数变量机制的更新改进，往往会让大家因在不同版本下使用同一变量而出现不同结果时而产生疑惑。
那么本篇文章主要给大家详细解释下，为什么在PHP5和PHP7版本下，使用同一global变量时会出现不同结果的问题？下面给大家举一个简单易懂的例子。</div>
<div class="left">
<ul>
<li>2018浪漫七夕：7款程序员必备表白源</li>
<li>关于PHP5和PHP7版本下global变量机</li>
<li>如何增强自己的学习能力？</li>
<li>php中文网手机APP上线通知！</li>
</ul>
</div>
<div class="right">
<ul>
<li>2018浪漫七夕：7款程序员必备表白源</li>
<li>关于PHP5和PHP7版本下global变量机</li>
<li>如何增强自己的学习能力？</li>
<li>php中文网手机APP上线通知！</li>
</ul>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写: 双飞冀与圣杯布局的最大区别在哪里？
取消了left和right的position：relative和body的padding；
在main中增加了一层div：mainContent，专门用来装main的内容；通过设置mainContent的margin来达到显示内容的目的，这个设计实在是巧妙，使人们更容易理解；
在圣杯布局中人为的为left和right挤压出了空间，而在双飞翼中只是根据left和right的宽度移动了main中的内容；
