-
.left{width:20%;height:500px;float:left;} .right{width:80%;height:500px;float:right} 两列自适应查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 浮动和绝对定位脱离文档流的区别 相同点：其他盒子都会无视被浮动或绝对定位的盒子； 不同点：盒子的内容会考虑被浮动的盒子，但任然会无视绝对定位的盒子。查看全部
-
两列的则用float实现，三列以上float失效，需要运用到absolute，中间部分再使用margin调试。 position：absolute；是绝对定位， left：0；是左边的div距离左边有0距离， 题目要求：main水平居中在浏览器中央，并且与左右div有10px的间距 210px=左部分的宽度200px+10px间距 .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} 310=右部分的宽度300px+10px间距 .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} 如果左外边距小于200px，右外边距小于300px，main和左右两边就没有间距了，甚至main中的部分内容会被遮盖掉，当然，左大于200px,右大于300px,可以看到效果的。但是也不要把数值设太大。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定义auto，定位：margin值：margin:0 10px 0 10px; 上右下左查看全部
-
1.混合布局：我们可以把一列布局加入“左”和“右”改造为混合布局。 2.在中部mian中加入子div 分别是（左，右）。 然后分别在style中加入“.left和.right”的样式！ 3.注“left和right”都要加浮动“float” 4.还可以在混合布局下进行更复杂的混合布局 5.可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局查看全部
-
margin:0 auto 居中查看全部
-
.left{position:absolut; left:0; top:0} .main{margin:0 10px} .right{position:absolut; left:0; top:0}查看全部
-
兼容IE6不能用浮动，而且当子元素要设定为absolute的时候，父元素要设定relative才可以。 要右侧自适应，则左侧应该定宽并且position：absolute。查看全部
-
两列的则用float实现，三列以上float失效，需要运用到absolute，中间部分再使用margin调试。查看全部
-
1.三列布局 代码如下 <head> <style type="text/css"> body{margin:0;padding:0} .left{width:33.33%;height:500px;float:left;background:#ccc} .middle{width:33.33%;height:500px;float:left;background:#999} .right{width:33.33%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </body> </html> 2.特殊的三列布局 如下代码 body{margin:0;padding:0} .left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0} .middle{height:500px;background:#999;margin:0 300px 0 200px} .right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0} </style> </head> <body> <div class="left">200px</div> <div class="middle"></div> <div class="right">300px</div> </body> </html>查看全部
-
在第10行div的样式中，background 的后面 输入float：left； 和11行 输入float：right；查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 浮动和绝对定位脱离文档流的区别 相同点：其他盒子都会无视被浮动或绝对定位的盒子； 不同点：盒子的内容会考虑被浮动的盒子，但任然会无视绝对定位的盒子。查看全部
-
1.二列布局 清除默认样式body{margin：0；padding：0} 如下代码 （这就是自适应宽度的布局，拖动页面的窗口可以“缩小或放大”页面的内容 宽度自适应（用的比较少），1.1因为宽度要自适应，） <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 若果想更确切的控制它的宽度可以将（%）改为像素（px）的形式查看全部
-
1.一列布局不适于存放文本，太长容易看走眼 一列布局： 1.通常作为网页头部。固定宽度。 2.正真开发，高度设置自动的。 两列布局自适应，使用百分比。 三列布局，使用绝对定位和margin。 盒子之间的三种关系： 1、相邻 2、嵌套 3、叠加 我们要做的就是摆放好盒子的位置。 关于页面上元素的加载顺序： 元素是从前往后依次加载的，要想先加载就要写在前面。 通常left部分是作为菜单，right部分作为主体内容，我们打开网页，都希望先看到 主体内容，所以有意把right部分写在left部分前面，然后把right部分右浮动，left部分左浮动， 这样布局不会出现问题，而且还解决了IE6下右浮动换行的问题。 ------------------------------ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;} .main{width: 800px;height:600px;background-color: #ccc;margin: 0 auto;} .top{height:100px;background-color: blue;} .foot{width: 800px;height:100px; background-color: #900;margin: 0 auto;} </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body> </html>查看全部
-
网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性的化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 一般是头部，主体，底部。主体一般再根据需要分栏，一般两栏或者三栏，还有可能分为更多的栏目。常见分栏方式：一、二、三、列布局，混合布局。查看全部
-
没有定义TOP 和 FOOT 的文本位置查看全部
举报
0/150
提交
取消