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

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

如何用CSS进行网页布局

最热最新

慕的地3779124 05:16

混全布局：块与块的布局　三种状态：块挨着块，块嵌套着块，块叠压着块。

查看全部

1 采集收起来源：混合布局
2016-09-27
慕的地3779124 02:35

三列时　中间自适应　左右用绝对定位

查看全部

0 采集收起来源：三列布局
2016-09-27
慕的地3779124

一列布局通常用于首页，为固定宽度，不适合多行文本。

查看全部

0 采集收起来源：一列布局
2016-09-27
慕的地3779124 04:16

布局又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。网页设计的特点：网页可以自适应宽度；网页的长度理论上没有限制。分栏又称为分列，常见布局分为：一列布局、二列布局、三列布局、混合布局。

查看全部

0 采集收起来源：内容简介
2016-09-27
Firework1102

margin采用上右下左

查看全部

0 采集收起来源：三列布局
2016-09-27
Firework1102 02:36

左右采用绝对定位中间采用 margin:0 300px 0 300px

查看全部

0 采集收起来源：三列布局
2016-09-27
无边萧下

混合布局 1.混合布局：我们可以把一列布局加入“左”和“右”改造为混合布局。 2.在中部mian中加入子div 分别是（左，右）。然后分别在style中加入“.left和.right”的样式！ 3.注“left和right”都要加浮动“float” 4.还可以在混合布局下进行更复杂的混合布局 5.可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局布局有一列、二列、三列和混合布局混合布局：将一列布局改造就变成了混合布局。即主体部分加上子div 要点回顾：其实在网页制作当中，页面中的元素就是块与块之间的关系：块挨着块；块嵌套着块；块叠压着块通过css将这些块摆放正确，网页布局就自然完美了。 1、margin:0 auto 自动居中 2、两种分成三栏的方式： 1）两边position：absolute，left：0/right：0，top:0，中间margin｛0 右边 0 左边｝ 2）先分两栏左右float 再分两栏左右float

查看全部

1 采集收起来源：混合布局
2016-09-27
无边萧下

1、自适应宽度：设置左：float：left;中：float:left;右：float:right; 2、左右固定宽度，中间自适应宽度：取消float,用position:absolute实现左：width:200px;position:absolute;left:0;top:0; 右：width:300px;position:absolute;right:0;top:0; 中：margin:0 300px 0 200px;(上右下左),如果需要与两侧之间有间距，只需要改变margin即可

查看全部

0 采集收起来源：三列布局
2016-09-27
慕慕1864727

absolute

查看全部

0 采集收起来源：三列布局
2016-09-26
慕慕1864727

float

查看全部

0 采集收起来源：编程练习
2016-09-26
慕粉3971573

两列布局： div设置margin：0 auto水平居中长、宽度设置为所占%可以自适应 float：可以设置浮动的位置为左侧/右侧，否则从右边开始计算固定宽度 left和right增加一个父div#main,使之嵌入其中，设置这个main的width，以及margin 0 auto；

查看全部

0 采集收起来源：二列布局
2016-09-26
qq_无名_41

div设置float属性之后，脱离文档流，footer相当于紧贴着head块，所以要进行清除浮动，或者设置main高度

查看全部

0 采集收起来源：实践题
2016-09-25
一首歌一一个故事

mea

查看全部

0 采集收起来源：编程练习
2016-09-25
酒窝MM

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)。有三种情况使得元素离开文档流，分别是浮动绝对布局固定定位

查看全部

0 采集收起来源：评测题目
2016-09-23
巴旦杏树

使用absolute进行布局的代码： <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:0px auto;position:relative} .head{ height:100px; background:#F90} .left{ width:220px; height:600px; background:#ccc; position:absolute;left:0px;top:0px} .right{ width:740px; height:600px;position:absolute;left:220px;top:0px; } .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 0 0 0} </style> </head> <body> <div class="top"> <div class="head">head</div> </div> <div class="main"> <div class="left">left</div> <div class="right"> <div class="r_sub_left">sub_left </div> <div class=" r_sub_right">sub_right </div> </div> </div> <div class="footer">footer</div> </body> </html>

查看全部

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