前沿视频教室————最好的CSS和Web设计与开发的视频教程

第一次“24小时CSS设计竞赛”截止

大家好！

感谢大家的积极支持，在有效时间里，我们一共收到了15份作品，其中14份为5月11日中午12:00前提交的。

下图为竞赛的题目，希望了解比赛的规则和详情，请访问这里。

我们将会认真地查看每一份作品，并给对作品进行认真的回复，并且选出一个获胜者。请参加稍者微耐心等待几天。最重要的是，希望参加者通过这几个小时的实践，能够对CSS的设计和技术有所提高和收获，并能够从中感到乐趣！

此外，我们以后，还会举行类似的活动，因此如果大家有好的建议和意见，以及在这次活动中有什么感受，请告诉我们，我们十分希望的得到大家的反馈！

再次衷心感谢15位参与者，以及其他的热心的读者！

以下为所有提交的作品：

01：查看效果，下载文件，5.10 20:59，love_yy26

02：查看效果，下载文件，5.10 23:37，txone

03：查看效果，下载文件，5.11 01:33，g_jianjian

04：查看效果，下载文件，5.11 02:48，feeldesign

05：查看效果，下载文件，5.11 03:31，liao_lugo

06：查看效果，下载文件，5.11 09:28，cxkzwn

07：查看效果，下载文件，5.11 11:13，olivier.lee

08：查看效果，下载文件，5.11 11:33，540220971

09：查看效果，下载文件，5.11 11:39，xhcwhite

10：查看效果，下载文件，5.11 11:40，agjs123

11：查看效果，下载文件，5.11 11:43，chqu21

12：查看效果，下载文件，5.11 11:53，chuangnzh

13：查看效果，下载文件，5.11 11:55，xingxing0726

14：查看效果，下载文件，5.11 11:59，linxl909

—————————————

15：查看效果，下载文件，5.11 14:13，netbarzone

8,033

这篇文章发表于 2008年05月11日 星期日 3:46 pm，并被分类于24小时CSS设计竞赛。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论，或者在您自己的网站中引用 (Trackback) 它。

欢迎您发表留言

80条留言

• At 2008.12.14 19:03, 老鼠 留言:

  呵呵，div和页面之间有间距的问题就是在这解决的，当时随便查看了其中一个作品的源文件……
  一直没找到青色的作品，刚刚在论坛里才了解到是第9个。感觉呢，没另一个获奖作品有创意。

  [回复]
  • At 2008.12.16 08:36, 温谦 留言:

    老鼠，

    好啊，下次举行，欢迎你也参加！

    [回复]
    • At 2008.12.16 19:29, 老鼠 留言:

      哈哈，可惜我才刚开始学，基础也不好，不知道赶得上进度不……

      [回复]
      • At 2008.12.16 22:20, 温谦 留言:

        老鼠，

        对于应该做的事情，任何时候开始都不晚。加油！

        [回复]
        • At 2008.12.17 10:25, 老鼠 留言:

          嗯，不过最近有很多场考试，估计要等到放假才有时间学了

          [回复]
• At 2008.12.08 22:04, Beleve 留言:

  哈哈，看来我是来晚啦 今天才发现这个网站。我看是以后需要常来呀。

  我很期待下一次的比赛，因为我也想参加哈~~~~~

  [回复]
  • At 2008.12.09 14:22, 温谦 留言:

    Beleve，

    OK，以后我们还会组织的，欢迎下次参加！

    [回复]
• At 2008.06.18 17:50, 笨笨鱼 留言:

  像这种设计竞赛多久才有一次的呀!好像都没看到有这种竞赛的通知耶.

  [回复]
  • At 2008.06.19 10:33, 温谦 留言:

    笨笨鱼 ，

    我们会不定期举行的~~~根据大家的希望！

    [回复]
• At 2008.06.03 00:11, 素素 留言:

  觉得4号 9号做得不错之外 其他都有很多小问题哦 虽然我是新手 但是我很挑剔 正在努力学习中 大家加油！！！

  [回复]
  • At 2008.06.03 11:34, 温谦 留言:

    素素，

    是的，要把一个页面作的很完善，有很多细节需要注意，这时需要慢慢积累的。

    [回复]
• At 2008.05.26 09:57, love_yy26 留言:

  很遗憾,没有得奖,可是我还是希望老师可以给我指点一下啊.
  要不连自己哪些地方有问题都不知道呢.

  [回复]
  • At 2008.05.26 14:34, 温谦 留言:

    love_yy26，

    呵呵，别遗憾，相信你也有很多收获。享受过程比享受结果更重要！

    最近我们是在太忙了，等过一段时间，我再给你恢复你关于具体的作品问题。

    [回复]
    • At 2008.05.26 16:41, love_yy26 留言:

      恩好的,谢谢！

      [回复]
• At 2008.05.25 13:50, 防盗链 留言:

  我要是来了，第一名肯定是我的。哈哈。。。。。。。。。。。。

  [回复]
  • At 2008.05.25 18:51, 温谦 留言:

    防盗链，

    呵呵，口气不小，欢迎下次参加哦~~

    [回复]
• At 2008.05.20 21:28, wyysf123 留言:

  8号作品是我的我由于时间问题只在ｉｅ7和ｆｆ中测试但是没有在ｉｅ6中测试事后我下载了ｉｅ6试了一下发现还是有很到的问题啊！
  由于学校最近没有卖网卡我也没有上网没有参与到你们的讨论很遗憾啊！
  但是我想贵在参与。真的我感觉交稿的人还是有点少啊！
  我很享受这次的过程。

  [回复]
  • At 2008.05.23 08:51, 温谦 留言:

    wyysf123，

    呵呵，不少了，希望下次能有更多人参与！

    [回复]
• At 2008.05.16 02:52, 温谦 留言:

  各位参加的朋友，以及对CSS感兴趣的朋友，大家有什么好的建议，在这里留言吧。

  谢谢！

  [回复]
  • At 2008.05.17 19:13, 月儿 留言:

    希望老师也做出一个标准的,让我们学习学习.

    [回复]
    • At 2008.05.20 09:31, 温谦 留言:

      月儿，

      大家做得不错，等我有时间做一些视频讲解一下全过程。最近太忙了，等过一段清闲一些的时候做.

      [回复]
• At 2008.05.15 10:10, love_yy26 留言:

  想问下,IE7和IE6是否可以装在同一机器上,如何装啊

  [回复]
  • At 2008.05.15 21:41, 月儿 留言:

    可以的,你安装它试试:multiple-ie-setup.exe

    [回复]
    • At 2008.05.16 15:03, love_yy26 留言:

      谢谢,我已经下载装了,不过是英文的,感觉没有原来的IE6好用,不光是因为英文的原因,有点不太习惯

      [回复]
      • At 2008.05.17 19:12, 月儿 留言:

        安装了ie7再安装这个,平时用ie7,只在做模板的时候可以用这个ie6测试

        [回复]
      • At 2008.05.17 11:18, 温谦 留言:

        love_yy26,

        也是可以把两个IE6 和 IE7两个浏览器同时安装到系统中。都是真正的IE浏览器，但是安装时有点麻烦，你可以到google搜索“IE 6 7 并存”，有很多介绍文章，一步一步按照说明操作，是可以成功的，我试验过。

        [回复]
        • At 2008.05.20 21:11, wyysf123 留言:

          我想最简单的方法是下载一个绿色版的免安装的就行了
          可以你ｉｅ6或者是ｉｅ7我就是这样做的不必担心会覆盖。

          [回复]
          • At 2008.05.23 23:18, 爱在戏院前 留言:

            更简单的是装个虚拟机。。。。。

            [回复]
• At 2008.05.14 21:54, 青色 留言:

  1号的作品是不错，但我觉得有一点不足的是没有居中。

  [回复]
• At 2008.05.13 23:13, zyuex 留言:

  4号作品真不错，有创意！
  效果很突出！
  支持你，4号！

  [回复]
  • At 2008.05.23 23:19, 爱在戏院前 留言:

    我也这么认为

    [回复]
  • At 2008.05.13 23:35, feeldesign 留言:

    谢谢您的支持！

    [回复]
    • At 2008.05.14 20:06, 小唐 留言:

      4号作品确实不错，就是右下角那辆汽车的背景图片是在fireworks里用蒙版做的吗，我用蒙版做怎么做不出这样的效果，我是把一副彩色的画蒙在一副单色的渐变图像上，也就是反过来蒙，但蒙出来却不是那种效果，感觉太淡了。

      [回复]
      • At 2008.05.14 20:38, feeldesign 留言:

        我是用photoshop做的

        [回复]
        • At 2008.05.16 10:14, 小唐 留言:

          是用蒙版做的吗，还是用颜色通道调整的呢

          [回复]
          • At 2008.05.17 17:09, feeldesign 留言:

            我的 QQ: 85577471 希望和大家成为朋友

            [回复]
• At 2008.05.13 21:23, love_yy26 留言:

  老师啊,你的JS还不出来啊?我问的那个问题真是搞不定啦.书附带的光盘JS也不可以实现我要的功能啊!
  再不把这个做好,老板要说我啦!我想这个都想几天啦,代码应该不难,只是我对js一点不懂!在百度知道上问了也没人回答. http://zhidao.baidu.com/question/53729361.html(百度知道)
  这里人多,我想在这请大家帮忙,谢谢!
  我想通过onload(),onresize()得到浏览器的大小,并且把值赋给id=”container”的div,不是直接赋给他,需要经过一下判断,就是
  如果得到的浏览器宽度大于等于850,container的width就为960,
  否则小于850则container就为760,希望赐教!
  问题补充：因为我写的页面需要在多种浏览器下可兼容,希望在取窗口大小时的对象各种浏览器支持,谢谢!
  浏览器:ie6、ie7、firefox、opera、傲游

  [回复]
  • At 2008.05.14 01:00, 郭谦 留言:

    是不是把宽和高设为百分数就可以代替这种效果了?

    [回复]
  • At 2008.05.13 23:39, feeldesign 留言:

    是不是这篇说的？

    http://hi.baidu.com/zdz8207/blog/item/f7623987a20f782fc65cc392.html

    [回复]
    • At 2008.05.14 09:09, love_yy26 留言:

      _width:expression((document.documentElement.clientWidth||document.body.clientWidth) 《850? “760px”:”960″);

      把书名号变成小括号就行啦，但是这个只有IE认识

      [回复]
    • At 2008.05.14 09:08, love_yy26 留言:

      这个我昨天也查到了,不太懂,其实我要的效果就一个
      _width:expression((document.documentElement.clientWidth||document.body.clientWidth)

      [回复]
• At 2008.05.13 15:16, uuuyeah 留言:

  我感觉1号和9号作品还可以.

  [回复]
  • At 2008.05.13 15:55, 默默守望者 留言:

    4 号有创意，css运用得不错，设计效果也很好，有可能是一等奖哦!
    我最新制作的一个网站http://www.hhqlqt.com，默默欢迎和大家交流

    [回复]
    • At 2008.05.13 23:36, feeldesign 留言:

      谢谢您的支持

      [回复]
• At 2008.05.13 12:13, chqu21 留言:

  我是11号作品的作者,我参加这个活动的目的是能够认识更多这方面的技术性的朋友,我的网页设计全都靠自学起来的,我也知道自己作品中的不少问题,但我还是希望大家多多切磋,利用设计前沿这个平台多了解一点东西,多得到一点网页设计经验.

  [回复]
  • At 2008.05.16 02:50, 温谦 留言:

    chqu21，

    谢谢您的参与！祝您CSS的功夫日有所进！

    [回复]
• At 2008.05.12 20:53, feeldesign 留言:

  大家的作品真好，学习了，这样的活动越多越好

  [回复]
  • At 2008.05.16 02:50, 温谦 留言:

    feeldesign，

    是啊，这是第一次，每什么经验，大家有什么建议，告诉我们，以后搞得更好！

    [回复]
• At 2008.05.12 17:54, 郭谦 留言:

  好像页面代码有注释的就3个页面。。。难道老师的书上没提到注释 的重要性？

  [回复]
  • At 2008.05.12 19:13, 温谦 留言:

    郭谦，

    书里面讲到了，不过大家在做的时候，未必意识到了，另外可能大家觉得这个页面内容不多，比较简单，所以必要性不大，因此没有太重视吧。

    [回复]
• At 2008.05.12 16:04, 默默守望者 留言:

  哪位网友可以把你光盘中的实例传下给我看看啊?在此谢谢了，最近经济紧张，但又想快点提高css的设计能力，所以就先看视频教程，但有些例子想自我实践时，才发现没有源实例是多么不方便！请加我QQ381724560
  ★让世界发现一个真实的我，默默守望着你的到来！
  http://hi.badu.com/peacocknet

  [回复]
  • At 2008.05.12 19:09, 温谦 留言:

    默默守望者，

    抱歉啊，合出版社有合同的，这个确实不太方便~~

    [回复]
    • At 2008.05.13 09:52, 默默守望者 留言:

      谢谢网名叫“鹤庭逸”的网友！

      [回复]
    • At 2008.05.13 09:50, 默默守望者 留言:

      我已经在热心的网友那得到了！在此谢谢了！

      [回复]
      • At 2008.05.13 09:59, 温谦 留言:

        默默守望者,

        您拿到了实例文件请限个人使用，不要传播。一本书的出版有很多人付出了很多努力，我们以及出版社还是希望通过图书的销售的到一些基本的回报，只有这样，才会有更多多人愿意为此付出努力，技术图书本来已经很难做，所以如果有可能的话还是希望大家购买我们的图书，这是对作者和出版社的支持，否则以后就没有人为此付出努力了，那么对读者也不是不好的。

        [回复]
        • At 2008.05.13 11:14, 默默守望者 留言:

          我知道现在的市场，写技术图片的人太多，太泛滥了！所以要想写好，要付出太多的心血，我还是会鼓励大家买书的了！免费的可以享受，收费的也要使用，才能真正提高自我！

          [回复]
  • At 2008.05.12 16:08, 默默守望者 留言:

    是实例

    [回复]
• At 2008.05.12 12:28, 默默守望者 留言:

  怎么个每个作品的作者都是属名为英文啊？是不是不想泄露隐私啊？还是版权的问题，希望有个来回复下！
  我还有个问题，有点不解！15：查看效果，下载文件，5.11 14:13，netbarzone
  这个作品怎么也被收录进来了，赛制上不是这样说了吗，见下：
  “严格根据Gmail的时间戳统计作品，超过最后期限时间一秒钟将不计入有效作品范围。在24小时内完成网页设计，并在2008年5月11日中午12:00:00之前，发送到指定邮箱，以邮件时间戳为准。”
  难道这是个很特殊的网页作品，我看了一下，也没怎么特殊啊，反倒是一如之前的好，在ie6下的显示效果布局很乱！请老师帮忙解答下！
  ★让世界发现一个真实的我，默默守望着你的到来！
  http://hi.badu.com/peacocknet

  [回复]
  • At 2008.05.12 19:08, 温谦 留言:

    默默守望者，

    参加了都应该感谢，所以都列出来，我列表的顺序是按照时间为序的，我在列表里划了一条横线。

    [回复]
    • At 2008.05.13 09:49, 默默守望者 留言:

      等我有时间做好了，也传上来和大家分享下哦！
      ★让世界发现一个真实的我，默默守望着你的到来！
      http://hi.badu.com/peacocknet

      [回复]
• At 2008.05.12 10:38, 默默守望者 留言:

  01号的网页有个很隐蔽的错误，可谓是隐人耳目！当你打开01号网页的时候，你不妨全选看一网页的效果，会在“我爱我车，我车我爱”的上面出现一行同内容的汉字！
  ★让世界发现一个真实的我，默默守望着你的到来！
  http://hi.badu.com/peacocknet

  [回复]
  • At 2008.05.12 18:04, love_yy26 留言:

    那个把文字和颜色设为一样是让蜘蛛爬的,去看一下SEO吧,

    [回复]
    • At 2008.05.12 19:07, 温谦 留言:

      用图像替换的方式可能更好一些，把文字通过CSS的display属性隐藏起来。《CSS设计彻底研究》里详细地讲了这个问题。

      [回复]
• At 2008.05.12 09:06, 月儿 留言:

  06号是我的,大家帮忙看看有没有错位哦,我只在ie7下看了,好像还正常,其他的没有测试.

  [回复]
  • At 2008.05.12 10:49, 默默守望者 留言:

    你的在ie6下发生了严重的错位！在dw中的浏览器兼容性检查中也发生了三个错误！两个地方的“三像素文本慢移”和
    浮动的非浮动错误★让世界发现一个真实的我，默默守望着你的到来！
    http://hi.badu.com/peacocknet

    [回复]
  • At 2008.05.12 10:44, 默默守望者 留言:

    我的在ie6下的显示效果给你截图看下，这是你网页：http://hiphotos.baidu.com/peacocknet/pic/item/b335bf440449755f510ffea8.jpg
    下面是01号的网页：http://hiphotos.baidu.com/peacocknet/pic/item/16eab213ac930dc3f7039eab.jpg
    我们再来看下01全选的效果http://hiphotos.baidu.com/peacocknet/pic/item/7cc8fbfd8cc2fd56d6887dbf.jpg
    大家还是做得不错的啊！
    ★让世界发现一个真实的我，默默守望着你的到来！
    http://hi.badu.com/peacocknet

    [回复]
    • At 2008.05.12 20:48, 月儿 留言:

      谢谢你啊,兼容问题还真是麻烦

      [回复]
      • At 2008.05.13 23:43, feeldesign 留言:

        可以看看 Multiple IE 这个工具，可能会有帮助

        [回复]
        • At 2008.05.15 21:31, 月儿 留言:

          实际上我也装了个IE6的,可是我这个ie6和ie7显示的是一样的啊

          [回复]
• At 2008.05.12 08:58, 默默守望者 留言:

  先看下大师们做的作品，学习下啊!看着不难，但是做起来却不是这么简单，尤其是要兼容好三种不同的浏览器！学习看作品去了

  [回复]
  • At 2008.05.12 19:06, 温谦 留言:

    默默守望者，

    是的，细节很重要，把细节都照顾到并不太容易。

    [回复]
• At 2008.05.12 08:17, 小文 留言:

  有好几个对firefox的兼容性都不太好

  [回复]
  • At 2008.05.12 19:05, 温谦 留言:

    小文，

    很多参加者都很忙，没有太多时间，可能没有作得很完善，不过重在参与嘛。每个参加能够有所收获就最好了！

    [回复]
• At 2008.05.12 07:38, 酷米小客 - 每日网摘 » Blog Archive » links for 2008-05-11 留言:

  […] 第一次“24小时CSS设计竞赛”截止 […]

  [回复]
• At 2008.05.11 22:24, 青色 留言:

  有好几份不错哦，其他的几份可能是作者只在自己本机的浏览器测试通过，没有在其他浏览器下测试下，总体还是不错的。。。

  [回复]
  • At 2008.05.12 19:02, 温谦 留言:

    青色，

    是啊，基本上都能把CSS的特点体现出来了。

    [回复]
• At 2008.05.11 18:02, soz 留言:

  晕……原来是采用更新文章的方式通知的。
  怪不得我的Reader没有显示。比赛就结束了。
  没有参加真是遗憾哪！

  [回复]
  • At 2008.05.12 18:20, 温谦 留言:

    soz，

    抱歉啊，没有考虑到这一点~~~下次我们注意，用新发问的方式来提醒~~

    欢迎下次参加噢~

    [回复]
• At 2008.05.11 16:15, 可可 留言:

  都还不错，支持下，
  只可惜这次我没有办法做，遗憾啊
  希望下次参加

  [回复]
  • At 2008.05.12 18:16, 温谦 留言:

    可可，

    是啊，下次一定要参加哦~

    [回复]