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

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

如何用CSS进行网页布局

最热最新

冷雨_0002 01:59

布局好1

查看全部

0 采集收起来源：混合布局
2016-11-25
章鱼wawa

一般两排布局用固定宽度，很少用自适应宽度

查看全部

1 采集收起来源：二列布局
2016-11-24
慕粉gogogo

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{margin: 0;padding: 0;} .top{width: 80%;height: 100px;margin: 0 auto;background: MistyRose;} .main{width: 80%;height: 400px;margin: 0 auto;background: red;position: relative;} .left{width: 200px;height: 400px;background: blue;position: absolute;left: 0;top: 0;} .right{height: 400px;background: PaleGreen;margin-left:210px;} .foot{width: 80%;height: 100px;margin: 0 auto;background: orange;} </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
梦想还是要有的万一实现了呢 01:39

什么叫做布局

查看全部

0 采集收起来源：内容简介
2016-11-24
慕慕2051798

body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;background:#9CF;} .main{height:600px;} .left{width:200px;height:600px;background:#ccc;position:absolute;} .right{width:100%;height:600px;background:#Fcc;position:absolute;margin-left:210px;} .foot{width:100%;height:100px;background:#9f9;clear:both;}

查看全部

0 采集收起来源：编程挑战
2016-11-23
image233

窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和绝对定位（position：absolute）-->脱离文档流脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。有三种情况使得元素离开文档流而存在，分别是浮动绝对布局固定定位

查看全部

2 采集收起来源：评测题目
2018-03-22
image233

自适应宽度布局用width用%，一般用固定大小布局。

查看全部

0 采集收起来源：二列布局
2016-11-23
image233

div是一个容器，可以划分出一个区域 margin：0 padding：0 清除默认样式重新布局 margin：0 auto水平居中 margin：0代表垂直方向 auto代表左右方向 margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right 因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）

查看全部

0 采集收起来源：一列布局
2016-11-23
小次liang

三列布局，左边设置定位方式absolute，左边设置定位方式absolute，分别设置它们的top left right值，中间元素设置margin 值自动设置

查看全部

0 采集收起来源：三列布局
2016-11-22
小次liang

绝对定位absolute 和 float 可以脱离文档流

查看全部

0 采集收起来源：三列布局
2016-11-22
Z星空下的等待J

clear:both使用：因为5-1视频中的main设置了高度，所以不需要里面的内容把它撑起来，footer就不需要清除浮动。反之5-2中的main没有设置高度。所以要清除浮动

查看全部

0 采集收起来源：实践题
2016-11-22
DonYu_K2

Div{width:800px; height:500px; margin:0 auto}

查看全部

0 采集收起来源：练习题
2016-11-21
呆胶布

混合布局实践：清除浮动的方法：一：clear:both(/left/right); 二：overflow:hidden;width:100%; 三：给main设置高度：.main{width:960px; {height:600px};margin:0 auto;} 四：margin:600px 0 0 0; 因为main包含的块全都设置了浮动，而浮动和绝对定位会使块脱离标准文档流，但是head仍在文档流中所以foot会忽略main的所有块而贴着head块

查看全部

0 采集收起来源：实践题
2016-11-20
呆胶布 03:51

...

查看全部

0 采集收起来源：混合布局
2016-11-20
21号0

margin：0 auto水平居中 margin：0代表垂直方向 auto代表左右方向 margin：0 padding：0 清除默认样式重新布局

查看全部

1 采集收起来源：一列布局
2016-11-20