美文网首页
常见的几种WEB网页布局结构(PC端)

常见的几种WEB网页布局结构(PC端)

作者: 求知笔记 | 来源:发表于2019-11-03 11:17 被阅读0次

布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见结构:

  1. POP布局
    POP引自广告术语,就是指页面布局像一张宣传海报,POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。
    优点显而易见:漂亮吸引人。缺点就是速度慢。作为版面布局,还是值得借鉴的。

  2. “国字”型布局:(也称为同型布局)
    “国”字型布局由“同”字型布局进化而来,因布局结构与汉字“国”相似而得名。其页面设计如下:
    1)最上部分一般放置网站的标志和导航栏或Banner广告
    2)中间左侧:导航菜单+其他
    3)中间中心:主要放置网站的主要内容,
    4)中间右侧:友情链接+其他
    5)最下部分一般放置网站的版权信息和联系方式等。
    通常用于主页的设计,其主要优点是页面容纳内容很多,信息量大。

  3. ”口“型布局。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情链接等,中间是主要内容。这种布局的优点是充分利用版面,信息量大。
    缺点是页面拥挤,不够灵活

  4. T型布局
    T型布局结构因与英文大写字母T相似而得名。其页面设计如下:
    1)顶部一般放置横网站的标志或Banner广告
    2)下方左侧是导航栏菜单
    3)下方右侧则用于放置网页正文等主要内容
    优点是页面结构清晰,主次分明,是初学者最容易上手的布局方法。缺点是规矩呆板,如果不注意细节色彩,很容易让人”看之无味“


4.标题正文型
标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等
1)最上方是标题或广告等内容
2)下面是正文
特点是简洁明快,干扰信息少,较为正规。
  1. 左右框架型布局
    左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。一半深色一半浅色,一般用于设计型站点。其页面设计如下:
    1)左侧一般主要为导航栏链接+网站Logo+其他
    2)右侧则放置网站的主要内容
    优点是视觉冲击力强,缺点是很难将两部分有机地结合起来

6.上下框架型
上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。一半深色一半浅色,一般用于设计型站点。
优点是视觉冲击力强,缺点是很难将两部分有机地结合起来

  1. 综合框架型
    综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局。


  2. 统一T型网站布局
    这是综合以上,常用的一种布局方式


相关文章

  • 常见的几种WEB网页布局结构(PC端)

    布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见...

  • 2018-06-12 CSS中的flex布局详解

    前言:之前我写过的一篇博客介绍CSS常用的几种布局方式,PC端最常见的就是浮动布局和flex布局,而在移动端,由于...

  • 几种网页布局方式

    1、固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。 2、流式布局:为网页设置一...

  • 响应式布局

    布局类别 1.固定网页布局:设置固定宽度,px为单位。常见PC端页面。 2.流式布局+伸缩布局+rem+媒体查询:...

  • [前端学习]移动web部分学习笔记,第二天

    网页布局方法总结: 目前已经学习了两种布局方式:固定宽度布局:常见于PC端,设定固定的宽度作为版心来布局流式布局:...

  • 布局

    1.静态布局 (Static Layout 适用PC端) 传统Web设计,网页上的所有元素的尺寸一律使用px作为...

  • HTML基础

    新的征程 web前端介绍 web前端开发做什么 pc端web开发;移动端web开发;混合app开发;网页游戏/移动...

  • 移动web开发_流式布局

    移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览...

  • 移动布局

    移动web开发流式布局 ====================== 1.0 移动端基础 1.1浏览器现状 PC端...

  • pc端

    Pc端软件的设计建立在web的设计上 更多考虑:布局方式+更细腻设计和交互方式 Pc端软件的尺寸是多少 Pc端软件...

网友评论

      本文标题:常见的几种WEB网页布局结构(PC端)

      本文链接:https://www.haomeiwen.com/subject/ydykbctx.html