首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

网页布局入门教程 如何用CSS进行网页布局

所属分类： 网页制作 / CSS 阅读数： 1492
收藏 0 赞 0 分享

一、基础概念

W3C标准：由万维网联盟制定的一系列标准：包括：
结构化标准语言（HTML和XML）；
表现标准语言（CSS）；
行为标准语言（DOM和ECMAScript）。
  倡导结构，样式，行为分离。

CSS中的定位机制：

1、标准文档流（Normal flow）：从上到下，从左到右，输出文档内容，由块级元素（从左到右撑满页面，独占一行；触碰到页面边缘时，会自动换行。常见块级元素：div、lu、li、d、dt、p……）和行级元素(能在同一行内显示，不会改变HTML文档结构。常见行级元素：span、strong、img、input……)组成。
2、浮动（Floats)：
3、绝对定位（Absolute positioning）：

盒子模型：网页布局的基石，有四部分组成：
边框（border）、外边距（margin）、内边距（padding）、盒子中的内容（content）。如下图：

盒子的尺寸=边框+外边距+内边距+盒子中的内容尺寸

注：块级元素和行级元素都是盒子模型。

盒子3D模型：

常见页面布局及解决方案：

二、自动居中一列布局

关键词：标准文档流，块级元素，margin属性

自动居中一列布局需要设置margin左右值为auto，而且一定要设置宽度为一个定值。

  auto会根据浏览器的宽度自动地设置两边的外边距

如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动和绝对定位属性

代码示例：

一列布局固定：

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>一列布局</title>  
  5. <style>  
  6.     body{ margin:0; padding:0; font-size:30px}   
  7.     div{ text-align:center; font-weight:bold}   
  8.     .head, .main, .footer{ width:960px; margin:0 auto} /*margin属性及具体的宽度*/   
  9.     .head{ height:100px; background:#ccc}   
  10.     .main{ height:600px; background:#FCC}   
  11.     .footer{ height:50px; background:#9CF}   
  12. </style>  
  13. </head>  
  14.   
  15. <body>  
  16.     <div class="head">head</div>  
  17.     <div class="main">main</div>  
  18.     <div class="footer">footer</div>  
  19. </body>  
  20. </html>  

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/yilieguding.html

一列布局自适应：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>一列布局</title>  
  6. <style>  
  7.     body{ margin:0; padding:0; font-size:30px; font-weight:bold}   
  8.     div{ text-align:center; line-height:50px}   
  9.     .head, .main, .footer{width:80%;margin:0 auto} /*margin属性及定宽为百分比*/   
  10.     .head{ height:100px; background:#ccc}   
  11.     .main{ height:600px; background:#FCC}   
  12.     .footer{ height:50px; background:#9CF}   
  13. </style>  
  14. </head>  
  15.   
  16. <body>  
  17.     <div class="head">head</div>  
  18.     <div class="main">main</div>  
  19.     <div class="footer">footer</div>  
  20. </body>  
  21. </html>  
  22.   

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/yiliezishiying.html

三、横向两列布局

浮动布局：CSS中规定的第二种定位机制；能够实现横向多列布局；通过设置float属性实现。

  float属性：left | right | none

特点：元素会左移，或右移，直至触碰到容器为止。

注：设置了浮动的元素，仍旧处于文档流中。当元素没用设置宽度值。若设置了浮动属性，元素的宽度随内容的变化而变化。当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指相邻后面的元素。

清除浮动的方法：

  clear属性——常用clear：both;clear:left;或者clear:right；同时设置width：100%（或固定宽度）+overflow：hidden；

横向两列布局是网页布局最常见的方式之一

主要应用技能：

  float属性——使纵向排列的块级元素，横向排列
  margin属性——设置两列之间的间距

注：（1）当父包含块缩成一条时，用clear：both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动。
（2）div块的高度一般不需要设置。

代码示例

两列居中固定

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>二列布局</title>  
  5. <style>  
  6. body{ margin:0; padding:0; font-size:30px; font-weight:bold}   
  7. div{ text-align:center; line-height:50px}   
  8. .left{ width:20%; height:600px; background:#ccc; float:left}   
  9. .right{ width:80%; height:600px; background:#FCC; float:right}   
  10. </style>  
  11. </head>  
  12.   
  13. <body>  
  14.   <div class="left">left</div>  
  15.   <div class="right">right</div>  
  16. </body>  
  17. </html>  
  18.   

DEMO：http://Lovejulyer.github.io/Source_Code//Blog_demo/Codes2/liangliejuzhingguding.html

两列居中自适应：**

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>二列布局</title>  
  5. <style>  
  6. body{ margin:0; padding:0; font-size:30px; font-weight:bold}   
  7. div{ text-align:center; line-height:50px}   
  8. .main{ width:80%; height:600px; margin:0 auto}   
  9. .left{ width:20%; height:600px; background:#ccc; float:left}   
  10. .right{ width:80%; height:600px; background:#FCC; float:right}   
  11. </style>  
  12. </head>  
  13.   
  14. <body>  
  15. <div class="main">  
  16.     <div class="left">left</div>  
  17.     <div class="right">right</div>  
  18. </div>  
  19. </body>  
  20. </html>  
  21.   

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/liangliejuzhongzishiyin.html

四、绝对定位布局

position属性：

拥有三种定位方式：1、静态定位 2、相对定位 3、绝对定位

可设置4个属性值：

  static（静态定位）

  relative（相对定位）——特点：相对于自身原有为止进行偏移；仍处于标准文档流中；随即拥有偏移属性和Z-index属性

  absolute（绝对定位）——特点：建立以包含块为基准的定位；完全脱离了标准文档流；随即拥有偏移属性和Z-index属性

( 1）未设置偏移量：无论是否存在已定位祖先元素，都保持在元素初始位置；脱离了标准文档流

（2）设置偏移量

偏移参考基准：无已定位祖先元素，以<html>为偏移参考基准
有已定位祖先元素，以距离其最近的已定位祖先元素为偏移参照基准

注：当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节
  fixed（固定定位）

使用absolute实现横向两列布局——常用于一列固定宽度，另一列宽度自适应的情况

主要应用技能：
   relative——父元素相对定位
   absolute——自适应宽度元素绝对定位
注意：固定宽度列的高度>自适应宽度的列

代码举例：

三列自适应：

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>三列布局</title>  
  5. <style>  
  6. body{ margin:0; padding:0; font-size:30px; font-weight:bold}   
  7. div{ text-align:center; line-height:50px}   
  8. .left{ width:20%; height:600px; background:#ccc; position:absolute; left:0; top:0}   
  9. .main{ height:600px; margin:0 20%; background:#9CF}   
  10. .right{ height:600px; width:20%; position:absolute; top:0; right:0; background:#FCC;}   
  11. </style>  
  12. </head>  
  13.   
  14. <body>  
  15.   
  16.     <div class="left">left</div>  
  17.     <div class="main">main</div>  
  18.     <div class="right">right</div>  
  19. </body>  
  20. </html>  
  21.   

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/sanliezishiyin.html

三列左右固定：

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>三列布局</title>  
  5. <style>  
  6. body{ margin:0; padding:0; font-size:30px; font-weight:bold}   
  7. div{ text-align:center; line-height:50px}   
  8. .left{ width:240px; height:600px; background:#ccc; position:absolute; left:0; top:0}   
  9. .main{ height:600px; margin:0 240px; background:#9CF}   
  10. .right{ height:600px; width:240px; position:absolute; top:0; right:0; background:#FCC;}   
  11. </style>  
  12. </head>  
  13.   
  14. <body>  
  15.   
  16.     <div class="left">left</div>  
  17.     <div class="main">main</div>  
  18.     <div class="right">right</div>  
  19. </body>  
  20. </html>  
  21.   

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/sanliezuoyouguding.html

五、混合布局及结构与表现原则

混合布局01

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>混合布局01</title>  
  6. <style>  
  7.     body{ margin:0; padding:0; font-size:30px; font-weight:bold}   
  8.     div{ text-align:center; line-height:50px}   
  9.     .head{ height:100px;background:#9CF}   
  10.     .left{ width:20%; height:600px; background:#ccc; float:left}   
  11.     .right{ width:80%; height:600px;background:#FCC; float:right}/*宽度设置为百分数，以实现自适应*/   
  12. </style>  
  13. </head>  
  14.   
  15. <body>  
  16.     <div class="head">head</div>  
  17.     <div class="left">left</div>  
  18.     <div class="right">right</div>  
  19. </body>  
  20. </html>  
  21.   

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju01.html

混合布局02

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3.     <meta http-equiv="Content-Type" content="text/html;          charset=utf-8" />  
  4.     <title>混合布局</title>  
  5. <style>  
  6.     body{ margin:0; padding:0; font-size:30px; font-weight:bold}   
  7.     div{ text-align:center; line-height:50px}   
  8.     .head, .main, .footer{ width:960px; margin:0 auto}   
  9.     .head{ height:100px;background:#9CF}   
  10.     .left{ width:240px; height:600px; background:#ccc; float:left}   
  11.     .right{ width:720px; height:600px;background:#FCC; float:right}/*宽度设置为固定值*/   
  12.     .footer{ height:50px; background:#9F9; clear:both}   
  13. </style>  
  14. </head>  
  15.   
  16. <body>  
  17.     <div class="head">head</div>  
  18.     <div class="main">  
  19.     <div class="left">left</div>  
  20.     <div class="right">right</div>  
  21. </div>  
  22.     <div class="footer">footer</div>  
  23. </body>  
  24. </html>  

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju02.html

混合布局03

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>混合布局</title>  
  5. <style>  
  6. body{ margin:0; padding:0; font-size:30px; font-weight:bold}   
  7. div{ text-align:center; line-height:50px}   
  8. .head, .main, .footer{ width:960px; margin:0 auto}/*head main及footer设置固定宽度*/   
  9. .head{ height:100px;background:#9CF}   
  10. .left{ width:220px; height:600px; background:#ccc; float:left}   
  11. .right{ width:740px; height:600px;background:#FCC; float:right}   
  12. .r_sub_left{ width:540px; height:600px; background:#9C3; float:left}   
  13. .r_sub_right{ width:200px; height:600px; background:#9FC; float:right}/*540px+200px=740px 注意宽度值的设置*/   
  14. .footer{ height:50px; background:#9F9; clear:both}/*使用clear：both清除浮动*/   
  15. </style>  
  16. </head>  
  17.   
  18. <body>  
  19. <div class="head">head</div>  
  20. <div class="main">  
  21.     <div class="left">left</div>  
  22.     <div class="right">  
  23.         <div class="r_sub_left">sub_left   
  24.         </div>  
  25.         <div class=" r_sub_right">sub_right   
  26.         </div>  
  27.     </div>  
  28. </div>  
  29. <div class="footer">footer</div>  
  30. </body>  
  31.   
  32. </html>  

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju03.html

混合布局04

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>混合布局</title>  
  5. <style>  
  6. body{ margin:0; padding:0; font-size:30px; font-weight:bold}   
  7. div{ text-align:center; line-height:50px}   
  8. .main{ width:960px; margin:0 auto}/*footer和main未设置宽度*/   
  9. .head{ height:100px;background:#9CF}   
  10. .left{ width:220px; height:600px; background:#ccc; float:left}   
  11. .right{ width:740px; height:600px;background:#FCC; float:right}   
  12. .r_sub_left{ width:540px; height:600px; background:#9C3; float:left}   
  13. .r_sub_right{ width:200px; height:600px; background:#9FC; float:right}/*540px+200px=740px 注意宽度值的设置*/   
  14. .footer{ height:50px; background:#9F9; clear:both}/*使用clear：both清除浮动*/   
  15. </style>  
  16. </head>  
  17.   
  18. <body>  
  19. <div class="head">head</div>  
  20. <div class="main">  
  21.     <div class="left">left</div>  
  22.     <div class="right">  
  23.         <div class="r_sub_left">sub_left   
  24.         </div>  
  25.         <div class=" r_sub_right">sub_right   
  26.         </div>  
  27.     </div>  
  28. </div>  
  29. <div class="footer">footer</div>  
  30. </body>  
  31. </html>  

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju04.html

混合布局05（自适应）

XML/HTML Code复制内容到剪贴板
  1. <html">  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>混合布局</title>  
  5. <style>  
  6. body{ margin:0; padding:0; font-size:30px; font-weight:bold}   
  7. div{ text-align:center; line-height:50px}   
  8. .head{ height:100px;background:#9CF}   
  9. .left{ width:20%; height:600px; background:#ccc; float:left}   
  10. .main{margin:0 30%;height:600px; background:#9CC }   
  11. .right{ width:20%; height:600px;background:#FCC; float:right}/*宽度均设为百分比*/   
  12. .footer{ height:50px; background:#9F9; clear:both}   
  13. </style>  
  14. </head>  
  15.   
  16. <body>  
  17.     <div class="head">head</div>  
  18.     <div class="left">left</div>  
  19.     <div class="right">right</div>  
  20.     <div class="main">main</div>  
  21.     <div class="footer">footer</div>  
  22. </body>  
  23. </html>  

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju05.html

在网页制作中，面对设计图，网页制作人员一般要遵循的原则是：先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和变现形式。
倡导结构，样式，行为分离。举例：网页换肤——相同HTML结构，不同CSS样式。

更多精彩内容其他人还在看

CSS伪类对象before和after的用法实例详解

这两个伪类对象只有在清楚浮动clearfix的时候会用到哈，最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果
收藏 0 赞 0 分享

CSS3 实用技巧：实现黑白图像效果示例代码

本文为大家详细介绍下CSS3实现黑白图像效果的具体思路及代码，感兴趣的朋友可以看下截图，希望对大家有所帮助
收藏 0 赞 0 分享

IE.JS解决IE兼容性问题方法汇总

正如标题所言它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示，下面为大家介绍下具体针对不同浏览器的调用方法，感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

实现CSS3中的border-radius(边框圆角)示例代码

本文为大家详细介绍下如何实现CSS3中的border-radius(圆角)，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
收藏 0 赞 0 分享

CSS line-height行高上下居中垂直居中样式属性

我们在css编写中需要对大篇幅的内容显示的更好看，有些间隔，不要在挤在一起难看，就可以使用Line-Height属性进行控制
收藏 0 赞 0 分享

CSS Float布局过程与老生常谈的三栏布局

这篇文章就是总结一下怎样使用CSS中的float属性进行布局，其实网上有很多讨论这个话题的文章了，但我觉得都没说到点子上。那就来老生常谈一次吧，CSS之Float布局
收藏 0 赞 0 分享

邮箱css加载失败怎么办 网站css加载异常原因分析

造成css加载失败的原因有很多，脚本之家也遇到过，这可能跟你代码出错，浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。下面看看具体的方案
收藏 0 赞 0 分享

CSS控制样式的三种方式(优先级对比验证)

大家都知道，CSS的中文名叫做层叠样式表，而CSS在控制样式的时候，有三种引入方式,这里简单介绍下CSS控制样式的三种方式
收藏 0 赞 0 分享

meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染

X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content=
收藏 0 赞 0 分享

Discuz7.2 IE9兼容性写法 杜工完全修补方案

因为Discuz7.2在IE9浏览器中有一系列的问题，所有要在以后的开发中考虑到ie9浏览器的一些问题了，这里简单介绍下，需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22