网页的布局

网页常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。

1.“国”字形布局

也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列两小条内容,中间是主要部 分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

2.“匡”字形布局

这种结构与上一种其实只是形式上的区别,它去掉了“国”字形布局的最右边的部分,给主内容区释放了更多空间。这种布局上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。

3.“三”字形布局

这是一种简洁明快的网页布局,在国外用的比较多,国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分,色块中大多放置广告条与更新和版权提示。如图所示即是一种三字形布局的网页。

4.“川”字形布局

整个页面在垂直方向分为三列,网站的内容按栏目分布在这三列中,最大限度地突出主页的索引功能。如图1-19所示的“Beijing 2008”网站就是一种川字形的布局。

5.海报型布局

这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。

6.Flash布局

这种布局是指整个网页就是一个Flash动画,它本身就是动态的,画面一般比较绚丽、有趣,是一种比较新潮的布局方式。其实这种布局与封面型结构是类似 的,不同的是由于Flash强大的功能,页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当,会是一种非常有魅力的布局。

7.标题文本型布局

标题文本型布局是指页面内容以文本为主,这种类型页面最上面往往是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这一类。

8.框架型布局

采用框架布局结构,常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素,这种布局目前专业设计人员采用的已不多,不过在一些大型论坛上还是比较受青睐的,有些企业网站也有应用。

9.变化型布局

即上述几种类型的结合与变化。

时间: 08-07

网页的布局的相关文章

网页整体布局完全剖析—剖完你不进来看一下么?

作为前端小白,最基本的就是写网页了(虽然前端现在基本上可包揽全宇宙的事了),排网页更是基本生存技能了.本文总结了几乎所有的网页总体布局.               一.单列布局 1.单列固宽 思路:设置div的左右margin为auto <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>1-1-1 布局固定宽度</title> <st

运用CSS对静态网页进行布局和效果设置

CSS中对静态网页的布局和定位已经较为成熟  现在运用CSS(层叠样式表)已经可以对静态网页的色彩搭配 .图片点击效果.列表外观进行设置 较使用时间较长的JS有了很大提升  而HTML5在图片和基本的点击事件以及动画上面也有了很多提升   使HTML5超前完成了JS可以完成的工作任务 以下列出CSS中静态网页布局需要使用到的一些元素 要使网页页面美观  我们需要对网页进行大小 .背景图片(或背景颜色).以及网页内的文字和网页的所属小的版块位置的设置 1.网页基本属性的构成 border:延用HT

DIV+CSS网页标准化布局(二)之浮动布局

盒模型以及浮动布局 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式. 先上图: 上图清晰的表明了盒模型的具体表现样式: margin外边距+border边框+padding内边距+content内容: 既然盒模型叫做盒模型~那么我们可以把它比作一个 液晶屏幕包

DIV+CSS网页标准布局入门到精通视频教程

DIV+CSS网页标准布局入门到精通视频教程,一共28讲完整的教程,有齐学网整理免费提供下载. 下载地址:http://bbs.it1717.com/thread-77-1-1.html

网页的布局方式

浏览器中如何对网页中的元素进行排版标准流:(文档流 普通流)默认的排版方式垂直排版(块级)和水平排版(行内,行内排版)浮动流:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘.浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素("高度塌陷"现象).顾名思义,就是漂浮于普通流之上,像浮云一样,但是

Web全栈-网页的布局方式、浮动流基本概念

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页的布局方式</title> <style> /* div,h1,p{ border: 1px solid #000; } span,strong,b{ border: 1px solid #000; } */ *{ margin: 0; pa

IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.通过使用DIV盒子模型结构将各部分内容划分到不同的区块,然后用CSS来定义盒子模型的位置.大小.边框.内外边距.排列方式等.简单地说,DIV用于搭建网站结构(框架),CSS用于创建网站表现(样式/美化).该标准简化了HTML页面代码,获得了一

网页整体布局

h1 { background-color: palegreen } 一.知识补充 一. inline 让块级标签变成内联标签,无法使用高度.宽度 block 让内联标签变成块级标签 inline-block 是内联的,但是可以使用高度宽度 二. 内容高度 line-height 三. background-position 可以通过调整x轴和y轴的位置来调整图片的位置 background: url(//misc.360buyimg.com/jdf/1.0.0/unit/globalImage

(16/06/10) DIV+CSS网页标准化布局 DIV+CSS的兼容性问题小结。

1.兼容性问题的产生:个别浏览器的开发商对一些CSS属性的解析没有按W3C的标准设计. 一个好的网站布局需要在所有的浏览器上呈现相同的界面,即使不能完全一致也要大致相同.浏览器进行页面布局调试将其分为IE和非IE两种.主要原因是因为微软公司的IE浏览器没有按W3C的标准设计,而非IE浏览器几乎是符合W3C标准的.目前IE浏览器占有很大的市场份额,IE5使用人群很少,基本不用考虑,一般IE浏览器兼容性只针对IE6,IE7,IE8就可以了,IE的新版本向标准化迈进.非IE浏览器以Firefox浏览器