栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

学习DIV+CSS网页布局之混合布局

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

学习DIV+CSS网页布局之混合布局

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

1、混合布局

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

XML/HTML Code复制内容到剪贴板
  1.   
  2.   
  3.   
  4.       
  5.     混合布局  
  6.   
  7.   
  8.   
  9. 头部
  
  •   
  •     左边
  •   
  •       
  •         右-左
  •   
  •         右-右
  •   
  •       
  •   
  • 页脚  
  •   
  •   
  • 2、固定宽度混合布局

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

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.       
    5.     固定宽度混合布局  
    6.   
    7.   
    8.   
    9. 头部  
    10.   
    11.     左边  
    12.       
    13.         右-左  
    14.         右-右  
    15.       
    16.   
    17. 页脚  
    18.   
    19.   

    3、自适应混合布局

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

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.       
    5.     自适应混合布局  
    6.   
    7.   
    8.   
    9. 头部  
    10.   
    11.     设计网页的第一步就是设计版面布局,搭建网站结构,网页排版的合理性,在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此,网站首页第一屏的排版非常重要,很多时候能决定用户的去与留。  
    12.     右列  
    13.     左列  
    14.   
    15. 页脚  
    16.   
    17.   

    4、混合布局的应用

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

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.       
    5.     混合布局  
    6.   
    7.   
    8.   
    9. 头部  
    10.   
    11.       
    12.   
    13.   
    14.     左边  
    15.       
    16.           
    17.             右-左  
    18.             右-右  
    19.           
    20.         右-中  
    21.         右-下  
    22.       
    23.   
    24. 页脚  
    25.   
    26.   

    以上就是本文的全部内容,希望对大家的学习有所帮助。

    原文:http://www.cnblogs.com/Mtime/p/5276222.html

    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/216053.html

    CSS教程相关栏目本月热门文章

    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号