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

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

如何用CSS进行网页布局

最热最新

仰望01

1.clear: both 的用处就是清除上方元素“浮动导致高度坍塌”容器高度为0。因为上面没给mian设置高度 2. 清楚了 clear: both 是用来清除浮动之后加入 #footer 上方的元素是设置了 float或者 #footer 上方的元素的子元素设置了 float导致高度坍塌#footer 就会被上方的元素遮盖了导致 #footer 显示不出来来自他人

查看全部

0 采集收起来源：实践题
2016-06-24
JAVAxiao8

上面的代码没有给main设置高度，而main里的内容又设置成了浮动，所以footer会跑到head的下面。解决方法有两个：1.清除浮动， clear:both; 2.为main设置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; }

查看全部

0 采集收起来源：实践题
2016-06-23
JAVAxiao8

.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} 左边和右边是绝对定位，相对浏览器一个left:0,一个right:0. 中间部分采取外边距,上下距离为零，距离左边是200px，右边是300px，如果想留下空隙，增加间隔就行，

查看全部

0 采集收起来源：编程练习
2016-06-23
qq_化简_0 02:01

position:absolute left:0

查看全部

0 采集收起来源：三列布局
2016-06-23
程序员fly

文档流是什么玩意

查看全部

0 采集收起来源：评测题目
2016-06-22
CoderPoet

用到相对定位和绝对定位可以复习下

查看全部

0 采集收起来源：编程挑战
2016-06-22
CoderPoet

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程挑战1</title> <style> body{margin:0;padding: 0;font-size: 20px;font-weight: bold;text-align: center;} .top{width:100%;background:#999;height: 100px;line-height: 100px;} .main{background:#666;position:relative;} .left{background:#888;width:200px;height:200px;position:absolute;left:0;top:0;line-height: 200px;} .right{background:#ccc;height:200px;margin-left:210px;line-height: 200px;} .foot{width:100%;background:#777;height: 100px;line-height: 100px;} </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> </html>

查看全部

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

三列布局且中间只适应可利用绝对定位两边中间利用margin来调节

查看全部

0 采集收起来源：编程练习
2016-06-22
lyxc_0101

清楚浮动的方法综合一下答案：一：margin:600px 0 0 0; 二：clear:both(/left/right); 三：给main设置高度：.head,.main{ width:960px; 【height:600px】;margin:0 auto;} overflow在这里会把footer直接删除，所以不算正确的清除浮动。

查看全部

0 采集收起来源：实践题
2016-06-22
艾宾浩斯

margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right 因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）

查看全部

0 采集收起来源：练习题
2016-06-21
移动果味

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

查看全部

0 采集收起来源：评测题目
2016-06-21
移动果味

有几个非常不错的前端开发在线工具，分享给一起学习的小伙伴们，别忘了收藏，很实用。（1）在线代码测试工具：http://www.lvyestudy.com/tools/run_code.aspx；（2）在线调色板：http://www.lvyestudy.com/tools/color_picker.aspx；（3）CSS3圆角生成器：http://www.lvyestudy.com/tools/border_radius.aspx

查看全部

0 采集收起来源：练习题
2016-06-21
nwustudent

终于自己认真写一次笔记啦O(∩_∩)O哈哈哈~ 刚才看的是三列布局，除了用浮动式，比如：float：left；讲了一个特殊的例子，就是左右两边固定像素，中间是浮动的，在这个例子中， .left{width:200px;height:600px;background:#ccc;position:absolute;left:0;top:0} .main{height:600px;margin:0 310px 0 210px;background:#9cf}<!- -注意margin里的左右顺序> .right{height:600px;width:300px;position:absolute;top:0;right:0;background:#fcc;}

查看全部

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:100px;background:#9cf;} .main{width:960px;height:600px;background:red;margin:0 auto;} .left{ width:220px;height:600px;background:#ccc;float:left;} .right{width:730px;height:600px;background:blue;float:right;} .foot{height:50px;background:#9f9;margin:0 auto;} </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
study_fly

二列布局用浮动三列布局绝对定位

查看全部

0 采集收起来源：编程挑战
2016-06-21