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

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

如何用CSS进行网页布局

最热最新

lemonda

自适应 float:right/left

查看全部

0 采集收起来源：二列布局
2015-12-13
lemonda

居中 margin:0 auto

查看全部

0 采集收起来源：编程练习
2015-12-13
暴走大熊

注意点：1.绝对定位是跟着上一层设置position的祖元素走； 2.left、right、top等需要position才有效 3.margin-left等则不需要，它是跟着父容器走

查看全部

0 采集收起来源：编程挑战
2015-12-13
krystalcl001

自适应即在调节页面宽度时它也可以一起调节，其用百分比来设定

查看全部

0 采集收起来源：二列布局
2015-12-13
觉非夜

定宽元素居中的方法

查看全部

0 采集收起来源：练习题
2015-12-13
qq_不急高手_0

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

查看全部

0 采集收起来源：编程练习
2018-03-22
猫哥么

清除浮动： 1.clear:both 2.overflow:hidden

查看全部

0 采集收起来源：实践题
2015-12-12
qq_不急高手_0

<!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} div{ text-align:center; font-weight:bold} .head{ width:100%; height:100px; background:#ccc; margin:0 auto;} .main{ height:600px;width:960px; background:#FCC;margin:0 auto} .footer{ height:50px;width:960px; background:#9CF;margin:0 auto} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>

查看全部

0 采集收起来源：编程练习
2018-03-22
猫哥么

清除默认格式body{ margin:0; padding:0; font-size:30px}

查看全部

0 采集收起来源：编程练习
2015-12-12
李中 00:10

好

查看全部

0 采集收起来源：三列布局
2015-12-12
weibo_简爱之与_0

浮动和绝对定位可以让文档脱离文本流。相对定位不可以

查看全部

0 采集收起来源：评测题目
2015-12-11
justcallmeJason 04:21

分栏，常见布局

查看全部

0 采集收起来源：内容简介
2015-12-11
justcallmeJason 01:28

什么叫做布局？

查看全部

0 采集收起来源：内容简介
2015-12-11
rainbow12345

左侧固定，右侧自适应：当子元素要设定为absolute的时候，父元素要设定relative才可以。

查看全部

0 采集收起来源：编程挑战
2015-12-11
rainbow12345 02:36

一个左右固定，中间自适应的案例：（该案例定位不能用浮动）左右使用绝对布局定位，中间自适应（使用margin调整与左右的宽度）。 body{margin:0; padding:0;} //清除默认样式

查看全部

0 采集收起来源：三列布局
2015-12-11