1、混合布局

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

  1.  <!DOCTYPE html>
  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、固定宽度混合布局

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

  1.  <!DOCTYPE html>
  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、自适应混合布局

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

  1.  <!DOCTYPE html>
  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.      position:relative;
  15.  }
  16.  #main .main-left{
  17.      width:20%;
  18.      height:800px;
  19.      background:red;
  20.      position:absolute;
  21.      left:0;
  22.      top:0;
  23.  }
  24.  #main .main-center{
  25.      height:800px;
  26.      background:lightgreen;
  27.      margin:0 20%;
  28.  }
  29.  #main .main-right{
  30.      width:20%;
  31.      height:800px;
  32.      background:pink;
  33.      position:absolute;
  34.      right:0;
  35.      top:0;
  36.  }
  37.  #footer{
  38.      height:50px;
  39.      background:gray;
  40.  }
  41.  </style>
  42.  </head>
  43.  <body>
  44.  <div id="header">头部</div>
  45.  <div id="main">
  46.      <div class="main-center">设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。</div>
  47.      <div class="main-right">右列</div>
  48.      <div class="main-left">左列</div>
  49.  </div>
  50.  <div id="footer">页脚</div>
  51.  </body>
  52.  </html>

4、混合布局的应用

　　混合布局在网站中应用比较广泛，再复杂的布局结构，他们的原理都是相通的，可以举一反三。网页布局就是依据内容、功能的不同，使用 CSS 对元素进行格式设置，根据版面的布局结构进行排列，那么布局也就是元素与元素之间的关系，或者向一边看齐，或者精准定位，或者有一定间距，或者嵌套，或者相互堆叠，使元素按照设计稿的样式漂亮的呈现在网页上。

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>混合布局</title>
  6.  <style>
  7.  *{margin:0;padding:0;}
  8.  #header{
  9.      height:30px;
  10.      background:blue;
  11.      margin-bottom:10px;
  12.  }
  13.  #nav{
  14.      width:960px;
  15.      margin:0 auto;
  16.      margin-bottom:10px;
  17.  }
  18.  #main{
  19.      width:960px;
  20.      height:800px;
  21.      margin:0 auto;
  22.      overflow:hidden;
  23.  }
  24.  #main .left{
  25.      width:200px;
  26.      height:800px;
  27.      background:lightgreen;
  28.      float:left;
  29.  }
  30.  #main .right{
  31.      width:750px;
  32.      height:800px;
  33.      float:right;
  34.  }
  35.  #main .right .sup{
  36.      height:200px;
  37.      margin-bottom:10px;
  38.  }
  39.  #main .right .sup-left{
  40.      width:370px;
  41.      height:200px;
  42.      background:pink;
  43.      float:left;
  44.  }
  45.  #main .right .sup-right{
  46.      width:370px;
  47.      height:200px;
  48.      background:orange;
  49.      float:right;
  50.  }
  51.  #main .right .middle{
  52.      height:300px;
  53.      background:yellow;
  54.      margin-bottom:10px;
  55.  }
  56.  #main .right .sub{
  57.      height:280px;
  58.      background:purple;
  59.  }
  60.  #footer{
  61.      width:960px;
  62.      height:50px;
  63.      background:gray;
  64.      margin:0 auto;
  65.      margin-top:10px;
  66.  }
  67.  #nav ul{
  68.      list-style:none;
  69.      background:lightgray;
  70.      overflow:hidden;
  71.  }
  72.  #nav li{
  73.      float:left;
  74.  }
  75.  #nav li a{
  76.      display:block;
  77.      color:black;
  78.      width:104px;
  79.      height:30px;
  80.      line-height:30px;
  81.      text-decoration:none;
  82.      text-align:center;
  83.  }
  84.  #nav .home{
  85.      width:128px;
  86.  }
  87.  #nav li a:hover{
  88.      color:white;
  89.      background:green;
  90.  }
  91.  </style>
  92.  </head>
  93.  <body>
  94.  <div id="header">头部</div>
  95.  <div id="nav">
  96.      <ul>
  97.          <li><a  class="home" href="#">首页</a></li>
  98.          <li><a href="#">新闻</a></li>
  99.          <li><a href="#">热点</a></li>
  100.          <li><a href="#">动态</a></li>
  101.          <li><a href="#">直播</a></li>
  102.          <li><a href="#">地图</a></li>
  103.          <li><a href="#">服务</a></li>
  104.          <li><a href="#">社区</a></li>
  105.          <li><a href="#">关于我们</a></li>
  106.      </ul>
  107.  </div>
  108.  <div id="main">
  109.      <div class="left">左边</div>
  110.      <div class="right">
  111.          <div class="sup">
  112.              <div class="sup-left">右-左</div>
  113.              <div class="sup-right">右-右</div>
  114.          </div>
  115.          <div class="middle">右-中</div>
  116.          <div class="sub">右-下</div>
  117.      </div>
  118.  </div>
  119.  <div id="footer">页脚</div>
  120.  </body>
  121.  </html>

DIV+CSS 网页布局之：混合布局的更多相关文章

  1. DIV+CSS 网页布局之：一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  2. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  3. div+css网页标准布局实例教程（一）

    今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...

  4. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  5. 30余套系统模版|DIV+CSS网页模板|简洁大气系统模板

    30余套系统模版|DIV+CSS网页模板|简洁大气系统模板.都是一些后台系统的模版,很适合开发一些管理系统,办公系统,网站后台系统等.使用很广泛,很实用的系统模版. 下载地址: 点击下载

  6. div+css网页本地上和上传到服务器后在IE11上看到的效果不一样？

    div+css网页本地上和上传到服务器后在IE11上看到的效果不一样? 解决办法在html的head里加上一段:<meta http-equiv="X-UA-Compatible&qu ...

  7. 常见div+css网页布局（float,absolute）

    网页布局-常见 1,           float布局 (1)常规方法 <div id="warp">     <div id="column&quo ...

  8. div+css网页标准布局实例教程（二）

    五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面 ...

  9. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题

    小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...

随机推荐

  1. linux命令之more

    转自:http://www.cnblogs.com/peida/archive/2012/11/02/2750588.html more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示 ...

  2. Code Smell那么多，应该先改哪一个？

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Code Smell那么多,应该先改哪一个?.

  3. Unity4向上（Unity5）兼容PlayerPrefs的数据存储

    好久没有写项目.开发相关的内容了,刚好最近在做项目的更新时,遇到一个比较有意思的坑就随手记录一下. 因为项目的上一上线版本是由Unity5.3发的包,而最新的项目来不及同步更新到5.3版本发包测试,所 ...

  4. javabean以及内省技术详解（转）

    一.关于javabean javabean是固定写法的java类 书写格式为: 1)必须有无参构造函数 2)属性必须私有, 我们称为字段 3)提供标准的getter和setter 例: name 字段 ...

  5. “cvSnakeImage”: 找不到标识符

    1>g:\project\opencv\helloopencv\helloopencv\helloopencv.cpp(74) : error C2065: "CV_VALUE&quo ...

  6. ActionBarSherlock

    https://github.com/JakeWharton/ActionBarSherlock https://github.com/ddewaele/GoogleMapsV2WithActionB ...

  7. Mac system快捷键

    官方的快捷键是 control+command+F 进行窗口和全屏的切换. 1042282500@qq.com yss12313

  8. C#操控条形码扫描枪

    // 条码扫描器 // 窗体部分相关代码: using System; using System.Collections.Generic; using System.ComponentModel; u ...

  9. 基于u盘安装centos6.0

    本人在dell笔记本上尝试安装centos6.0,与win7形成双系统,安装过程如下: 1.使用ultraliso制作u盘启动盘,启动盘以centos6.0的映像文件为源头制作: 2.制作完成后,删除 ...

  10. 并行计算vs分布式计算

    一般认为,集中在同一个机柜内或同一个地点的紧密耦合多处理机系统或大规模并行处理系统是并行处理系统,而用局域网或广域网连接的计算机系统是分布式处理系统.松散耦合并行计算机中的并行操作系统有时也称为分布式 ...