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

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

如何用CSS进行网页布局

最热最新

schokolade

宽度自适应用百分比来表示

查看全部

0 采集收起来源：二列布局
2016-03-26
楼台小巷

main的高度设定为600px，就是和left一样高，如果不设置的话，因为left和right都设置为了float，那么元素就会脱离，在没有显示的地方比如最左边和最右边，那么footer就会显示补全。。。所以要么清楚浮动要么给main设置高度

查看全部

0 采集收起来源：实践题
2016-03-26
Mad_Wayne

<!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{width:100%;background:gray;height:100px;} .main{width:100%;background:red;height:500px;position:relative;} .left{width:200px;position:absolute;background:blue;height:500px;top:0;} .right{background:green;height:500px;margin-left:210px;} .foot{width:100%;background:orange;height:100px;} </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>

查看全部

1 采集收起来源：编程挑战
2018-03-22
任性不是罪

1、清除body自适应: body{margin:0;padding:0;} 2、元素自动居中： margin:0 auto; (这时不能在使用浮动属性和绝对定位属性和固定定位属性)

查看全部

1 采集收起来源：一列布局
2016-03-25
任性不是罪

在使用浮动时，如果是布局自适应的话，宽度必须使用百分比！！！！！！！

查看全部

0 采集收起来源：三列布局
2016-03-25
Sixteen_mm

隐藏溢出的条件： 1、拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式； 2、内部溢出的元素是通过position:absolute绝对定位；

查看全部

0 采集收起来源：编程挑战
2016-03-25
大白菜001

三版式模板

查看全部

0 采集收起来源：编程挑战
2016-03-24
黄小亮

Div{width:800px; height:500px; margin:0 auto} 居中对齐

查看全部

0 采集收起来源：练习题
2016-03-24
mandyllano

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

查看全部

0 采集收起来源：实践题
2018-03-22
巫子兔

<!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:60px;background:#ccc;} .main{height:600px;width:100%;background:red;positive:relative;} .left{ height:600px;width:200px;background:blue;position:absolute;left:0;top:60px;} .right{height:600px;background:#9c9;margin:0 auto 0 210px;} .foot{height:60px;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> 自适应用margin，定位absolute

查看全部

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

position:absolute top:xxx left/right:xxx固定位置

查看全部

0 采集收起来源：编程挑战
2016-03-24
菜鸟_0024

<!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:#000} .top{background:#ccc;height:100px;} .main{background:red;} .left{background:blue;height:500px;width:200px;position:absolute;left:0;top:100px;} .right{background:green;margin-left:210px;height:500px} .foot{background:#f63;height:50px;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">rigth</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>

查看全部

0 采集收起来源：编程挑战
2018-03-22
子不语96

margin:0 auto 水平居中，放在代码后面

查看全部

0 采集收起来源：编程练习
2016-03-24
Rising_sune

<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{width:100%;background:RGB(204,204,204);height:100px;} .main{background:red;overflow:hidden;position:relative;}/*使left以main为基准绝对定位*/ .left{ width:200px;height:500px;background:blue;position:absolute;left:0;top:0;} .right{height:500px;background:RGB(154,204,153);margin-left:210px;} .foot{width:100%;background:RGB(255,102,52);}/*因为是position实现排版,所以不需要清除浮动*/ </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>

查看全部

0 采集收起来源：编程挑战
2018-03-22
追梦的孩子09

<!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:100px; background:grey} .main{background:red;} .left{ left:0;top:100px;height:200px;width:200px;background:blue;position:absolute;} .right{margin-left:210px;height:200px;background:green;} .foot{background:yellow;} </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