IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资
      当前位置:
      首页IT问答正文

      常见的网页ui界面布局有哪些?

      • 发布时间:
        2023-01-25
      • 版权所有:
        云和教育
      • 分享:

      在设计网页时,需要根据不同的网站性质和页面内容选择合适的布局形式,下面介绍一些常见的网页布局方式。

      1. “国”字型布局

      “国”字型布局是网页上使用最多的一种结构类型,是综合性网站页面中常用的版式。通常上方为引导栏、header, 导航栏,中间为内容区,最底端为版权信息。将内容区分为左、中、右三大块,通常左右两侧为导航、友情链接,中间为内容区域。此类型的版面优点是页面充实、内容丰富和信息量大,缺点是页面拥挤、不够灵活。

      2.  “T” 型布局

      uT”型布局与“国”字型布局很相近,页面上方一致,仅仅只是在形式上略有区别。网页F边和左右相结合的布局,通常右边为主要内容,所占比例比较大。如图8-5所示。在实际运用中还可以改变“T”型布局的形式,如左右两栏式布局,一半是正文,另一半是形象的图像或导航栏。此类型的版面优点是页面结构清晰、主次分明、易于使用,缺点是规矩呆板。

      3. 标题正文型布局

      标题正文型布局即上方为网页标题或类似的一些内容,中间为正文部分,下方为版权信息一般是文章、 登录页等采用居多,里面包含着大量的文字信息。如知乎里的文章详情均采用这种布局。

       

      4. 左右分割型布局

      左右分割型布局结构,就是把整个版面分割为左右两个部分,分别在左或右配置文案。通常会在其中一侧放置一列文字链接,在文字链接上方会有标题或logo。此类型网页布局,结构清晰、一目了然。

       

      5.  上下分割型布局

      与左右分割的布局结构类似,区别仅仅在于上下框架页面的导航和logo在上方,正文内容在下。

       

      6.  封面型布局

      此类型布局基本出现在一些网站的首页,大部分直接使用极具设计感的图像或动画作为网页背景,然后添加一个“进入”按钮即可。此类型布局方式十分开放自由,可以给用户带来赏心悦目的感受。