如何用CSS进行网页布局_学习笔记

首页免费课如何用CSS进行网页布局笔记

如何用CSS进行网页布局

最热最新

hgliuxiong

Div{margin:0 auto}：居中对齐

查看全部

0 采集收起来源：练习题
2016-05-02
Mico_Cheung

float是紧贴跟随，所以要注意块与块的顺序

查看全部

0 采集收起来源：编程挑战
2016-05-02
Mico_Cheung

完全可以使用float，但是需要把原题目中的 <div class="right">left</div> <div class="left">right</div> 改成 <div class="left">left</div> <div class="right">right</div> 即要注意容器顺序，因为float是跟随。同时float不仅只使用两列布局，多列同样使用，关键是需要根据实际情况来选择最合适的方式。代码： <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:100%;height:100px;background:grey;} .main{width:100%;height:600px;background:red;} .left{width:200px;height:600px;float:left;background:blue;} .right{height:600px;margin-left:210px;background:green;} .foot{width:100%;height:100px;background:pink;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div class="foot">foot</div> </body>

查看全部

0 采集收起来源：编程挑战
2018-03-22
wyula

兼容性较好的三种清除浮动方法：<br> 一、设置父级高度<br> 二、使用overflow:hidden<br> 三、使用clear:both

查看全部

0 采集收起来源：实践题
2018-03-22
慕数据7770298

浮动（float）和绝对定位（position:abdsolute）：让元素脱离文档流。

查看全部

0 采集收起来源：评测题目
2016-05-02
慕数据7770298

浮动（float）和绝对定位（position）可以让元素脱离文档流。

查看全部

0 采集收起来源：评测题目
2016-05-02
袋子

position定位，不需要清除浮动。浏览器加载顺序是：从上到下，只要写在前面的就先加载

查看全部

0 采集收起来源：编程挑战
2016-05-01
阴天de向日葵177 04:07

buju

查看全部

0 采集收起来源：内容简介
2016-05-01
绝望的战斗鸡 02:59

删掉浮动，使用绝对定位

查看全部

0 采集收起来源：三列布局
2016-05-01
绝望的战斗鸡 01:25

css清除默认样式 body{margin:0;padding:0}

查看全部

0 采集收起来源：一列布局
2016-05-01
绝望的战斗鸡 03:26

单列布局

查看全部

0 采集收起来源：一列布局
2016-05-01
绝望的战斗鸡 04:18

一列，二列，三列，常用混合布局

查看全部

0 采集收起来源：内容简介
2016-05-01
慕粉3139527

div是块状元素，它会很霸道的占一行，从代码可以看出啊，整个的main内容块没有指定高度的，只有它的子内容块指定了高度，但是它的子内容块是浮动的，所以子内容块的高度不能影响成为main的高度，那么浏览器就默认了把footer的div显示在top的下一行，这个时候添加clear:both清除了上面模块的浮动特性，那么此时main的高度就是和子内容块的高度是一样的，因此浏览器就会把footer的div显示在main的下一行

查看全部

0 采集收起来源：实践题
2016-05-01
wbp3164295 03:01

两边设置了宽度，中间没有默认就是自适应的块元素和块元素之间的距离如果是这样的话，4-1节middle与left、right之间左右margin设置为0不就行了，为什么还要加上两边的宽度因为这里是绝对定位。其他元素和它可以覆盖的

查看全部

1 采集收起来源：三列布局
2016-05-01
wbp3164295 01:45

.left(width:200px;heght:500px;float:left;background:#ccc)<br> .middle(height:500px;float:left;background:#999)<br> .right(width:300px;height;500px;float:right;background:#ddd)<br> 浮动后的盒子上来后不再占一行，可以并排，这三个盒子在同一层面，由于中间那个盒子宽度没填默认100%所以要占一行

查看全部

1 采集收起来源：三列布局
2018-03-22