-
1. position:absolute,绝对定位，用left/top等定住绝对位置，适用于左边蓝色框（固定位置，固定宽度） 2. margin最好用于有父类的情况，注意区别margin-left与left的区别 3. 右边绿色框宽度自适应，则不定义宽度，固定其左margin为左框加余量，剩下的不定义。注意其position：absolute。右框如果用float：right则需要定义其宽度。当浏览器宽度过小，则会发生两框重叠。若左框不是absolute还会使左框到下一行的位置。 所以【如果不希望浏览器窗口变动导致分栏移位，不要用float】。 注释中是他人代码。查看全部
-
1.如果是要清除浮动影响的是浮动对象的父对象： 建议采用：设置父对象的overflow:hidden; 2.如果要清除浮动影响的是浮动对象后边紧邻的对象 建议采用：clear:both;查看全部
-
代码没有给main设置高度，而main里的内容又设置成了浮动，所以footer会跑到head的下面。 解决方法有两个：1.清除浮动， clear:both; 2.为main设置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; } 清楚浮动的方法综合一下答案： 一：clear:both(/left/right); 二：overflow:hidden;width:100%; 三：给main设置高度：.main{width:960px; {height:600px};margin:0 auto;} 四：margin:600px 0 0 0; 推荐使用方法一和方法二，在给footer使用overflow的时候，千万不要忘记设置它的宽度。查看全部
-
1、margin:0 auto 自动居中 2、两种分成三栏的方式： 1）两边position：absolute，left：0/right：0，top:0， 中间margin｛0 右边 0 左边｝ 2）先分两栏 左右float 再分两栏左右float 局实际上市块与块之间的关系，它们存在于三种状态： ①块挨着块； ②块嵌套着块； ③块压着块。 盒子之间的三种关系： 1、相邻 2、嵌套 3、层叠 我们要做的就是摆放好盒子的位置。查看全部
-
3列布局-特殊案例 左右列固定宽度，中间列自适应。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定义去掉，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中间空一点出的话，增加margin属性值便可以实现） 左右两侧布局固定宽度，中间部分宽度自适应。则需要采用绝对定位来实现，把左右设置为绝对定位查看全部
-
<style type="text/css"> body{margin:0;;padding:0} .left{width:200px;heigth:500px;position:absolution;left:0;background:#ccc} .middle{width:500px;heigth:500px;maigin:0,30px,0,30px;background:#999} .rigth{width:300px;heigth:500px;position:absolution;right:0;background:#ddd}//自适应三列布局 </style> </head> <body> <div class="left">200px</div> <div class="middle">自适应宽度</div> <div class="right">300px</div> </body>查看全部
-
这节课主要讲了网页的简单介绍； 网页的主要元素是文本和图片，网页设计的特点有两个（一个是网页可以自适应宽度、二是网页的长度理论上没有限制） 网页一般分为三部分：头部、内容、底部；再根据内容的多少给网页分栏（又称分列）：一列布局、二列布局、三列布局、混合布局等）查看全部
-
body{margin:0;padding:0} .main{width:500px;margin:0 auto} .left{width:20%；heigth:500px;float:rigth}//自适应宽度 .rigth{width:80%;heigth:500px;float:right} <div class=main> <div class="left"></div> <div class="rigth"></div> </div>查看全部
-
一列布局：简单明了，主题突出，不适合多行文字 body{margin:0;padding:0} .top{heigth:100px;background:blue} .main{width:800px;heigh:300px;background:#ccc;margin:0 auto//水平居中} .foot{width:800px;heigth:300px;backgoung:#ccc;margin:0 auto} </style> <div class="top"></div> <div class="main"></div> <div class="foot"></div>查看全部
-
页面间的元素就是块和块之间的关系 块连着块 块嵌套块 块叠压块查看全部
-
混合布局代码查看全部
-
第一列 第三列固定宽度 中间自适应宽度代码查看全部
-
三列布局代码查看全部
-
两列布局代码查看全部
-
自适应宽度的两列布局用的很少 更多的是固定宽度查看全部
举报
0/150
提交
取消