首页的重新设计并支持移动设备

之前首页设计的比较乱，看上去可能没问题，但是代码一塌糊涂，下面的留个按钮也是以table的形式排列的，所以根本不兼容移动设备，每次用手机打开时都会感觉到很别扭，强迫症表示受不了。

开始想使用Kube框架的，折腾了一会感觉还是不合适，这个响应式设计的框架如果直接照着使用还行，但是我这里一些地方有自己的设计，不能生搬硬套，改他的css也比较繁琐，于是决定自己针对移动端写一个css。首先把以前的table之类样式全部清理掉，全版面是div的嵌套，感觉轻松了不少，然后修改html：

<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" href="smartphone.css" media="only screen and (max-width : 600px)">
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

一三行是针对普通PC端和移动端的css引用，第二行是突发奇想，把移动端的css用到小窗口浏览上。

这里出现一个问题，就是移动设备也会载入PC端的一些样式，所以需要覆盖重写，所以之前copyright的绝对定位是没法使用的，只能一行一行往下挤。但是按钮那一排是浮动元素，copyright自动跟在了上面main文字的后面，雅阁给的办法是after伪类清除浮动，貌似很常用的手段：

.linkbar{
    width: 600px;
    margin: auto;
    margin-top: 50px;
    clear:both;
}

.linkbar:after {
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}

之后也没太大问题了，基本就是调调位置之类的了，哦对了，那个，在电脑上显示没问题的图标，放到手机上会显示模糊，我猜测是Retina屏幕的问题，目前还没找到解决方法，以后慢慢说吧。