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

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

如何用CSS进行网页布局

最热最新

嘉熙

本节有非常有用的五个分区布局

查看全部

0 采集收起来源：编程挑战
2017-04-18
金小行

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

查看全部

0 采集收起来源：评测题目
2017-04-18
国王陛下

超过容器宽度的话会使容器内超过尺寸的块面上下交错修改时注意查看main尺寸

查看全部

0 采集收起来源：编程练习
2017-04-18
慕粉15256022735

混合布局：float实现不了定位，就使用position：绝对定位、

查看全部

0 采集收起来源：编程挑战
2017-04-17
蓝色的天空5 03:26

结构框架

查看全部

0 采集收起来源：一列布局
2017-04-17
苏千澪

<!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:20px;background-color:red} .top{height:100px;width:100%;background-color:gray;} .main{height:600px;width:100%;margin:0 auto 0 auto;background-color:red;} .left{height:600px;width:200px;background-color:blue;position:absolute;top:100px;left:0;} .right{height:600px;margin:0 0 0 210px;background-color:green;} .foot{height:50px;width:100%;background-color: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
苏千澪

<style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .head,.main{ width:960px;margin:0 auto;} .head{ height:100px; background:#F90} .left{ width:220px; height:600px; background:#ccc; float:left;} .right{ width:740px; height:600px;background:#FCC; float:right} .r_sub_left{ width:540px; height:600px; background:#9C3; float:left} .r_sub_right{ width:200px; height:600px; background:#9FC; float:right;} .footer{ height:50px; background:#9F9;margin:600px auto 0;} </style> </head>

查看全部

0 采集收起来源：实践题
2018-03-22
苏千澪

.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;}

查看全部

0 采集收起来源：编程练习
2017-04-16
dymkw

三列布局（左右固定宽度，中间自适应）的方法：左右设置绝对定位，中间居中。

查看全部

0 采集收起来源：三列布局
2017-04-15
上帝作证我是个好人

清除浮动有两种做法：1 没撑开的元素设置：overflow:hidden; 2 跑上去的元素设置clear:both;

查看全部

0 采集收起来源：实践题
2017-04-14
上帝作证我是个好人

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

查看全部

0 采集收起来源：评测题目
2017-04-14
我们一起生活的日子

由于main块没有设置高度,里面的元素（left块,right块）又被设置成了浮动显示,这样就脱离了文档流，所以main块没有被撑开,就像一条线一样紧贴在head块的下面,所以footer块就会跑上去到head块下面。清除浮动有两种做法：1 没撑开的元素设置：overflow:hidden; 2 跑上去的元素设置clear:both;

查看全部

0 采集收起来源：实践题
2017-04-14
qq_陌

overflow:hidden 作用是超出区域则隐藏，不出现滚动条，作用于父元素。如果当前div没有高宽限制，则随内边的容器而变化。 clear:both 就是清除浮动，作用于子元素。 http://www.cnblogs.com/socool-hu/p/5633110.html

查看全部

0 采集收起来源：实践题
2017-04-10
一个丑八怪

margin: 0 auto; 水平居中

查看全部

0 采集收起来源：编程练习
2017-04-09
qq_齐步走_1

<!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:#ccc;} .main{height:500px;background:red;} .right{height:500px;background:green;position:absolute;right:0;left:210px;} .left{width:200px;height:500px;background:blue;float:left; } /*看评论里有人代码和我一样，却有问题，为什么呐？我这left里面用float不用absolute也好好的呀*只要right用absolute就好了*/ /*.right{height:500px;background:green;position:absolute;right:0;left:210px;}*/ .foot{height:50px;background:gray;} </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