武汉北大青鸟光谷校区5103 & 414 网页设计大赛——蝎子队

　　武汉北大青鸟光谷校区5013班和414班网页设计大赛上周火热拉开帷幕，终，由5103班夏华杰同学带领的蝎子队成员在此次比赛中斩获名，下面他将方位地为大家展示他们小组的作品。

　　这次比赛已经过去3天了，我也如愿得了名，可是我心里一直有个遗憾，因为那天是我次上台，我当时很紧张，没有向评委老师和同学们展示我们网页所使用的技术，今天，我想在这里弥补一下我心中的遗憾，请允许我在这里详细的为感兴趣的人讲解一下我们的网页所使用的技术。

　　我们的网页类型是企业网站，主题是动视公司，总共有5个页面，分别为 主页、生涯、游戏商店、支付、注册。下面上一张主页图。

　　我们的网页采用的是HTML与CSS样式，头部和尾部使用的是iframe内联框架，其它部分部采用的DIV布局，主页的动态图是我们用flash制作的，因为我们所有的心思都用在了细节方面，所以没有业余时间做课外拓展，先为大家讲解一下我们网页所使用的比较特殊也是值得一提的技术。

　　我们的导航栏是我们网页的一大亮点，是以动态的形式展现给大家的，但事实上，我们做的只是静态的，下面上一张我们导航栏的讲解图。

　　我们的导航栏采用的是ul无序列表和超链接的方式，每个li我们采用左浮动，并且每个li我们都会放一个不浮动的DIV。

　　总体的代码是这样的，使用相对定位把列表里面的DIV位置调的靠左一点，当然还有主要的一点，列表里面的DIV我们把它的Z-index设置为2，让它永远在上面一层，没有激活的时候，它会消失，鼠标指向超链接的时候，它会覆盖掉主页的宣传图片中的一部分。

　　导航栏的讲解就到此为止了，如果有对这个感兴趣的话可以找我探究，我是5103班的夏华杰。

　　这个技术我是在一次失败的过程中得到的经验，那次作业我就是因为这个浮动的问题失败了，但这次我利用这个失败的经验做出了动态的效果。通过这个导航栏我总结出了一点，失败并不可怕，因为它就是你通向成功的垫脚石。

　　其他的部分就没有什么技术含量了，都是以一个个DIV盒子布局出来板块，然后依次往里面填入内容，下面分享一下我们的游戏商店网页。游戏商店页面有一个利用html做出来的动态效果将在下面的文章中讲解。

　　这其中有一个动态效果就是游戏列表，当把鼠标指向它的时候，它的上边框会变黄，并且游戏名字背景颜色会变黄，文字也由愤怒的小鸟变成点击购买，这是用两张图片，采用超伪类链接做成的，当把鼠标指向这个被超链接包裹的列表时，它的上边框会变黄，背景图片会由游戏名字图片变成点击购买图片。其他的部分都是以DIV盒子搭建而成的。

　　当点击<点击购买>的时候，我们会进入一个支付页面，下面上图。

　　这个页面没有什么技术亮点，我们采用的是DIV盒子和css样式，边框3D效果利用的是边框样式中的outset ，调整颜色，一直到大家所看到的这样，然后不断的往里面填充内容，通过DW插入了一个视频。

　　下面上生涯页面的图片

　　这个页面主要讲的是公司的里程碑。都是一些没有技术含量的东西。

　　下面上后一个页面图片，注册页面。

　　注册用户时间很繁琐的事情，这点我亲身体验过，有时想浏览一个网站，可是到了注册帐号的时候，我就放弃浏览了，这一切就是因为注册页面太过于紧凑，给人一种注册很繁琐的感觉，所以我们的注册页面采用的风格比较简约。

　　网页的介绍就到此为止了，对于这个作品我总结了一下，失败是成功之母，如果不是因为次的失败，我们的网页就没有后来的动态导航栏，动态列表等等。在已掌握的技术中拓展新的技术，是一种特别兴奋的事情。就算失败了，也是为成功奠定新的基础。

　　——5103班 夏华杰