Div CSS实例教程：页面制作方法全程指导(1) - 51CTO.COM

• Div CSS实例教程：页面制作方法全程指导(1)

• http://developer.51cto.com  2010-08-17 10:48  admin  52css.com  我要评论(0)

本文向大家介绍一下Div CSS实例教程，重点和大家分享一下页面制作方法，包括页面的四个层次：框架、布局、模块、列表和数据块。

你对页面制作方法是否了解，这里Div CSS实例教程带你一起来学习，相信通过本文的学习你对页面制作的方法一定会有明确的认识。

Div CSS实例教程：分享非常不错的页面制作方法

做前端也有几年时间了，不敢说能把他看地多透，但是多多少少还是有些自己的东西。就制作而言，我将一张页面分为四层：框架、布局、模块、列表和数据块。

一、Div CSS实例之框架

页面的框架基本上都是：“头”、“主体”、“尾”。但是对于一些页面如Tudou.com，由于布局的需要，还应在“头”的下面还要加个“菜单”。




二、Div CSS实例之布局（以下用#ID表示页面元素）

#Head和#Foot里的就不说了，具体查看演示页面源码。
布局说的是将#Main里的内容分成几大块。我们看Tudou.com，#Main里典型的左右结构，我们用#Layout_1，#Layout_2表示。如图