-
通过absolute属性定义具体位置查看全部
-
body{margin:0;padding:0} .main{width:800px;margin:0 auto;} .left{width:220px;height:500px;float:left;background:red;} .right{width:580px;height:500px;float:right;background:red;}查看全部
-
绝对定位查看全部
-
body{margin:0;padding:0} .main{width:800px;margin:0 auto} .left{width:220px;height:500px;float:left;background:#ccc;} .right{width:580px;height:500px;float:right;background:#ddd;}查看全部
-
清除浮动：clear:both;查看全部
-
清除默认样式： body{margin:0;padding:0}查看全部
-
分栏：查看全部
-
分栏又叫做分列，常见的布局有：一列布局、两列布局、三列布局、混合布局。查看全部
-
position:relative//相对定位 position:absolute//绝对定位 position:fixed//固定定位 float:left|right//浮动查看全部
-
clear:both清楚浮动查看全部
-
body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;width=100%;background-color:#999;} .main{height:500px;width=100%;background-color:red;position:relative;} .left{ width:200px;height:500px;background-color:blue;position:absolute; top:0;left:0;} .right{height:500px;width:100%;background-color:green;margin-left:210px;} .foot{height:50px;width=100%;background-color:orange;}查看全部
-
这里是一个排版陷阱：当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.clear:both 2.overflow:hidden查看全部
-
要点回顾： 其实在网页制作当中，页面中的元素就是块与块之间的关系： 块挨着块；块嵌套着块；块叠压着块 通过css将这些块摆放正确，网页布局就自然完美了。查看全部
-
二、两列布局： 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.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）的形式查看全部
举报
0/150
提交
取消