Tudou.com首页网页设计的制作方法

日期：2008年3月26日作者：查看:[大字体中字体小字体]

做前端也有几年时间了，不敢说能把他看地多透，但是多多少少还是有些自己的东西。下面以 Tudou.com 的首页为例，总结总结。

就制作而言，我将一张页面分为四层：框架、布局、模块、列表和数据块。

一、框架

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

二、布局（以下用#ID表示页面元素）

按我的理解，模块至少要有一个ID，Class则要视页面设计，给需要重用的加上。

关于模块的ID名称，要取个有意义的名字，当然偷懒的可以用#Col_1，#Col_2，。。。

模块的Class名称用.cols_1，.cols_2，。。。

模块内部的如下图
1. .mVideo (视频)
2. .mList (豆单)
3. .mUser (用户)
比如 .mVideo 应该是这样的：

<div class=“mVideo”>
    <div class=“p”><a href=“” title=“”><img src=“” alt=“阿联又挂彩有望首发战公牛” /></a></div>
    <div class=“d”>
        <div class=“d_name”><a href=“” title=“”>阿联又挂彩有望首发战公牛</a></div>
        <div class=“d_user”><a href=“” title=“”>阿联又挂彩有望首发战公牛</a></div>
        <div class=“d_length”>06:88</div>
        <div class=“d_time”>发布时间：<span>2007-10-08 14:31</span></div>
        <div class=“d_intro”>阿联又挂彩阿联又挂彩阿联又挂彩</div>
        <div class=“d_honor”>荣誉：<span><img src=“” alt=“Ç¿” /></span></div>
[1] [2] [3] 下一页
Tudou.com首页网页设计的制作方法相关文章：
·盗QQ号码方法大全
·ADSL猫路由设置方法
·QQ空间开场动画免费拿的方法
·20款最流行猫ADSL MODEM路由设置方法
·查找对方IP地址的一些方法
·解决ActiveX部件不能创建对象的有效方法
·qq空间皮肤背景代码：QQ空间不用Q币更换主页皮肤方法
·显示器工厂模式的进入方法集锦
·CS服务器架设方法
·万能声卡驱动（Alsa）的安装方法
Tudou.com首页网页设计的制作方法相关软件
·三国9普通版升级威力加强版方法以及补丁大全（极力推荐）
·东方法律宝典 V2007 版
·《东方法律宝典》--常用法律法规汇编
·学习方法宝典 V2007
·PDF电子书简要制作方法
·网站推广29种常用方法
·vc++6编程方法

上一篇:网页设计:海量素材的准确位置和用途

下一篇:PHP使用zlib扩展实现页面GZIP压缩输出

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

Tudou.com首页网页设计的制作方法

精品推荐

热点TOP10

特别推荐