白云岛资源网

网页布局入门教程 如何用CSS进行网页布局
站长资源 2024/11/1 佚名
11 1538
白云岛资源网 Design By www.pvray.com

一、基础概念

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）。如下图：

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

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

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

盒子3D模型：

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

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

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

二、自动居中一列布局

关键词：标准文档流，块级元素，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样式。

白云岛资源网 Design By www.pvray.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
白云岛资源网 Design By www.pvray.com
www.pvray.com 白云岛资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
白云岛资源网 Design By www.pvray.com