首页 >web前端 >前端问答 > 正文

网页布局的常见8种类型是什么

原创2021-06-10 15:31:500237

网页布局的常见8种类型:1、“国”字型布局;2、拐角型布局;3、标题正文型布局;4、封面型布局;5、“T”结构布局;6、“口”型布局;7、对称对比布局;8、POP布局。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

网站的风格大部分是各不相同,但是布局都有一定的规律,常见的网站布局形式有八种,分别是“国”字型布局、拐角型布局、标题正文型布局、封面型布局、“T”结构布局、“口”型布局、对称对比布局、POP布局。下来逐一给大家介绍这八种网页布局的常见类型。

1、“国”字型布局

这种布局是普通也是常见的,一些大型网站经常使用这种类型。它的特点就是规范,内容主次由上到下,网页上面是标题条幅、导航栏,下面就是网站相关内容信息等,例如chinaren、163、sina等网站。

2、拐角型布局

该布局特点就是把相关内容的链接放到网页的左面或右面,另一面就是相关的文字信息,网站的上面是标题条幅或是主要内容导航栏,例如校园网站等。

3、标题正文型布局

它的特点就是利用文字来布局,除了标题,下面就是文章,像一些专门的文章、小说页面或注册页面就属于这种类型。

4、封面型布局

它的特点是网站的首页是一些精美有创意的图案结合一些小的动画组成,在页面当中,没有什么导航栏指示,只是有简单的“进人”等链接,这种布局一般设计性网站用的比较多,像设计论坛、设计公司、个人网站等,因为这种布局需要精心设计,给人的视觉感觉也很美妙。

5、“T”结构布局

所谓“T”结构布局,就是指网页上边和左边相结合,页面顶部为横条网站标志和广告条,左下方为主菜单,右面显示内容,这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式。

如左右两栏式布局,一半是正文,另一半是形象的图片、导航。或正文不等两栏式布置,通过背景色区分,分别放置图片和文字等。

这样的布局有其固有的优点,因为人的注意力主要在右下角,所以企业想要发布给用户的信,大都能被用户以最大可能性获取,而且很方便,其次是页面结构清晰,主次分明、易于使用。缺点是规矩呆板,如果细节色彩上不注意,很容易让人“看之无味”。

6、“口”型布局

这是一个形象的说法,指页面上下各有一个广告条,左边是主菜单,右边是友情链接等,中间是主要内容。

这种布局的优点是页面充实、内容丰富、信息量大,是综合性网站常用的版式,特别之处是顶部中央的一排小图标起到了活跃气氛的作用。

缺点是页面拥挤,不够灵活。也有将四边空出,只用中间的窗口型设计,例如网易壁纸站使用多帧形式,只有页面中央部分可以滚动,界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。

7、对称对比布局

顾名思义,它指采取左右或者上下对称的布局,一半深色,一半浅色,一般用于设计型网站。其优点是视觉冲击力强,缺点是将两部分有机地结合比较困难。

8、POP布局

POP源自广告术语,指页面布局像一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类网站,优点显而易见:漂亮吸引人,缺点是速度慢。

更多编程相关知识,请访问:编程入门!!

以上就是网页布局的常见8种类型是什么的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:网页布局
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息
    推荐视频教程
  • 瀑布流布局瀑布流布局
  • 移动WEB布局视频教程移动WEB布局视频教程
  • 30分钟学会网站布局30分钟学会网站布局
  • Bootstrap响应式网页布局篇Bootstrap响应式网页布局篇
  • 玩转CSS Flexbox弹性盒子布局(2021新课)玩转CSS Flexbox弹性盒子布局(2021新课)
  • 让布局像5G一样快:CSS Grid网格布局让布局像5G一样快:CSS Grid网格布局
  • 视频教程分类