css的第一步就是布局，但是实现网页布局的方法很多，很多初学者都不知道如何应用，那么现在就跟爱站小编去看看用CSS进行网页布局的教程。 一、基础概念 W3C">
首页 > > 网页制作 > css >

用CSS进行网页布局的教程

2019-08-14 09:38:32来源：爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

如果你是一个初学者那么学习css.html" target="_blank">css的第一步就是布局，但是实现网页布局的方法很多，很多初学者都不知道如何应用，那么现在就跟爱站小编去看看用CSS进行网页布局的教程。

一、基础概念

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进行网页布局的教程，介绍了绝对定位布局、混合布局及结构与表现原则，感兴趣的小伙伴们可以参考一下。


原文链接:https://js.aizhan.com/web_authoring/css/6184.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：关于条件CSS的介绍

下一篇：如何解决全部网页木马

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签