网页布局css有哪些页面布局

简述网页布局的不同类型和进行网页布局的几种方法

你可以参考其他优秀的网站，调用自己的各种知识储备，特别是艺术方面的，在大脑中不断地酝酿、碰撞，往往不经意间就有闪光的思想出现。

这时你就要抓紧时间把它变成文字的东西，用笔在纸上粗略地勾画出布局的轮廓，不要讲究细节，只要有一个轮廓就行。

当然你也可能有多种想法，尽量都把它们画出来，然后再比较，采用一种比较满意的方案。

2.初步填充内容 这一步就要把一些主要的内容放到网页中，例如网站的标志、广告条、菜单、导航条、计数器等，要注意重点突出，把网站标志、广告条、菜单放在最突出、最醒目的位置，然后再考虑其它元素的放置。

3.细化 在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。

在这一步，你可以利用网页编辑工具把草案做成一个简略的网页，当然对每一种元素所占的比例也要有一个详细的数字，以便以后修改。

经过以上几步，相信你的网页布局已经初具规模了，让别人看一下，给你提些建议，再不断修改，一个很有特色的网页就要浮出水面了。

二、网页排版布局的原则 上面我们简要介绍了设计网页布局的步骤，事实上，在构思和设计的过程中，你还必须要掌握以下几项原则： 1.平衡性 一个好的网页布局应该给人一种安定、平稳的感觉，它不仅表现在文字、图像等要素的空间占用上分布均匀，而且还有色彩的平衡，要给人一种协调的感觉。

2.对称性 对称是一种美，我们生活中有许多事物都是对称的。

但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造一点变化。

3.对比性 让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。

例如黑白对比，圆形与方形对比等，它们往往能够创造出富有变化的效果。

4.疏密度 网页要做到疏密有度，即平常所说的"密不透风，疏可跑马"。

不要整个网页一种样式，要适当进行留白，运用空格，改变行间距、字间距等制造一些变化的效果。

5.比例 比例适当，这在布局当中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调。

网页布局类型

1、变化型:即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

　　2、拐角型:这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。

在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

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

这种结构是我们在网上见到的差不多最多的一种结构类型。

　　4、左右框架型:这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。

我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。

这种类型结构非常清晰，一目了然。

　　5、封面型:这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。

这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

　　6、上下框架型:与上面类似，区别仅仅在于是一种上下分为两页的框架。

　　7、Flash型:其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

　　8、综合框架型:上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

　　9、标题正文型:这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

进行网页布局的一般步骤是什么？

一、一般步骤　1.构思　　根据网站的内容整体风格，设计版面布局。

你可以参考其他优秀的网站，调用自己的各种知识储备，特别是艺术方面的，在大脑中不断地酝酿、碰撞，往往不经意间就有闪光的思想出现。

这时你就要抓紧时间把它变成文字的东西，用笔在纸上粗略地勾画出布局的轮廓，不要讲究细节，只要有一个轮廓就行。

当然你也可能有多种想法，尽量都把它们画出来，然后再比较，采用一种比较满意的方案。

　2.初步填充内容　　这一步就要把一些主要的内容放到网页中，例如网站的标志、广告条、菜单、导航条、计数器等，要注意重点突出，把网站标志、广告条、菜单放在最突出、最醒目的位置，然后再考虑其它元素的放置。

　3.细化　　在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。

在这一步，你可以利用网页编辑工具把草案做成一个简略的网页，当然对每一种元素所占的比例也要有一个详细的数字，以便以后修改。

　　经过以上几步，相信你的网页布局已经初具规模了，让别人看一下，给你提些建议，再不断修改，一个很有特色的网页就要浮出水面了。

二、网页排版布局的原则　　上面我们简要介绍了设计网页布局的步骤，事实上，在构思和设计的过程中，你还必须要掌握以下几项原则：　1.平衡性　　一个好的网页布局应该给人一种安定、平稳的感觉，它不仅表现在文字、图像等要素的空间占用上分布均匀，而且还有色彩的平衡，要给人一种协调的感觉。

　2.对称性　　对称是一种美，我们生活中有许多事物都是对称的。

但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造一点变化。

　3.对比性　　让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。

例如黑白对比，圆形与方形对比等，它们往往能够创造出富有变化的效果。

　4.疏密度　　网页要做到疏密有度，即平常所说的"密不透风，疏可跑马"。

不要整个网页一种样式，要适当进行留白，运用空格，改变行间距、字间距等制造一些变化的效果。

　5.比例　　比例适当，这在布局当中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调。

什么是网页布局

网页布局是指网页内容在页面上所处位置的设计。

PS是photoshop的缩写 PS网页设计稿是指用photoshop绘画形式输出的网页整体形象的缩略图一类,就是你要设计的网页的雏形,用图片的形式显示出来.

css有哪些页面布局

五种基本布局定位类型:* 弹性布局 - 总体宽度及其中所有栏的值都以 em 单位编写。

这应使布局能够使用浏览器的指定基本字体大小缩放。

对于视力不好的用户, 这可能更有吸引力、更易于访问, 因为栏宽度将变得更宽, 能以任何大小显示更舒适、更可读的行长度。

由于总体宽度将缩放, 您的设计必须允许可这宽度。

* 固定布局 - 总体宽度及其中所有栏的值都以像素单位编写。

布局位于用户浏览器的中心。

* 流体布局 - 总体宽度及其中所有栏的值都以百分比编写。

百分比通过用户浏览器窗口的大小计算。

* 混合布局 - 混合布局组合两种其他类型的布局 - 弹性和流体。

页面的总宽度为 100%, 但侧栏值设置为 em 单位。

* 绝对定位布局 - 所有前述布局的外栏使用浮动内容。

而绝对定位布局完全如其名所示 - 有绝对定位的外栏。

必须记住, 当使用这些布局时, 侧栏会“提出文档流程”, 因而可能有一些不合适的结果 (例如, 页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。