给大家带来Div CSS实例教程：页面制造办法

支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
做前端也有几年工夫了，不敢说能把他看地多透，可是多几少仍是有些本人的器材。就制造而言，我将一张页面分为四层：框架、结构、模块、列表和数据块。

　　1、框架

　　页面的框架基础上都是：“头”、“主体”、“尾”。可是关于一些页面如Tudou.com，因为结构的必要，还应在“头”的上面还要加个“菜单”。

登录/注册后可看大图

　　2、结构（以下用#ID暗示页面元素）

　　#Head和#Foot里的就不说了，详细检察演示页面源码。
　　结构说的是将#Main里的内容分红几年夜块。我们看Tudou.com，#Main里典范的摆布布局，我们用#Layout_1，#Layout_2暗示。如图

登录/注册后可看大图

　　3、模块

　　结构#Layout_1，#Layout_2里的块就是模块了，
　　按我的了解，模块最少要有一个ID，Class则要视页面计划，给必要重用的加上。
　　关于模块的ID称号，要取个成心义的名字，固然偷懒的能够用#Col_1，#Col_2，。。。
　　模块的Class称号用.cols_1，.cols_2，。。。

登录/注册后可看大图

　　模块外部的以下图

登录/注册后可看大图

　　4、列表和数据块

　　模块的主体是由列表构成的，而列内外则包括数据块。
　　按我的了解，页面上的信息实在就是分歧范例的列表。我们应将典范的列表体例提掏出来，放在公用款式里（public.CSS）。
　　以Tudou.com为例，必要界说到public.css里的列表最少要有以下三种：

　　1..list-v垂直列表体例(图片和笔墨成垂直分列)
　　2..list-h程度列表体例(图片和笔墨成程度分列)
　　3..list-t笔墨列表体例


　　数据块实际上是微格局的一个变响应用，给分歧的数据元素界说流动的布局。
　　Tudou.com必要界说的数据块有：

　　1..mVideo(视频)
　　2..mList(豆单)
　　3..mUser(用户)


　　好比.mVideo应当是如许的：

<divclass=“mVideo”>
<divclass=“p”><ahref=“”title=“”></span></div>
<divclass=“d_view”>人气：<span>222</span></div>
<divclass=“d_comment”>批评：<span>323</span></div>
<divclass=“d_favorite”>保藏：<span>32</span></div>
<divclass=“d_type”>范例：<span><ahref=“”title=“”>