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

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

如何用CSS进行网页布局

最热最新

复制第五季 02:41

margin:0 auto 使样式居中

查看全部

0 采集收起来源：二列布局
2016-07-18
weibo_海深不蓝1987_03563394

浮动（float）和绝对定位(postion:absolute)可以让元素脱离文档流

查看全部

0 采集收起来源：评测题目
2016-07-18
JessieLL

文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。有三种情况使得元素离开文档流而存在，分别是浮动绝对布局固定定位

查看全部

0 采集收起来源：评测题目
2016-07-18
我笑一世浮华

自适应三列布局：设置浮动无效，需要进行定位设置。左右进行绝对定位position:absolute;left:0;top:0;中间列进行水平居中的设置：margin:0 300px 0 200px;(上右下左) 三列布局填充自适应宽度 X Y Z为变量 X+Y+Z=100 .divleft {float:left;width:X%} .divmiddle {float:left;width:Y%} .divright {float:right;width:Z%} 三列布局中部自适应宽度 .divleft {width:Xpx;position:absolute;top:0;left:0;} .divmiddle {margin:0px Ypx 0px Xpx;} .divright {width:Ypx;position:absolute;top:0;right:0;}

查看全部

0 采集收起来源：三列布局
2016-07-18
arieslx

利用position布局 <!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; font-weight:bold} div{ line-height:50px} .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;} </style> </head> <body> <div class="left">left</div> <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div> <div class="right">right</div> </body> </html>

查看全部

0 采集收起来源：编程练习
2018-03-22
尼奥_丑不拉几

clear:both 就是不受float 的影响

查看全部

0 采集收起来源：编程挑战
2016-07-18
尼奥_丑不拉几

要把left绝对定位在左边并且设置距离左边距以及上边距的位置

查看全部

0 采集收起来源：编程挑战
2016-07-18
Ugovl

清楚浮动的方法综合一下答案：一：clear:both(/left/right); 二：overflow:hidden;width:100%; 三：给main设置高度：.main{width:960px; {height:600px};margin:0 auto;} 四：margin:600px 0 0 0; 推荐使用方法一和方法二，在给footer使用overflow的时候，千万不要忘记设置它的宽度。

查看全部

0 采集收起来源：实践题
2016-07-18
梵心

宽度自适应则应该按照百分比来设定。

查看全部

0 采集收起来源：二列布局
2016-07-18
梵心

margin:0 auto;可以使布局居中。

查看全部

0 采集收起来源：二列布局
2016-07-18
Ahzy

因为Main是float样式，所以footer如果不清除浮动clean:both会造成footer位于MAIN下层，虽然文字不会显示的main的下面，因为是float...

查看全部

0 采集收起来源：实践题
2016-07-17
Ahzy

两边确定宽度固定定位中间用MARGIN 可以做出中间自适应布局

查看全部

0 采集收起来源：编程练习
2016-07-17
慕1001

自适应的宽度用百分比或者不设置宽度，不过margin的左右两边要设置好，为左右两个框架的宽度，不是自适应的话用px

查看全部

0 采集收起来源：三列布局
2016-07-17
610661

网页设计的特点：1.网页自适应宽度2.网页长度无限制分栏又叫分列，常见的布局分为：一列布局；两列布局；三列布局；混合布局。

查看全部

0 采集收起来源：内容简介
2016-07-16
浮生3637032

0.0

查看全部

0 采集收起来源：编程练习
2016-07-16