99网上书城的网站页面整体风格方面让我觉得还是很舒服的，应当是在网页设计方面下了很多功夫的。99书城在07年12月推出一个读书专题，称之为“QQ与MSN的一场对话”，事实上仔细看起来也蛮有道理，主要是通过QQ与MSN这两种分别代表生活和工作的聊天工具间的对话，展现出一系列面向生活和面向上班族的书籍。在内容构思方面，还是很出色的。
页面的设计也很棒，全页是用了很多小块的图片拼成了一个铺满的大图片，看起来效果不错。把大图片分解成小图片，主要是为了尽快展示页面的需要吧。我将其页面截图下来，来观摩一下。
其中的对话部分其实很长，分别包含了近十本书的介绍，这里把它压缩了。
从网页制作方面来讲，制作如此的效果不是很难。然而99书城是用了table来实现的，而且并没有将QQ和MSN部分独立，它主要是从保证各浏览器显示效果相同和易初次开发方面考虑的。
比较标准并且易移植的实现方法应当是这样：
这里可以塞N多的东西了
这里可以塞N多的东西了
我是借用了99书城的图片，请直接到原页面下载相应的图片，然后把代码中的图片地址修改了。需要的话可以把图片里的字修改一下。
为了此处实现方便，我将css代码直接嵌入HTML代码中了。如果是做比较单独的页面来实现，则建议抽出css。
just enjoy it!
源代码：
- <div style="width:481px;padding:0;margin:0;">
- <div id="qq_tt" style="background:url('qq_tt.gif') no-repeat;width:100%;height:95px;padding:0;margin:0;">
- </div>
- <div id="qq_body" style="background:url('qq_bac.gif') repeat-y;padding:10px;margin:0;">
- <p>这里可以塞N多的东西了</p>
- <p>这里可以塞N多的东西了</p>
- </div>
- <div id="qq_bot" style="background:url('qq_bot.gif') repeat;width:100%;height:35px;padding:0;margin:0;">
- </div>
- </div>
本文共有 0 条评论