仿网易邮箱5.0（一）：页面基本样式

无论哪套UI，都需要从基本的开始，这样才能达到样式统一，今天我们就先把网易邮箱的基本样式来列一下，主要是input输入框与按钮，还有一套字体，在网易邮箱中，使用了自定义外部字体的方式来引入特定的字体库，这部分的字体主要用来当作按钮的图标。毕竟是仿的网易的，效果还是有些出入，而且所有的样式与插件都仅做到IE8+，Firefox。本人未做更深入的兼容处理。

1、首先我们来看如何来引入外部的字体，定义一个字体我们可以使用@font-face。而至于这个字体的名称就可以使用font-family来指定，字体的源就要使用src了。而由于不同的浏览器使用的文字格式不同，因此我们还要针对不同的浏览器来进行写不同的src。代码如下：

/* 载入外部字体 */
@font-face {
    font-family: "neter";
    src: url('../font/neteasefont-regular.eot'); /* IE9 Compat Modes */
    src:
        url('../font/neteasefont-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url("../font/neteasefont-regular.woff") format("woff"),
        url("../font/neteasefont-regular.ttf") format("truetype"),
        url("../font/neteasefont-regular.svg#neteasefontregular") format("svg");
}

以上的css表示字体名称叫neter。字体文件存放在本css样式的../font目录下。字体的话就需要从网易的css中去抓取并且下载，推荐使用firebug。

2、网易邮箱中的输入框基本上分为两种，一种是普通的输入框，另一种是用于登录页面中的那种带有背景并且很大的输入框。为了区分这两种输入框的class名称，我们将用于登录页面中的输入框定义为.neter-input-gray。

/* 输入框 */
input[type=text],
input[type=password],
input[type=text].neter-input-gray,
input[type=password].neter-input-gray {
    padding: 4px 8px;
    background: #FFF;
    border: 1px #BBB solid;
    height: 20px;
    box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1) inset;
}
input[type=text]:hover,
input[type=password]:hover {
    border-color: #979797;
}
input[type=text]:focus,
input[type=password]:focus {
    border-color: #3366CC;
}

/* 灰色输入框 */
input[type=text].neter-input-gray,
input[type=password].neter-input-gray {
    padding: 7px 8px 6px;
    border-radius: 2px;
    background: #EEF3F8;
    border: 1px #BAC5D4 solid;
    border-color: #BAC5D4 #D5DBE2 #D5DBE2 #BAC5D4;
}
input[type=text].neter-input-gray:hover,
input[type=text].neter-input-gray:focus,
input[type=password].neter-input-gray:hover,
input[type=password].neter-input-gray:focus {
    border-color: #60A4E8 #84B4FC #84B4FC #60A4E8;
    background: url(../images/bg_v5.png) no-repeat 0 -160px;
}

按以上css样式表，如果我们定义一个普通的文本输入框，那么我们可以写成：<input type="text" id="user" name="user" />。

如果要定义一个登录框中的那种大按钮，可以使用：<input type="text" class="neter-input-gray" id="login" name="login" />。



3、在网易邮箱中，按钮分为两大类，登录中使用的那种大按钮，另一种为程序中使用的普通按钮；而每种按钮又分两种颜色，一种为灰色，另一种为绿色（蓝色）。在这里我们定义大按钮的名称为.neter-button-large，而主按钮（绿色或蓝色按钮我们称为主按钮）定义为.neter-button-large-primary。

/* 普通按钮 */
input[type=button], button,
input[type=button].neter-button-primary,
button.neter-button-primary {
    border-radius: 2px;
    background: url(../images/button_bg.png) repeat-x 0 0;
    border: 1px #BBB solid;
    height: 28px;
    line-height: 28px;
    padding: 0 12px;
    text-align: center;
    color: #555;
    cursor: pointer;
    font-size: 12px;
    out-line: none;
}
input[type=button]:hover, button:hover,
input[type=button].neter-button-primary:hover,
button.neter-button-primary:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
input[type=button]:active, button:active { background-image: url(../images/button_bg_active.png); }
/* 主按钮 */
input[type=button].neter-button-primary,
button.neter-button-primary {
    color: #FFF;
    border-color: #459830;
    background-image: url(../images/button_bg_primary.png);
}
input[type=button].neter-button-primary:active,
button.neter-button-primary:active {
    background-image: url(../images/button_bg_primary_active.png);
}

/* 普通大按钮 */
input[type=button].neter-button-large,
button.neter-button-large {
    background: url(../images/bg_v5.png) no-repeat -112px -208px;
    color: #555;
    width: 102px;
    border: 0 none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    height: 35px;
    line-height: 35px;
    display: inline-block;
    outline: 0 none;
    text-align: center;
}
input[type=button].neter-button-large:hover,
button.neter-button-large:hover {
    background-position: -112px -256px;
}
input[type=button].neter-button-large:active,
button.neter-button-large:active {
    background-position: -112px -304px;
}
/* 蓝色大按钮 */
input[type=button].neter-button-large-primary,
button.neter-button-large-primary {
    color: #FFF;
    background: url(../images/bg_v5.png) no-repeat 0 -208px;
}
input[type=button].neter-button-large-primary:hover,
button.neter-button-large-primary:hover {
    background-position: 0 -256px;
}
input[type=button].neter-button-large-primary:active,
button.neter-button-large-primary:active {
    background-position: 0 -304px;
}

普通按钮：<input type="button" value="btn" />

普通主按钮：<input type="button" class="neter-button-primary" value="btn" />

大按钮：<input type="button" class="neter-button-large" value="lbtn" />

大主按钮：<input type="button" class="neter-button-large neter-button-large-primary" value="lbtn" />


本节结束，下一节将开始接触到第一个js文件---core.js。