伏龙阁资源网

网页布局入门教程 如何用CSS进行网页布局
站长资源 2024/11/23 佚名
2 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）。如下图：

网页布局入门教程 如何用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样式。

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/23

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

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