实例
<！DOCTYPE html>
<html lang =“en”>
<HEAD>
<meta charset =“utf-8”/>
<TITLE> </ TITLE>
<风格>
/ *简单粗暴的样式重置* /
* {
保证金：0;
填充：0;
border：none;
}
/ *头部样式公用* /
.header-one，.header-two {
最大宽度：1190px;
保证金：0自动;
background-color：＃ff006e;
}
.header-one img，.header-two img {
身高：50px;
宽度：自动;
border-radius：50px;
显示：块;
向左飘浮;
margin-top：5px;
margin-left：20px;
}
.header-one a，.header-two a {
display：inline-block;
填充：0 20px;
line-height：60px;
颜色：#fff;
font-size：1.1rem;
text-decoration：none;
}
/ *主体样式公用* /
.main-one，.main-two {
最大宽度：1190px;
身高：600px;
保证金：20px auto;
溢出：隐藏;
}
/ *双飞翼布局样式* /
.main-one .main-one-con {
身高：100％;
宽度：100％;
向左飘浮;
}
.main-one .main-one-con div {
身高：100％;
保证金：0 200px;
background-color：＃0094ff;
}
.main-one .left-one {
宽度：200px;
身高：100％;
向左飘浮;
margin-left：-100％;
background-color：＃ff006e;
}
.main-one .right-one {
宽度：200px;
身高：100％;
向左飘浮;
margin-left：-200px;
background-color：＃ff006e;
}
/ *圣杯布局样式* /
.main-two {
最大宽度：790px;
填充：0 200px;
}
.main-two-con {
向左飘浮;
宽度：100％;
身高：100％;
background-color：＃0094ff;
}
.left-two {
向左飘浮;
宽度：200px;
身高：100％;
margin-left：-100％;
位置：相对;
右：200px;
background-color：＃00ff21;
}
.right-two {
向左飘浮;
宽度：200px;
身高：100％;
margin-right：-200px;
背景色：bisque;
}
/ *底部样式公用* /
.footer-one，.footer-two {
最大宽度：1190px;
保证金：0自动;
background-color：＃ff006e;
填充：10px 0;
}
.footer-one {
margin-bottom：50px;
}
.footer-one p，footer-two p {
font-size：1.1rem;
text-align：center;
行高：2;
颜色：#fff
}
</样式>
</ HEAD>
<BODY>
<！ - 双飞翼布局 - >
<节>
<！ - 头部内容 - >
<div class =“header-one”>
<img src =“https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg”alt =“LOGO”/>
<a href="">网站首页</a>
<a href="">产品中心</a>
<a href="">成功案例</a>
<a href="">新闻资讯</a>
<a href="">关于我们</a>
</ DIV>
<！ - 主体内容 - >
<div class =“main-one”>
<div class =“main-one-con”>
<DIV>网站内部内容</ DIV>
</ DIV>
<div class =“left-one”>左侧内容</ div>
<div class =“right-one”>右侧内容</ div>
</ DIV>
<！ - 底部 - >
<div class =“footer-one”>
<P> PHP中文网：独家原创，永久免费的在线PHP视频教程，PHP技术学习阵地</ P>
<p> 2014-2019版权所有http://www.php.cn/保留所有权利| 皖B2-20150071-9 </ P>
</ DIV>
</节>
<！ - 圣杯布局 - >
<节>
<div class =“header-two”>
<img src =“https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg”alt =“LOGO”/>
<a href="">网站首页</a>
<a href="">产品中心</a>
<a href="">成功案例</a>
<a href="">新闻资讯</a>
<a href="">关于我们</a>
</ DIV>
<div class =“main-two”>
<div class =“main-two-con”>网站内部内容</ div>
<div class =“left-two”>左侧内容</ div>
<div class =“right-two”>右侧内容</ div>
</ DIV>
<div class =“footer-two”>
</ DIV>
</节>
</ BODY>
</ HTML>运行实例 »
点击 "运行实例" 按钮查看在线实例
