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

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

如何用CSS进行网页布局

最热最新

d一w一b 02:57

position: absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit 规定应该从父元素继承 position 属性的值。

查看全部

0 采集收起来源：三列布局
2018-03-22
蒲公英shine

清除浮动： 1.clear:both 2.width:100%;overflow:hidden. 3.overflow:none

查看全部

0 采集收起来源：实践题
2016-03-10
琴之姐 02:55

三列自适应布局

查看全部

0 采集收起来源：三列布局
2016-03-10
米虫VIP

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

浮动（float）和绝对定位（position:absolute）这两个CSS设置，可以让元素脱离文档流

查看全部

0 采集收起来源：评测题目
2016-03-09
其实TAMA酱不是我名字

为什么给right设置浮动的话它会有宽度？

查看全部

0 采集收起来源：编程挑战
2016-03-09
天朵白雲

这里是一个排版陷阱：当main里面设置了左右两个div之后，这个时候不要忘记给main也设置和左右div一样的高度，题中的main是没有设置高度的，只设置了宽度，这个时候我们可以想象main其实就是一根高度为0的线条浮在top的下面，只是我们看不到，因为它没有高度。而footer是浮在main下面的，并不是浮在左右两个div下面，所以我们看到footer块莫名其妙跑上来盖住了左右两个div，解决办法如下：第一，给main赋予和左右div同样大小的高度，这个是最直接的方法，main的高度从0变成600px之后，自然把以它为参照、浮在它屁股下面的footer压到下面去了；第二，把footer的浮动清除掉，使用clear：both，这样footer从一个跟着main浮起来的飞行物变成了失去翅膀的元素，不能浮动，它就只能自动找最长的参照物（也就是很长的左右div），然后折行显示在底部了，一样能达到效果。如果还不懂，可以将main的高度设置为height：300px，就一目了然了，因为这个时候main变成了300px，而footer会跟着main低300px显示在top下面。我们看不到main，不代表它不存在。

查看全部

0 采集收起来源：实践题
2016-03-09
天朵白雲 04:12

再复杂点？

查看全部

0 采集收起来源：混合布局
2016-03-09
天朵白雲 03:22

稍微复杂点的混合布局

查看全部

0 采集收起来源：混合布局
2016-03-09
天朵白雲 02:26

简单混合布局

查看全部

0 采集收起来源：混合布局
2016-03-09
天朵白雲 03:00

这一节的代码 margin上右下左

查看全部

0 采集收起来源：三列布局
2016-03-09
null__

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

查看全部

0 采集收起来源：实践题
2016-03-09
慕前端6166722

一列布局：网站首页使用。

查看全部

0 采集收起来源：一列布局
2016-03-08
米虫VIP

<style type="text/css"></style>表示这是样式表,在中间放入css内容； type是它的类型属性，text/css是它的值，它们是告诉浏览器这里面的文本内容(text)要当层叠样式表 (css)来解析，不能当作其它的来解析。

查看全部

0 采集收起来源：三列布局
2018-03-22
米虫VIP

自适应百分比 body{margin:0;padding:o;} main{width:800px;margin:0 auto;} .left{height:500px;width:20%;float:left;background-color:red;} .right{height:500px;width:80%;float:right;background-color:blue;}

查看全部

0 采集收起来源：二列布局
2016-03-08