永恒之塔Aion差不多是两年前就出的游戏了，公测时我就冲进服务器，因为我被它的画面吸引了。记得当时第一次玩用WASD移动的游戏，操作实在太差了，当然，现在同样很差。那时在网吧熬一个通宵，只把角色升到10级。因为这游戏没朋友和我一起玩，我的号升到20多级就没玩了，游戏时间还有200多小时。那时玩的是弓星，还能挑个精英怪啥滴，现在进去，高自己5级的怪都挑不死了，操作更差。不过最近在网上一找，还找到Aion模拟器，可以自己架私服，要啥极品装备就自己刷，可以过把瘾。网游我玩过几个，也看别人玩过好多，不过UI设计还是Aion的最漂亮，最近在178上看到Aion UI制作教程，就用里面的方法把官方UI的素材弄出来，为自己的小站做一个皮肤。
Boss图标被用来做搜索框：
战士图票被用来做日志图标：
游戏中的控制及状态栏被用来做Menu背景，只是原界面太大，中间的技能框有12个，被我裁成了6个，这样才能在大多数电脑上显示出来：
游戏中的回城技能做成了返回首页的菜单项，而且各个菜单项都尽量还原游戏中的动态效果：
这个本是游戏中的菜单按钮，因为形状的原因，我想做成toTop按钮，不过因为这个皮肤层特殊，命令无效，而我又不想再加js代码，所以现在只是个摆设。
这个位置原来是“势力比”按钮，但形状不符合我的要求，就换成一把锁，做到后台管理的入口链接：
讲完了界面特色，再来说下技术，当然，这些都是从网上找的，我自己可写不出代码来。首先，这套皮肤需要在页面低部固定一个菜单栏，所用的代码并不复杂，只是CSS，没用用JS，不过因为这段特殊的CSS代码，皮肤中的其它CSS元素定义都不容易，还好解决了大部分。
<style type="text/css">
html,body {
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
background:#ff7000 url(bg.gif) repeat-x bottom;
}
#Main {
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
z-index:1;
text-align:center;
background:url(top-bg.png) no-repeat center top;
}
#Content {
width:960px;
text-align:left;
}
#ToolBar {
position:absolute;
bottom:0px;
right:16px;
width:100%;
height:208px;
text-align:center;
background:url(toolbar-bg.png) no-repeat center;
z-index:2;
overflow:hidden;
}
</style>
<div id="ToolBar"><p>菜单栏、工具栏、固定栏</p></div>
<div id="Main">
<div id="Content">
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
<p>内容部分</p>
</div>
</div>
要实现这个效果，Main和Toolbar现个部分要是平级的，不能存在包含关系，在isRoc的皮肤中，最大的平级层是Page和Footer，可是我不会更改menu位置，改了就出错，最后只能用Page的了层Header、Menu、Middle，我弃Header不用，用了Menu和Middle，可是把上面的CSS代码赋予相应部分后，MiddleContent、MiddleTop不管怎么搞，都不能居中，而那个Footer去跑到最顶部赖着不动，我可以把它定义到底部，却也只是在Menu背后不动，这样我干脆不要它了。其实按以上代码定义后，会滚动的只有Middle的子元素，Middle本身都不滚动，也不知道什么原因。原代码可是Middle也跟随着滚动的。为了能使页面居中，我只好上网找CSS居中的方式，把几种常规代码，赋予到page层或是Middle层，或是MiddleContent层，甚至是body层，都无效，最后终于找到一个能忽略上面那些代码的居中方式：
width:960px; left:50%; position:absolute; margin-left:-480px;
这样总算是做得有点样子啦。当然，还有一些Bug需要处理，先自己弄一下，到整不好的时候求助汤汤了。已知Bug有：
- 搜索出错，原来搜索是在侧边栏上，我把它移到顶部后，并不能成功搜索（因此我把控件隐藏了）。
- 在首页MiddleBottom定义无效，原因不明，所以首页上底部被Menu遮住了。
- 日志回复列表不显示，原因不明，只有回复后显示，再涮新又藏起来了。
- 六点统计数字不显示，原因不明。
- 分页定义部分中邪不，我把border:1px solid #DDDDDD之类的代码全注销掉，它还是要边框，难到程序自己有定义？
- 独立页面链接的提屏幕示不对。