-
这里用到了定位技术 /*原本设置了宽度自适应后，由于DIV的特性，他会沾满整行，因为左右两侧div都设置了宽度，因此中间宽度自适应的div将重启一行 显示，导致页面错乱，在这种情况下，实现左中右三列布局的原理是，将自适应DIV设置margin外部填充，将左右两边的DIV的宽度让出来 最后，中间的DIV就又回到中间的位置上，由于通过设置margin填充，使得三个div元素配合绝对定位，可以存在与一行，因此实现了三列布局。 */查看全部
-
在写下查看全部
-
<style type="text/css"> body{margin:0;padding:0;} .top{height:100px;background:blue;} .main{width:800px;height:300px;background:#ccc;margin:0 auto;} .foot{width:800px;height:100px;background:#900;margin:0 auto;} </style> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body>查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
-
margin：0 auto；查看全部
-
清除浮动是clear：both查看全部
-
页面布局有叫板式布局 分栏又叫做分列，通常使用混合布局（头部、内容、底部）查看全部
-
clear:both div是块状元素，它会很霸道的占一行，从代码可以看出啊，整个的main内容块没有指定高度的，只有它的子内容块指定了高度，但是它的子内容块是浮动的，所以子内容块的高度不能影响成为main的高度，那么浏览器就默认了把footer的div显示在top的下一行，这个时候添加clear:both清除了上面模块的浮动特性，那么此时main的高度就是和子内容块的高度是一样的，因此浏览器就会把footer的div显示在main的下一行； 你可以尝试把clear:both语句清除，然后定义如下的样式 .main{height:600px;}；把main的高度加上，那么浏览器也会正确显示的查看全部
-
body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:100%; height:50px;background:gray;} .main{width:100%; height:300px;background:red;} .left{width:200px;height:300px;background:blue;float:left;} .right{margin-left:210px;width:100%;height:300px;background:green;position:absolute;} .foot{width:100%; height:50px;background:orange;}查看全部
-
编程练习 学习完《二列布局》课程后，完成本次实战练习，快来检验你的实战成果吧！任务最终效果如下： 任务 1.请在编辑器第10行补充div左浮动样式 2.请在编辑器第11行补充div右浮动样式 温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。如果代码无误，效果未出现，请拷贝到本地编辑器进行调试。查看全部
-
编程练习 学习完《一列布局》课程后，完成本次实战练习，快来检验你的实战成果吧！ 任务 请补充完整代码，完成代码编辑器中的任务1，要求main和footer在浏览器中水平居中。如下图所示： 温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。如果代码无误，效果未出现，请拷贝到本地编辑器进行调试。查看全部
-
<style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:100%; height:50px;background:gray;} .main{width:100%; height:300px;background:red;} .left{width:200px;height:300px;background:blue;float:left;position:absolute;} .right{margin-left:210px;width:100%;height:300px;background:green;float:left;position:absolute;} .foot{width:100%; height:50px;background:#369;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body>查看全部
-
body{margin:0; padding:0;}清除默认样式查看全部
-
清除浮动两种方法：1. clear:both; 2. overflow:hidden.查看全部
-
position:absolute;left:0;top:0 margin:0 300px 0 200px查看全部
举报
0/150
提交
取消