Blogger Information
Blog 38
fans 0
comment 0
visits 30652
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
固定定位图文混排浮动双飞翼圣杯布局总结——2018年8月19日
图图的博客
Original
818 people have browsed it

右下角客*服

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments