右下角客*服
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
div{
position: fixed;/*固定定位*/
right: 0;/*右边距离0*/
bottom: 0;/*底部距离0*/
}
</style>
</head>
<body>
<div>
<img src="images/qq.png" >
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
圣杯布局、图文混排
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
/*中间区域放在前面优先处理*/
/*中间主要区块*/
.main{
width:100%;
margin: auto;/*子元素是块元素居中显示*/
background-color: lightgray;
float: left;/*浮动显示*/
}
/*主体*/
.container {
width: 600px;
margin: auto;
overflow: hidden;
padding: 0 200px;
}
/*球员介绍的小盒子*/
.div{
margin: 10px 5px ;/*外边距上下5px、左右10px*/
}
/*乔丹和罗德曼图片样式一样*/
#jordan,#rod{
float: left;/*做浮动*/
margin-right: 1rem;/*图片右边外边距*/
height:200px;
}
/*}皮蓬图片样式*/
#pip{
float:right;
margin-left: 16px;
height:200px;
}
/*文本样式*/
p{
text-indent: 2rem;/*段落首行缩进2rem*/
}
/*大标题*/
h1{
text-align:center;
color: brown;
}
/*h2标题样式*/
h2{
text-align:center;
}
/*左侧*/
.left {
width: 200px;
float:left;
margin-left: -100%;
position: relative;
left: -200px;
background-color: chocolate;
min-height: 1050px;
}
/*右侧*/
.right {
width: 200px;
min-height: 1050px;
background-color: chocolate;
float:left;
margin-left: -200px;
position: relative;
right: -200px;
}
/*头部和底部*/
.head,.foot{
margin: 0 auto;
padding-bottom: 2px;
height: 25px;
width: 1000px;
min-height: 100%;
background-color: lightgray;
}
.foot{
padding: 0;
border-top: black 2px solid;
}
.head{
border-bottom: black 2px solid;
}
.content {
width: 1000px;
min-height: 100%;
margin: auto;
text-align: center;
line-height: 21px;
}
.list{
margin-left: 8px;
list-style-type: none;
}
.list a{
clear: left;
text-decoration: none;
color: blue;
}
/*鼠标放上时增加一条下划线*/
.list a:hover{
border-bottom:green 3px solid;
/*background-color:lightblue;*/
}
/*左下角固定客*服*/
.ad{
position: fixed;/*固定定位*/
right: 0;/*右边距离0*/
bottom: 0;/*底部距离0*/
}
</style>
</head>
<body>
<!--头部、导航-->
<div class="head">
<div class="content">
<table class="yulan">
<tr>
<td class="list"><a href="">公牛王朝 </a>|</td>
<td class="list"><a href="">紫金王朝 </a>|</td>
<td class="list"><a href="">绿军王朝 </a>|</td>
<td class="list"><a href="">马刺王朝 </a>|</td>
<td class="list"><a href="">勇士王朝 </a></td>
</tr>
</table>
</div>
</div>
<!--中间主要内容区域-->
<div class="container">
<!--中间-->
<div class="main">
<h1>王朝简介</h1>
<div class="div">
<h2>基本资料</h2>
<p>1984年NBA选秀大会，是NBA史上第一届黄金一代，公牛在第三顺位上选中了NBA历史上最伟大的球员，迈克尔·乔丹，随后这支球队和这位未来的王者一起开始了成长之路。乔丹的成长并非一路坦途，进入联盟第二年便遭遇几乎断送职业生涯的可怕伤病，之后又陷入到个人力量与团队融合的怪圈之中，一度深陷活塞队的“乔丹规则”无法突破。
时间到了1989年，芝加哥公牛队起用队中原有的助理教练“禅师”菲尔·杰克逊为主教练，这名长得像肯德基大叔的老头，当初还名不经传，手上只戴着一枚在球员时代得于纽约尼克斯队的总冠军ring，而只在CBA（不是中国的CBA联赛）当过主教练。但正是这次任用，使芝加哥公牛队在夺冠拼图上放下了最后一块模板。菲尔·杰克逊把多点轮换和著名的三角进攻引入了芝加哥公牛队，这一举动就收到了成效，也宣告NBA公牛王朝时代的到来！
1990年，“禅师”杰克逊执掌公牛，通过交易得到皮蓬，成了公牛王朝的转折点。杰克逊为乔丹和皮蓬量身打造了“三角进攻”确立了公牛的战术核心，在这之后，摧枯拉朽。至于之后成为乔丹助手诸如罗德曼、郎利、科尔之流，不过是禅师战术板上的配角，在强大核心的带动下，其余拼板不过是按图索骥寻来的配角。公牛王朝与乔丹和“菲尔”杰克逊无法分离，很显然，没有乔丹，就不会有公牛的霸业，1993年乔丹第一次退役，公牛立刻失去冠军霸权，但1998年乔丹与杰克逊同时离开后，公牛迅速从强队的行列中被踢出。公牛王朝的影响巨大，即使乔丹出走，仍有一大批死忠球迷不离不弃，1998年王朝谢幕至今，公牛队主场的上座率一直维持在联盟前三甲之内。这是其他两支王朝球队所不能及的。联合中心门前的乔丹铜像，记载的不仅是这个球队曾经的荣光，也被球迷给予了对未来的厚望。
</p>
<h2>最佳常规赛战绩</h2>
<p>1995-1996赛季，在整个休赛期都不断听到他已经不再是跟他1993年退役时一样的选手的言论后，迈克尔乔丹充满了动力，他带领他的副手皮篷和通过交易获得的丹尼斯罗德曼（Dennis Rodman）在 82场常规赛中取得72胜10负，为NBA历史上的第二好常规赛成绩。（勇士队于15-16赛季取下73胜9负）</p>
</div>
<h1 >公牛王朝第二个三连冠主要成员介绍</h1>
<div class="div">
<img id="jordan" src="images/jordan.png" >
<h2>迈克尔·乔丹</h2>
<p style="margin: 0 10px">迈克尔·乔丹（Michael Jordan），1963年2月17日生于美国纽约布鲁克林，前美国职业篮球运动员，司职得分后卫，绰号“飞人”（Air Jordan） 迈克尔·
乔丹在在1984年NBA选秀中于第1轮第3位被芝加哥公牛队选中，职业生涯曾效力于芝加哥公牛队以及华盛顿奇才队，新秀赛季当选NBA年度最佳新秀。1986-87赛
季，乔丹场均得到37.1分，首次获得NBA得分王称号。1991-93赛季，乔丹连续3次荣膺常规赛MVP以及总决赛MVP（FMVP），率领芝加哥公牛队3夺NBA总冠军。
1993年10月6日因父亲被害而宣布退役，两年后宣布复出。1996年入选NBA50大巨星。1996-98赛季，乔丹荣膺个人职业生涯第10次（共10次）NBA得分王以及
第5次（共5次）常规赛MVP，并再次率领公牛队3夺（共6次）NBA总冠军，自己当选共第6次总决赛MVP。1999年1月13日在劳资谈判失败后再次宣布退役，两年后
在华盛顿奇才队再次宣布复出。迈克尔·乔丹的职业生涯年年入选NBA全明星阵容（共14次）并3次当选NBA全明星MVP，10次入选NBA最佳阵容一阵，1985年入选
NBA最佳阵容二阵，1988年荣膺NBA年度最佳防守球员，9次入选NBA最佳防守阵容一阵，3次荣膺NBA抢断王，2次夺得NBA全明星扣篮大赛冠军，1984年以及
1992年夺得奥运会金牌。
2003年4月16日，迈克尔·乔丹在职业生涯最后一场奇才主场对阵76人比赛的赛后正式宣布退役。他被认为是历史上最伟大的篮球运动员，他的23号球衣分别被公牛
队以及热火队退役。2009年9月11日，迈克尔·乔丹入选奈·史密斯篮球名人纪念堂</p>
</div>
<div class="div">
<img id="pip" src="images/pippen.png" >
<h2>斯科蒂·皮蓬</h2>
<p>斯科蒂·皮蓬（Scottie P
</p>
</div>
<div class="div">
<img id="rod" src="images/rodman.jpg" alt="">
<h2>丹尼斯·罗德曼</h2>
<p>丹尼斯·罗德曼（Dennis Rodman），1961年5月13日出生于美国新泽西州特伦顿，前美国职业篮球运动员，司职大前锋，绰号“大虫”（The Worm）。
丹尼斯·罗德曼在1986年NBA选秀中于第2轮第27顺位被底特律活塞队选中，1995-96赛季被交易至芝加哥公牛队，联手迈克尔·乔丹，斯科特·皮蓬组成“铁三角”组合，并于当赛季常规赛收获72胜10负的历史第2好战绩。在1995-96赛季开始到1997-98赛季，连续三年获得NBA总冠军，建立公牛王朝。在1999-00赛季为小牛效力12场比赛后于2000年3月8日宣布从NBA退役。退役之后的罗德曼曾参加海外联赛，并于2006年正式宣布退役 。
在20年的职业生涯中，罗德曼共5次夺得NBA总冠军，2次入选NBA全明星阵容，2次入选NBA最佳阵容三阵，2次荣膺NBA年度最佳防守球员，7次入选NBA最佳防守阵容一阵，1994年入选NBA最佳防守阵容二阵，1992-98年间，连续七年获得NBA篮板王的称号，生涯共抢下11954个篮板，位列NBA历史篮板榜第22位，被誉为最会抢篮板的大前锋。 [1]
2011年4月2日，丹尼斯·罗德曼的10号球衣被活塞队退役。同年8月13日，罗德曼入选奈·史密斯篮球名人纪念堂</p>
</div>
ippen），1965年9月25日出生于美国阿肯色州汉堡，前美国职业篮球运动员，司职小前锋，绰号“蝙蝠侠”。
在1987年NBA选秀中，皮蓬在首轮第五顺位被西雅图超音速队选中，随即被交易至芝加哥公牛队。职业生涯曾效力于芝加哥公牛队、休斯敦火箭队以及波特兰开拓者队。1991-1993年、1996-1998年，皮蓬与迈克尔·乔丹一起带领公牛队6夺NBA总冠军；职业生涯3次入选最佳阵容第一阵容；8次入选最佳防守阵容第一阵容；7次入选NBA全明星赛；1994年荣膺NBA全明星赛MVP；1994-95赛季当选NBA抢断王；1996年入选NBA50大巨星。
1992年巴塞罗那奥运会以及1996年亚特兰大奥运会，皮蓬代表美国国家队“梦一队”和“梦三队”夺得男篮冠军。
2004年，皮蓬宣布退役。2005年12月10日，公牛为皮蓬举行球衣退役仪式。2008年，皮蓬曾复出效力芬兰以及瑞典联赛。 [1-2] 2010年4月6日入选NBA名人堂
</div>
<!--左边-->
<div class="left">
<ul>
<li><a href="">王朝简介</a></li>
<li style="list-style-type: none"><a href="">基本资料</a></li>
<li style="list-style-type: none"><a href="">常规赛最佳战绩</a></li>
<li ><a href="">主要成员介绍</a></li>
<li style="list-style-type: none"><a href="">乔丹</a></li>
<li style="list-style-type: none"><a href="">皮蓬</a></li>
<li style="list-style-type: none"><a href="">罗德曼</a></li>
</ul>
</div>
<!--右边-->
<div class="right"></div>
</div>
<!--页面底部-->
<div class="foot" >
<div class="content">芝加哥公牛</div>
</div>
<div class="ad"><img src="images/qq.png" ></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行实例 »
点击 "运行实例" 按钮查看在线实例
双飞翼：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼</title>
<style>
body{
text-align: center;
}
/*主题样式居中显示*/
.container{
width: 1000px;
margin:auto;
background-color: #66CCFF;
}
.content{
background: #aaa;
text-align: center;
height: 60px;
}
.box,.left,.right{
/*中间列左浮动*/
float: left;
}
.left{
margin-left: -100%;
width: 200px;
background-color: #FD6FCF;
min-height: 700px;
}
.right{
margin-left: -200px;
width: 200px;
background-color: #FD6FCF;
min-height: 700px;
}
/*中间容器*/
.box{
width: 100%;
}
/*中间内容*/
.main{
margin: auto;
background-color: chocolate;
min-height: 700px;
}
.foot{
/*清除浮动*/
clear:both;
}
</style>
</head>
<body>
<!--头部：-->
<div class="head">
<div class="content">头部</div>
</div>
<!--主体：-->
<div class="container">
<!--中间容器-->
<div class="box">
<!--中间内容区-->
<div class="main">中间</div>
</div>
<!--左边-->
<div class="left">左侧</div>
<!--右边-->
<div class="right">右侧</div>
</div>
<!--底部-->
<div class="foot">
<div class="content">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼</title>
<style>
body{
text-align: center;
}
/*主题样式居中显示*/
.container{
width: 1000px;
margin:auto;
background-color: #66CCFF;
}
.content{
background: #aaa;
text-align: center;
height: 60px;
}
.box,.left,.right{
/*中间列左浮动*/
float: left;
}
.left{
margin-left: -100%;
width: 200px;
background-color: #FD6FCF;
min-height: 700px;
}
.right{
margin-left: -200px;
width: 200px;
background-color: #FD6FCF;
min-height: 700px;
}
/*中间容器*/
.box{
width: 100%;
}
/*中间内容*/
.main{
margin: auto;
background-color: chocolate;
min-height: 700px;
}
.foot{
/*清除浮动*/
clear:both;
}
</style>
</head>
<body>
<!--头部：-->
<div class="head">
<div class="content">头部</div>
</div>
<!--主体：-->
<div class="container">
<!--中间容器-->
<div class="box">
<!--中间内容区-->
<div class="main">中间</div>
</div>
<!--左边-->
<div class="left">左侧</div>
<!--右边-->
<div class="right">右侧</div>
</div>
<!--底部-->
<div class="foot">
<div class="content">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
