-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 可以让元素脱离文档流的两个CSS设置：浮动（float）和绝对定位（position：absolute）查看全部
-
网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性的化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 一般是头部，主体，底部。主体一般再根据需要分栏，一般两栏或者三栏，还有可能分为更多的栏目。常见分栏方式：一、二、三、列布局，混合布局查看全部
-
1.清除浮动方式： clear:both overflow:hidden 2.这里是一个排版陷阱：当main里面设置了左右两个div之后，这个时候不要忘记给main也设置和左右div一样的高度，题中的main是没有设置高度的，只设置了宽度，这个时候我们可以想象main其实就是一根高度为0的线条浮在top的下面，只是我们看不到，因为它没有高度。而footer是浮在main下面的，并不是浮在左右两个div下面，所以我们看到footer块莫名其妙跑上来盖住了左右两个div，解决办法如下： 第一，给main赋予和左右div同样大小的高度，这个是最直接的方法，main的高度从0变成600px之后，自然把以它为参照、浮在它屁股下面的footer压到下面去了； 第二，把footer的浮动清除掉，使用clear：both，这样footer从一个跟着main浮起来的飞行物变成了失去翅膀的元素，不能浮动，它就只能自动找最长的参照物（也就是很长的左右div），然后折行显示在底部了，一样能达到效果。 如果还不懂，可以将main的高度设置为height：300px，就一目了然了，因为这个时候main变成了300px，而footer会跟着main低300px显示在top下面。我们看不到main，不代表它不存在。查看全部
-
任务1：完成顶部（top）、底部（foot）宽度自适应 任务2：中间分为2两栏，其中，左侧（left）宽度为200px， 右侧（right）宽度自适应 任务3：要求右侧（right）先加载，左侧（left）后加载 任务4：编写的代码要兼容ie6 .top{width:100%;height:50px;background-color:gray;} .main{width:100%;height:500px;background-color:red;} .left{ width:200px;height:500px;background-color:blue;float:left;} .right{width:100%;height:500px;background-color:green;float:right; position:absolute;right:0px; left:210px} .foot{width:100%;background-color:#ccc} .top{width:100%;height:100px;background-color:#ccc;} .main{width:100%;background-color:red;position:relative;} .left{ height:600px;width:200px;left:0;top:0;background-color:blue; position:absolute;} .right{height:600px;background-color:#9ACC99;margin-left:210px;} .foot{width:100%; height:60px; background-color:#FF6534;}查看全部
-
清除浮动有两种方法：1.clear:both 2.overflow:hidden查看全部
-
块挨着块 块嵌套着块 块叠压着块 通过CSS把这些快的位置摆放正确 网页就完美了！查看全部
-
3列布局-特殊案例 左右列固定宽度，中间列自适应。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定义去掉，定义为auto，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中间空一点出的话，增加margin属性值便可以实现） 左右两侧布局固定宽度，中间部分宽度自适应。则需要采用绝对定位来实现，把左右设置为绝对定位查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流查看全部
-
混合布局： 将一列布局改造就变成了混合布局。 中间主体部分加上子div 要点回顾： 其实在网页制作当中，页面中的元素就是块与块之间的关系： 块挨着块；块嵌套着块；块叠压着块，这里如果是三列的话，视频里面是将right当成一个大块，里面再包含两个小块，分别左右浮动处理。【应该可以不用设置右侧为一个大块，直接再加一个块，然后浮动设置好就可以了。】 通过css将这些块摆放正确，网页布局就自然完美了。查看全部
-
视频中的特例也可以采用另一种方式，把Middle块放在right之后，就是left、right、Middle。然后设置left左浮动，right右浮动。 <html> <head></head> <style type="text/css"> body{ margin: 0; padding: 0; } #left{ background: #ccc; width: 200px; height: 500px; float: left; } #right{ background: red; width: 200px; height: 500px; float: right; } #middle{ background: yellow; } </style> <body> <div id="left">left</div> <div id="right">right</div> <div id="middle">middle</div> </body> </html>查看全部
-
三列布局，1.三列自适应，同前面两列布局，设置width，以及float，（视频里面的特殊例子【要求left和right固定width px，中间自适应】视频采用left设置position：left，rightposition：right，中间middle设置margin左右，没有设置width，说明width是auto的）查看全部
-
两列布局：1、宽度自适应（用的比较少），1.1因为宽度要自适应，所以要设置左侧left的width:xx%；1.2，需要左右排列，所以设置float:left；1.3另一侧right也设置width和float(left和right都可以吧，再微调) 2、固定宽度（☆☆☆☆☆）left和right增加一个父div#main,设置这个main的width，以及margin 0 auto；2.1如果要精确控制left和right的宽度，可以使用px【就是说也可以使用%粗略控制。】查看全部
-
一列布局，一般是1.固定宽度的。2.设置margin:0 auto查看全部
-
混合布局： 将一列布局改造就变成了混合布局。 主体部分加上子div 要点回顾： 其实在网页制作当中，页面中的元素就是块与块之间的关系： 块挨着块；块嵌套着块；块叠压着块 通过css将这些块摆放正确，网页布局就自然完美了。查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流查看全部
举报
0/150
提交
取消