网页布局入门教程 如何用CSS进行网页布局
|
W3C标准：由万维网联盟制定的一系列标准：包括： CSS中的定位机制： 1、标准文档流（Normal flow）：从上到下，从左到右，输出文档内容，由块级元素（从左到右撑满页面，独占一行；触碰到页面边缘时，会自动换行。常见块级元素：div、lu、li、d、dt、p……）和行级元素(能在同一行内显示，不会改变HTML文档结构。常见行级元素：span、strong、img、input……)组成。 盒子模型：网页布局的基石，有四部分组成：
盒子的尺寸=边框+外边距+内边距+盒子中的内容尺寸 注：块级元素和行级元素都是盒子模型。 盒子3D模型：
常见页面布局及解决方案：
二、自动居中一列布局 关键词：标准文档流，块级元素，margin属性 自动居中一列布局需要设置margin左右值为auto，而且一定要设置宽度为一个定值。 auto会根据浏览器的宽度自动地设置两边的外边距 如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动和绝对定位属性 代码示例： 一列布局固定：
XML/HTML Code复制内容到剪贴板
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一列布局</title> <style> body{ margin:0; padding:0; font-size:30px} div{ text-align:center; font-weight:bold} .head, .main, .footer{ width:960px; margin:0 auto} /*margin属性及具体的宽度*/ .head{ height:100px; background:#ccc} .main{ height:600px; background:#FCC} .footer{ height:50px; background:#9CF} </style> </head>
<body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html> DEMO： 一列布局自适应：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一列布局</title> <style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .head, .main, .footer{width:80%;margin:0 auto} /*margin属性及定宽为百分比*/ .head{ height:100px; background:#ccc} .main{ height:600px; background:#FCC} .footer{ height:50px; background:#9CF} </style> </head>
<body> （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
