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

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

如何用CSS进行网页布局

最热最新

精慕门8588110

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局编程挑战</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:50px;background:#ccc;} .main{height:960px;background:red;} .left{width:300px;height:960px;background:blue;position:absolute;left:0;top:50px;} .right{height:960px;background:#AAE27E;margin-left:310px;} .foot{height:30px;background:#E2452F;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>

查看全部

0 采集收起来源：编程挑战
2018-03-22
这是人生的开始丶

margin 0 auto 单列布局水平居中

查看全部

0 采集收起来源：一列布局
2016-04-06
死亡之翼death

单列布局:margin:o auto; 两列布局左float:left; 右float:right; 三列布局左加入属性width:300px;position:absolute;left:0; 中间加入属性margin:0 300px 0 200px; 右侧加入属性width:200px;position:absolute;right:0;

查看全部

0 采集收起来源：三列布局
2016-04-06
死亡之翼death

文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。有三种情况使得元素离开文档流而存在，分别是浮动绝对布局固定定位

查看全部

1 采集收起来源：评测题目
2016-04-05
qq_慕雪6279561

margin:0 auto 水平居中

查看全部

0 采集收起来源：编程练习
2016-04-05
慕UI3551539

把left right的width设小一点就可以左右留白了

查看全部

0 采集收起来源：编程练习
2016-04-05
慕UI3551539

文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流相对定位（position：relative），不可以脱离文本流浮动（float）和绝对定位（position：absolute）可以脱离文档流

查看全部

0 采集收起来源：评测题目
2016-04-05
qq_一切皆有可能_3 02:35

3列布局

查看全部

0 采集收起来源：三列布局
2016-04-04
决心绝不动摇 00:09

三列布局采用绝对定位

查看全部

0 采集收起来源：混合布局
2016-04-04
决心绝不动摇

浮动float和绝对定位能够脱离文档流

查看全部

0 采集收起来源：评测题目
2016-04-04
慕村3987768

CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。　　需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。所以用 clear :both:清除浮动是footer这个盒子不会紧跟在 top盒子之后，而是跟在main之后。

查看全部

1 采集收起来源：实践题
2016-04-04
慕村3987768

clear:both 是用来清除紧邻后面元素的浮动，如前一个div左浮动了，后面的div就会与其同行，假如你不想两个div同行显示，想让后面的div单独一行，你就可以用clear:both,可看做是兄弟元素之间浮动的清除。 width:100%;overflow:hidden可实现浮动清除，它一般用于清除父元素和子元素之间的浮动影响。

查看全部

1 采集收起来源：实践题
2016-04-04
Xu_Angel

.top{height:100px;background:#ccc;} .main{background:red;position:relative;height:500px;overflow:hidden;} .left{height:500px;width:200px;float:left;background:blue;} .right{height:500px;width:99%; position:absolute;margin:0 0 0 210px;background:#AAE27E;} .foot{height:50px; background:#E2452F;}

查看全部

0 采集收起来源：编程挑战
2016-04-04
echojson

相对定位（position：relative），不可以脱离文本流

查看全部

0 采集收起来源：评测题目
2016-04-04
Xu_Angel

.left{ width:200px; height:600px; background:#ccc; margin-right:10px;position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; margin-left:10px;position:absolute; top:0; right:0; background:#FCC;}

查看全部

0 采集收起来源：编程练习
2016-04-04