-
head{ width:100%; height:100px; background:#ccc;} .main{width:100%;height:600px; background:#FCC;margin0 auto;} .footer{ width:100%;height:50px; background:#9CF;margin:0 auto;}查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
-
任务 任务1：完成顶部（top）、底部（foot）宽度自适应 任务2：中间分为2两栏，其中，左侧（left）宽度为200px， 右侧（right）宽度自适应 任务3：要求右侧（right）先加载，左侧（left）后加载 任务4：编写的代码要兼容ie6查看全部
-
1.如果是要清除浮动影响的是浮动对象的父对象： 建议采用：设置父对象的overflow:hidden; 2.如果要清除浮动影响的是浮动对象后边紧邻的对象 建议采用：clear:both;查看全部
-
最常用混合布局 页面上的元素是块与块之间的关系，存在于三种状态： 块挨着块、块嵌套着块和块叠压着块 通过CSS将块的位置摆放正确，网页的布局就完美查看全部
-
要求右侧（right）先加载，左侧（left）后加载；也就是说写html的时候先写right部分，<div class="right">right</div> <div class="left">left</div>。因而不能直接用float实现宽度方向的自适应，若直接用float，会出现left的顶部和foot的顶部在同一水平线上。查看全部
-
三列布局中，当左右两列定宽，中间自适应时。需对左右两列设定绝对定位，对中间设置左右margin值（分别为左右两列定宽值）查看全部
-
如果是要清楚浮动影响的父元素，则可以用overflow:hidden;<br> 如果是要清除浮动影响的之后的元素，后面的元素可以设置clear：both查看全部
-
要实现三列布局宽度自适应，在左右两列宽度固定的情况下，分别设置绝对定位position:absolute;且左列设置left：0；top:0;右列设置right:0;top:0;中间列设置margin值：0 右列宽度 0 左列宽度 ；便可实现三列布局中间列自适应查看全部
-
三列布局中，当左右两列定宽，中间自适应时。需对左右两列设定绝对定位，对中间设置左右margin值（分别为左右两列定宽值）查看全部
-
可以去查阅一下overflow:hidden的作用。查看全部
-
清除浮动的一种方法：“clear：both”查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;} .top{height:50px;background: orange;} .main{width:800px;height:400px;background: blue;margin: 0 auto;} .left{width:300px;height:400px;background: red;float: left;} .right{width:500px;height: 400px;background: pink;float: right;} .sub_l{width: 250px;height:400px;background: yellow;float:left;} .sub_r{width: 250px;height:400px;background: green;float:left;} .bottom{width:800px;height:50px;background: purple;margin: 0 auto;} </style> </head> <body> <div class="top"></div> <div class="main"> <div class="left"></div> <div class="right"> <div class="sub_l"></div> <div class="sub_r"></div> </div> </div> <div class="bottom"></div> </body> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;} .left{width:100px;height:500px;background:#666;position:absolute;top:0;left:0;} .right{width:200px;height:500px;background:#9cf;position:absolute;top:0;right:0;} .main{height:500px;background:purple;margin:0px 210px 0px 110px;} </style> </head> <body> <div class="left"></div> <div class="main">完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。如果代码无误，效果未出现，请拷贝到本地编辑器进行调试。</div> <div class="right"></div> </body> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一列布局</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px} div{ text-align:center; font-weight:bold} .main,.footer{ width:960px;} .head{ width:100%; height:100px; background:#ccc;} .main{ height:600px; background:#FCC;margin:0 auto;} .footer{ height:50px; background:#9CF;margin:0 auto;} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>查看全部
举报
0/150
提交
取消