您现在的位置是：网站首页> 编程资料编程资料

学习DIV+CSS网页布局之混合布局css三种方法实现div在浏览器水平居中一个div在浏览器水平居中的实现方法div+CSS制作类似微信对话气泡效果的实例总结EXCEL表格中的#DIV/0!等符号怎么全部当计算?让DIV水平垂直居中的两种完美方法推荐学习DIV+CSS网页布局之三列布局学习DIV+CSS网页布局之两列布局学习DIV+CSS网页布局之一列布局使用div+CSS将页脚始终控制在页面最下方的方法Div+CSS对HTML的table表格定位用法实例

2021-09-05 846人已围观

简介 学习DIV+CSS网页布局中的混合布局，本文为大家分享的是DIV+CSS网页布局教程的第四篇，感兴趣的小伙伴们可以参考一下

DIV+CSS 网页布局第四篇：混合布局

1、混合布局

　　在了解了一列、两列和三列布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局，那么混合布局就可以在一列布局的基础之上，分为两列布局，三列布局，网页布局的结构普遍都是三列布局，但是在三列布局的基础上，可以根据实际需求，对网页再进行划分。

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>混合布局title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #header{   
  9.     height:50px;   
  10.     background:blue;   
  11. }   
  12. #main{   
  13.     width:100%;   
  14.     overflow:hidden;   
  15. }   
  16. #main .main-left{   
  17.     width:20%;   
  18.     height:800px;   
  19.     background:lightgreen;   
  20.     float:left;   
  21. }   
  22. #main .main-right{   
  23.     width:80%;   
  24.     height:800px;   
  25.     float:right;   
  26. }   
  27. #main .main-right .right-l{   
  28.     width:80%;   
  29.     height:800px;   
  30.     background:yellow;   
  31.     float:left;   
  32. }   
  33. #main .main-right .right-r{   
  34.     width:20%;   
  35.     height:800px;   
  36.     background:pink;   
  37.     float:right;   
  38. }   
  39. #footer{   
  40.     height:50px;   
  41.     background:gray;   
  42. }   
  43. style>  
  44. head>  
  45. <body>  
  46. <div id="header">头部div>  
  47. <div id="main">  
  48.     <div class="main-left">左边div>  
  49.     <div class="main-right">  
  50.         <div class="right-l">右-左div>  
  51.         <div class="right-r">右-右div>  
  52.     div>  
  53. div>  
  54. <div id="footer">页脚div>  
  55. body>  
  56. html>  

2、固定宽度混合布局

　　固定宽度的混合布局结构，同固定宽度的三列布局模式相同。

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>固定宽度混合布局title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. #header{   
  9.     height:50px;   
  10.     background:blue;   
  11. }   
  12. #main{   
  13.     width:960px;   
  14.     margin:0 auto;   
  15.     overflow:hidden;   
  16. }   
  17. #main .main-left{   
  18.     width:200px;   
  19.     height:800px;   
  20.     background:lightgreen;   
  21.     float:left;   
  22. }   
  23. #main .main-right{   
  24.     width:760px;   
  25.     height:800px;   
  26.     float:right;   
  27. }   
  28. #main .main-right .right-l{   
  29.     width:560px;   
  30.     height:800px;   
  31.     background:yellow;   
  32.     float:left;   
  33. }   
  34. #main .main-right .right-r{   
  35.     width:200px;   
  36.     height:800px;   
  37.     background:pink;   
  38.     float:right;   
  39. }   
  40. #footer{   
  41.     width:960px;   
  42.     height:50px;   
  43.     background:gray;   
  44.     margin:0 auto;   
  45. }   
  46. style>  
  47. head>  
  48. <body>  
  49. <div id="header">头部div>  
  50. <div id="main">  
  51.     <div class="main-left">左边div>  
  52.     <div class="main-right">  
  53.         <div class="right-l">右-左div>  
  54.         <div class="right-r">右-右div>  
  55.     div>  
  56. div>  
  57. <div id="footer">页脚div>  
  58. body>  
  59. html>  

3、自适应混合布局

　　自适应混合布局是对三列自适应布局的改进。

XML/HTML Code复制内容到剪贴板

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网