集团官网
  • 华为授权培训中心
  • 腾讯云一级认证培训中心
  • 百度营销大学豫陕深授权运营中心
  • Oracle甲骨文OAEP中心
  • Microsoft Azure微软云合作伙伴
  • Unity公司战略合作伙伴
  • 普华基础软件战略合作伙伴
  • 新开普(股票代码300248)旗下丹诚开普投资
  • 中国互联网百强企业锐之旗旗下锐旗资本投资

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

编辑:云和数据 日期:2023-01-25 23:15

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

1. “国”字型布局

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

2.  “T” 型布局

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

3. 标题正文型布局

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

 

4. 左右分割型布局

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

 

5.  上下分割型布局

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

 

6.  封面型布局

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

相关内容

如何针对接口设计测试用例 ? 当我们拿到一个接口,怎么才能设计出更好的测试用例呢?从大的方面我们至少要考虑到以下三个方面。第一:功能测试第二:性能测试第三:安全性测试一、功能方面在功能方面,我们要更多考虑的是如何通过不同的输入覆盖不同的业务逻辑。而这个业务逻辑也可以理解为代码的每一个分支语句,所以,我们的测试就变为如何通过... 怎样下载和安装HBuilder软件? HBuilder是一款深度集成Eelipse的IDE编辑器,但其主要集中在Web前端的开发,不能进行Java等后台开发。HBuilder提供了对JavaScrijpt、jQuery、HTML5+、MUI等语法的提示功能,同时包含很多快捷键,让前端开发更加便捷。访问HBuilder官方网站(ht... web前端框架有哪些?学web前端开发用什么软件? 框架是提供一套完整的解决方案,按照规定好的代码结构来做编排。前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,主要特点易于控制,易于延展,易于分配资源。通常前端框架会封装了一些常用的功能,比如html文档操作、各种按钮,表单控件等。合理的运用前端框架可以降低界面开发周期、提升开发效... 性能测试常见指标有哪些 对业务指标的要求主要有:请求响应时间,最大并发量等等。对系统资源的指标,如:资源使用率是指在系统负载运行期间,数据库服务器,应用服务器,web服务器的cpu,内存,硬盘,外置存储,网络带宽的使用率,低于20%的使用率为资源使用稳定,60%-80%的使用率表示资源使用饱和,超过80%的使用率的资... 软件测试培训:边界值分析法 对于软件测试人员来说,测试工作做得越多越会发现,程序的一些错误往往发生在边界处理上,例如,某程序的输入数据要求取值范围为1~100,当取值在1~100内部时没有问题,然而取边界值1或100时会发生错误,这就是程序开发时对边界问题没有做好处理。边界值分析法就是对边界值进行测试的一种方法,本节将针... Web Storage是什么?Web Storage详解 Web Storag是HTML5引入的一个非常重要的功能,可以将数据存储在本地,如保存用户的偏好设置、复选框的选中状态、文本框默认填写的值等。用户在浏览器中刷新网页时,网页通过Web Storage就可以知道用户之前所做的一些修改,而不需要将用户修改的内容存储在服务器端。Web Storage...
×