Correction status:qualified
Teacher's comments:写得不错, 命名也规范
1、子级浮动以后,如何让父级依然包住子级?
父级高度可以由子级撑开。子级浮动,就会脱离文档流,而父级依然在文档流中,所以就包不住子级。最好的解决方案是给父级加上overflow: hidden属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box1{ width: 400px; /*当存在嵌套关系时,父级的高度由子级撑开*/ border: 5px dashed blue; overflow: hidden;/*当子级浮动,父级包不住子级时,最好的方法是给父级添加此属性*/ } #box2 { width: inherit;/*当存在嵌套关系时,子级的高度可以从父级继承*/ height:200px; background-color: rosybrown; float: left; /*子级浮动,就会脱离文档流,而父级依然在文档流中,就包不住子级了*/ } </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
2、利用绝对定位实现内容区的三列布局
切记main部分不可直接写内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过绝对定位实现内容区的三列布局</title> <style> #container { width: 1000px; margin: 0 auto;/*让整个页面内容都随浏览器窗口大小而调整*/ } #header, #footer { height: 50px; background-color:rosybrown; } #main { margin: 5px auto; background-color:blanchedalmond; } #left { width: 150px; min-height: 800px; /*设置最小高度,可以确保在没有内容的情况下,仍能完整显示*/ background-color:wheat; } #middle{ min-height: 800px; /*只设置了最小高度,宽度自适应*/ background-color:tan; } #right { width: 150px; min-height: 800px;/*设置最小高度,可以确保在没有内容的情况下,仍能完整显示*/ background-color:aquamarine; } /*方案一:使用绝对定位 让内容部分呈三列布局*/ #main { position: relative; /*绝对定位需要给父级加上一个 相对定位的属性*/ } #left { position: absolute;/*绝对定位要加上绝对定位的属性*/ left: 0; top: 0; } #right { position: absolute; right: 0; top: 0; } /*利用外边距,让middle部分 在左右之间*/ #middle{ margin-left: 160px; margin-right: 160px; } </style> </head> <body> <!-- 1、头部和顶部分别 置顶和置底,内容部分通常分为三列布局。实现了三列,变成两列和一列都会很简单。 2、 --> <div id="container"> <div id="header">头部</div> <div id="main"><!--这里不可直接写内容,否则dom结构会渲染出现问题--> <div id="left">左侧</div> <div id="middle">中间</div> <div id="right">右侧</div> </div> <div id="footer">底部</div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
3、利用浮动实现内容区的三列布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用浮动实现内容区的三列布局</title> <style> #container { width: 1000px; margin: 0 auto;/*让整个页面内容都随浏览器窗口大小而调整*/ } #header, #footer { height: 50px; background-color:rosybrown; } #main { margin: 5px auto; background-color:blanchedalmond; } #left { width: 150px; min-height: 800px; /*设置最小高度,可以确保在没有内容的情况下,仍能完整显示*/ background-color:wheat; } #middle{ min-height: 800px; /*只设置了最小高度,宽度自适应*/ background-color:tan; } #right { width: 150px; min-height: 800px;/*设置最小高度,可以确保在没有内容的情况下,仍能完整显示*/ background-color:aquamarine; } /*方案二:利用浮动实现内容区的三列布局*/ #left { float: left; } #right { float: right; } #middle{ float: left; width: 680px; margin-left: 10px; } #main { overflow: hidden;/*给父级清除浮动*/ } </style> </head> <body> <!-- 1、头部和顶部分别 置顶和置底,内容部分通常分为三列布局。实现了三列,变成两列和一列都会很简单。 2、 --> <div id="container"> <div id="header">头部</div> <div id="main"><!--主体--> <div id="left">左侧</div> <div id="middle">中间</div> <div id="right">右侧</div> </div> <div id="footer">底部</div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
4、双飞翼布局
关键在于dom结构,头部和顶部的内容区需要被包起来,内容区除了整体需要被包起来,内容区的中间部分还要被单独包起来。
利用浮动设置内容区三列的位置时,关键要理解左右的设置方式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style> .header .content { width: 1000px; height: 50px; background-color: rosybrown; margin: 0 auto; } /* 清空导航的默认样式 */ .header .content .nav { margin-top: 0; margin-bottom: 0; padding-left: 0; } /*清空列表的样式:清除前面的点*/ .header .content .nav .item { list-style-type: none; } /*对列表中的a标签进行设置*/ .header .content .nav .item a { float: left;/*为了实现菜单的点击与高亮,一定要将浮动设置到a标签上面*/ /* 设置最小宽度与最小高宽,以适应导航文本的变化 */ min-width: 100px; min-height: 50px; line-height: 50px;/*行高等于header高度,使文本居中*/ color: black; padding: 0 15px;/*是文本不要挨的太紧*/ text-decoration: none;/*清除a标签的下划线*/ text-align: center;/*文本居中*/ } .header .content .nav .item a:hover { /* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */ background-color: ghostwhite; /* 将导航文本设置为系统根字体大小的1.1倍 */ font-size: 1.1rem; } /*对内容区设置*/ .container { width: 1000px; /*min-height: 800px;*/ margin: 5px auto; background-color: lightgray; /*border: 2px solid red;*/ overflow: hidden; /*子级浮动以后,这样才能保住子级*/ } /*内容区中间部分的样式,要对其容器进行设置*/ .wrap { width: inherit; /* 继承父级区块container宽度 width:1000px; */ /* 高度也继承主体区块 */ min-height: 800px; background-color:lightgreen; } /*对内容区左右样式进行设置*/ .left { width: 200px; min-height: 800px; background-color: lightcoral; } .right { width: 200px; min-height: 800px; background-color: lightseagreen } /*将内容区 三部分 清浮动*/ .wrap, .left, .right { float: left;/* 因中间区块宽度100%,所以左右会被挤压到下面 */ } /*将left和right拉回到他们正确的位置上(重点)*/ .left { margin-left: -100%;/*通过设置区块的负外边距的方式,实现向反方向移动区块*/ /*margin-left: -1000px;*//* -100%等价于-1000px,将左区块拉回到中间的起点处*/ } .right { margin-left: -200px;/* -200px就正好将右区块上移到中间区块右侧显示 */ } /*将内容区中间部分显示出来*/ .main { padding-left: 200px; padding-right: 200px; } /*设置底部样式*/ .footer .content { width: 1000px; height: 50px; background-color: rosybrown; margin: 0 auto; } .footer .content p { text-align: center; line-height: 50px; } .footer .content a { text-decoration: none; color: black; } .footer .content a:hover { color: ghostwhite; } </style> </head> <body> <!-- 1、头部、内容区、底部都需要被包起来。 2、头部、底部中的内容也需要被包起来。 3、为了让内容区的中间部分优先被渲染,还要单独再包起来。 --> <div class="header"> <div class="content"> <ul class="nav"> <li class="item"><a href="">首页</a></li> <li class="item"><a href="">公司新闻</a></li> <li class="item"><a href="">最新产品</a></li> <li class="item"><a href="">关于我们</a></li> <li class="item"><a href="">联系我们</a></li> </ul> </div> </div> <div class="container"> <!-- 创建双飞翼使用的DOM结构 --> <div class="wrap"> <div class="main">主体内容区</div><!--内容区中间部分再被一个标签包裹起来--> </div> <div class="left">左侧</div> <div class="right">右侧</div> </div> <div class="footer"> <div class="content"> <p> <a href="">XXX网版权所有</a> <a href="">111111111</a> <a href="">川RT22222</a> </p> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例