一個base.css

/*!
 * base v0.0.1
 *
 * name: xiaojia
 * mail: iatt@qq.com
 * date: 2012/12/5
 */
 
html, body {
 _background-image: url(about:blank);
 _background-attachment: fixed;
}

body {
 font: `宋體`;
 margin: 0;
 background: url(images/body-bg.png);
 font-size: 12px;
 _behavior: url(../resources/js/lib/csshover.htc);
}

a {
 text-decoration: none;
}

textarea {
 outline:none;
 resize:none;
 outline:none;
 font-family:”微軟雅黑”, “宋體”;
 font-size:12px;
 margin: 0;
 padding: 0;
 overflow: auto;
}

form, ol, ul, li, dl, dd {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

input {
 outline:none;
 font-family:”微軟雅黑”, “宋體”;
 *vertical-align:middle;
 margin: 0;
 padding: 0;
}

button {
 font-family:”微軟雅黑”, “宋體”;
 *vertical-align:middle;
 margin: 0;
 padding: 5px 20px;
 *padding: 1px 10px;
 _margin-bottom: 1px;
}

img {
 border: 0;
}

#header {
 _left: expression(eval(document.documentElement.scrollLeft));
 _top: expression(eval(document.documentElement.scrollTop));
}

#header,#header-bg,.header-top {
 height: 83px;
 z-index: 10;
 background: #2794de;
}

.header-logo {
 margin: 25px 0 0 10px;
 _display: inline;
}

.header-menu {
 margin: 38px 0 0 50px;
 _display: inline;
 _width: 560px;
}

.header-menu ul li {
 margin: 0 10px;
 float: left;
}

.header-menu ul li a {
 display: block;
 position: relative;
 color: #aad5f3;
 font-family: `微軟雅黑`;
 font-size: 16px;
 _float: left;
}

.header-menu ul li a:hover {
 height: 45px;
 background: url(images/header-menu-hover-icon.png) no-repeat bottom center;
 text-decoration: none;
}

.header-menu ul li a.selected {
 height: 45px;
 color: #fff;
 background: url(images/header-menu-hover-icon.png) no-repeat bottom center;
}

.header-menu ul li a div.hot {
 width: 30px;
 height: 18px;
 position: absolute;
 top: -14px;
 right: -21px;
 background: url(images/icons.png) -5px -5px;
}

.header-op {
 width: 200px;
 height: 83px;
}

.op-login {
 width: 200px;
 _display: inline;
}

.op-login .login-button,.user-release {
 width: 64px;
 height: 28px;
 background: #d1f4ff;
 border-radius: 3px;
 line-height: 28px;
 text-align: center;
 font-size: 16px;
 margin: 33px 6px 0;
 cursor: default;
}

.user-release {
 width: 72px;
 height: 31px;
 line-height: 31px;
 text-indent: 14px;
 background: url(images/icons.png) no-repeat -335px -170px;
}

.login-button a {
 color: #1292e8;
}

.op-login .login-more,.header-userinfo {
 width: 41px;
 height: 83px;
 margin:0 6px;
 position: relative;
 background: url(images/icons.png) -74px 29px no-repeat;
}

.header-userinfo {
 background: none;
 text-align: center;
 margin-right: 0;
}

.header-userinfo .header-userinfo-message {
 position: absolute;
 top: 23px;
 right: -1px;
 padding: 0 3px;
 height: 17px;
 background: #ff5555;
 line-height: 17px;
 text-align: center;
}

.header-userinfn-message a {
 color: #000;
}

.header-userinfo:hover {
 background: #258cd3 -565px 35px no-repeat url(images/icons.png);
}

.header-userinfo img.head {
 margin-top: 32px;
 width: 30px;
 height: 30px;
}

.op-login .login-more:hover .menu {
 display: block;
}

.op-login .login-more:hover {
 background-position: -145px 29px;
 background-color: #258cd3;
}

.header-layer-menu {
 width: 129px;
 position:absolute;
 border: solid 1px #e5e5e5;
 background: #fff;
 box-shadow: #e5e5e5 1px 1px 1px;
 border-top: 0;
 top: 83px;
 right: -1px;
 display: none;
 text-align: left;
}

.header-userinfo:hover .menu {
 display: block;
}

.header-layer-menu ul li {
 width: 100%;
 height: 32px;
}

.header-layer-menu ul li.border-top {
 border-top: solid 1px #e5e5e5;
}

.header-layer-menu ul li a {
 display: block;
 width: 100%;
 height: 100%;
 line-height: 32px;
 text-indent: 10px;
 float: left;
 color: #666;
}

.header-layer-menu ul li a:hover {
 background: #249fe1;
 color: #fff;
}

.main {
 display: table;
 margin: 0 auto;
 width: 960px;
 
}

#header-registered {
 border: solid 1px #d0d0d0;
 background: #fff8e6;
 border-top: 0;
 box-shadow: #dfdfdf 0 2px 2px;
 border-radius: 0 0 5px 5px;
 width: 958px;
}

#header-registered,.header-reg-left,.header-reg-right {
 height: 78px;
}

.header-reg-left,.header-reg-right {
 width: 240px;
 font-size: 14px;
 font-weight: bold;
 line-height: 78px;
 text-align: center;
}

.header-reg-right a {
 color: #4f94c3;
}

.header-reg-center {
 width: 340px;
 margin-left: -170px;
 margin-top: -20px;
}

.header-reg-button {
 width: 76px;
 height: 34px;
 margin: 2px;
 font-size: 14px;
 font-weight: bold;
 line-height: 34px;
 text-align: center;
 border-radius: 3px;
}

.header-reg-api {
 margin: 2px 0 0 10px;
}

.header-reg-api ul {
 margin-left: -5px;
}

.header-reg-api ul li {
 width: 23px;
 height: 18px;
 margin: 3px 4px 0 0;
 background-image: url(images/icons.png);
 background-repeat: no-repeat;
 float: left;
}

.header-reg-api ul li a{
 display: block;
 width: 27px;
 height: 18px;
}

.i-qq {
 background-position: -246px -10px;
}

.i-sina {
 background-position: -275px -10px;
}

.i-qqt {
 background-position: -304px -10px;
}

.i-dou {
 background-position: -333px -10px;
}

.i-kx {
 background-position: -360px -10px;
}

#header-reg-big {
 background: url(images/registered-bg.png) no-repeat;
 width: 958px;
 height: 319px;
 position: absolute;
 top: 83px;
 left: 0;
 z-index: -2;
 border-top: 0;
}

#header-reg-big .big-width {
 width: 882px;
 margin-left: auto;
 margin-right: auto;
 display: table;
 text-align: center;
}

#header-reg-big .text1,.text2 {
 margin-top: 43px;
 color: #a8a8a8;
}

#header-reg-big .text2 {
 margin-top: 35px;
}

#header-reg-big .button-list {
 margin-top: 20px;
}

#header-reg-big .input-list {
 background: url(images/registered-bg-2.png) no-repeat;
 width: 882px;
 height: 108px;
 margin-top: 13px;
 text-align: center;
}

.input-list .inline {
 margin: 30px 5px;
 float: left;
}

.input-list .big-input {
 width: 190px;
 height: 36px;
 border: solid 1px #ececec;
 background: url(images/icons.png) no-repeat -549px -142px #fff;
}

.input-list .big-input input {
 width: 150px;
 height: 34px;
 line-height: normal;
 *line-height: 34px;
 color: #c4c4c4;
 border: 0;
 float: right;
}

.input-list .big-input-submit {
 width: 124px;
 height: 38px;
 line-height: 20px;
 background: #91d1fc;
 color: #fff;
 font-size: 14px;
 border: 0;
}

.input-list .big-a {
 margin-top: 53px;
}

.input-list .big-a a {
 color: #5792b8;
}

.input-list .big-margin-left {
 margin-left: 115px;
 background-position: -549px -81px;
 _display: inline;
}

#user-release {
 margin-top: 35px;
 background: #fff;
}

.release-head {
 width: 100px;
 height: 100px;
}

.release-head img {
 width: 100%;
 height: 100%;
}

.release-op {
 width: 850px;
 height: 100px;
}

.release-op a {
 display: block;
 float: left;
 margin: 14px 0 0 40px;
}

.header-reg-button a {
 color: #fff;
}

#footer {
 background: #dadada;
 height: 75px;
 display: table;
 *position: relative;
}

.copyright {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 color: #8f8f8f;
 *position: relative;
 *left: 0;
 *top: 50%;
}

.footer-content {
 *position: relative;
 *top: -50%;
}

.bottom-tip {
 width: 100%;
 height: 123px;
 left: 0;
 bottom: 0;
 z-index: 2;
}

.bottom-tip .bg {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.75;
 filter: alpha(opacity=75);
 z-index: -1;
}

.bottom-tip .tip-text {
 color: #FF0;
 font-family: `微軟雅黑`;
 width: 180px;
}

.bottom-tip .tip-text span{
 display: block;
 margin-top: 10px;
}

.bottom-tip .main {
 height: 100%;
 background: url(images/bottom-tip-bg.png) 170px 75px no-repeat;
}

.bottom-tip .tip-api {
 width: 600px;
 margin: 20px 0 0 70px;
}

.bottom-tip .tip-api .left {
 position: relative;
}

.bottom-tip .tip-api .right {
 margin-top: 7px;
 color: #fff;
 font-size: 14px;
 padding-right: 10px;
}

.bottom-tip .tip-api .right a {
 color: #fff;
}

.bottom-tip .tip-api .left ul {
 padding: 5px;
 height: 36px;
 margin-top: 3px;
 border-radius: 5px;
 display: table;
}

.bottom-tip .tip-api .left ul li {
 float: left;
}

.bottom-tip .tip-api .bg {
 opacity: 0.5;
 filter: alpha(opacity=50);
 border-radius: 5px;
}

.bottom-tip .tip-up {
 width: 70px;
 height: 103px;
 background: url(images/icons.png) -840px 28px #bcbcbc;
 margin-top: 20px;
 border-radius: 5px 5px 0 0;
 cursor: pointer;
}

.page-top {
 width: 42px;
 height: 42px;
 display: block;
 bottom: 20px;
 right: 20px;
 background: url(images/icons.png) no-repeat -741px -52px;
 position: fixed;
 _position: absolute;
}

.page-top:hover {
 background-position: -741px -4px;
}

.make-list ul li{
 margin-top: 10px;
 float: left;
}

.make-list ul li .head {
 float: left;
}

.make-list ul li .head img {
 width: 61px;
 height: 61px;
}

.make-list ul li .title,.make-list ul li .desc {
 float: left;
 width: 177px;
 height: 20px;
 line-height: 20px;
 margin-left: 10px;
 position: relative;
}

.make-list ul li .title .icon-make {
 position: absolute;
 top: -6px;
 right: 0;
}

.make-list ul li .title a {
 color: #5792b8;
}

.make-list ul li .desc span {
 display: block;
 width: 177px;
 height: 20px;
 overflow: hidden;
 color: #b4b4b4;
}

.search-250 {
 border: solid 1px #e0e0e0;
 width: 248px;
 background: #fff;
 height: 30px;
 position: relative;
}

.search-250 input {
 width: 190px;
 margin: 5px 0 0 10px;
 border: 0;
 color: #d8d8d8;
}

.search-250 .search-250-button {
 background:url(images/icons.png) no-repeat -286px -66px;
 width: 42px;
 height: 31px;
 position: absolute;
 top: -1px;
 right: -3px;
}

.class-left {
 padding: 20px 0;
}
 
.class-left ul li {
 height: 25px;
 line-height: 25px;
 padding: 0 4px 0 0;
 background: url(images/index-class-li-bg.png) no-repeat center right;
 float: left;
}

.class-left ul li a {
 display: block;
 height: 25px;
 padding: 0 14px;
 color: #5792b8;
 position: relative;
 _float: left;
}

.class-left ul li a.selected {
 background: url(images/index-class-li-icon.png) no-repeat bottom #a9b8c5;
 color: #fff;
 font-weight: bold;
 padding-bottom: 5px;
}

.height-0 {
 font-size: 0;
}

.overflow {
 overflow: hidden;
}

.f8f8f8f {
 color: #8f8f8f;
}

.bff8383 {
 background: #ff8383;
}

.b1fc480 {
 background: #1fc480;
}

.cff4e4e {
 color: #ff4e4e;
}

.cb4b4b4 {
 color: #b4b4b4;
}

.ccccccc {
 color: #ccc;
}

.cffff00 {
 color: #ffff00;
}

.c2794de {
 color: #2794de;
}

.c5792b8 {
 color: #5792b8;
}

.cff5a5a {
 color: #ff5a5a;
}

.width-100pt {
 width: 100%;
}

.table {
 margin: 0 auto;
 display: table;
}

.font-14 {
 font-size: 14px;
}

.font-16 {
 font-size: 16px;
}

.font-18 {
 font-size: 18px;
}

.font-24 {
 font-size: 24px;
}

.font-36 {
 font-size: 36px;
}

.font-bold {
 font-weight: bold;
}

.block {
 display: block;
}

.hide {
 display: none;
}

.left {
 float:left;
}

.right {
 float: right;
}

.fixed {
 position:fixed;
 _position: absolute;
}

.relative {
 position: relative;
 z-index: 1;
}

.center {
 position: absolute;
 top: 50%;
 left: 50%;
}

.template {
 display: none;
}

.top-0 {
 top: 0;
}

.left-0 {
 left: 0;
}

.shadow {
 border: solid 1px #dfdfdf;
 box-shadow: #dfdfdf 0 0 10px;
}

.clear-margin {
 margin: 0;
}

.clear-padding {
 padding: 0;
}

.clear {
 clear: both;
}

.width-140 {
 width: 140px;
}

.width-180 {
 width: 180px;
}

.width-250 {
 width: 250px;
}

.width-321 {
 width: 321px;
}

.width-400 {
 width: 400px;
}

.width-420 {
 width: 420px;
}

.width-440 {
 width: 440px;
}

.width-460 {
 width: 460px;
}

.width-580 {
 width: 580px;
}

.width-600 {
 width: 600px;
}

.width-900 {
 margin: 0 auto;
 display: block;
 width: 900px;
}

.height-66 {
 height: 66px;
}

.height-112 {
 height: 100px;
}

.margin-top {
 margin-top: 5px;
}

.margin-top-10 {
 margin-top: 10px;
}

.margin-top-20 {
 margin-top: 20px;
}

.margin-top-40 {
 margin-top: 40px;
}

.text {
 display: block;
 padding: 8px 0;
}

.inline {
 display: inline-block;
}

.button-renren,.button-taobao,.button-douban,.button-qq,.button-weibo {
 display: inline-block;
 background: url(images/button.png) no-repeat;
 width: 110px;
 height: 32px;
 margin:0 3px;
}

.button-renren {
 background-position: 0 0;
}

.button-taobao {
 background-position: -114px 0;
}

.button-douban {
 background-position: -228px 0;
}

.button-qq {
 background-position: -342px 0;
}

.button-weibo {
 background-position: -456px 0;
}

.button-renren-big,.button-taobao-big,.button-douban-big,.button-qq-big,.button-weibo-big {
 display: inline-block;
 background: url(images/button-big.png) no-repeat;
 width: 150px;
 height: 44px;
 margin:0 3px;
}

.button-renren-big {
 background-position: 0 0;
}

.button-taobao-big {
 background-position: -155px 0;
}

.button-douban-big {
 background-position: -309px 0;
}

.button-qq-big {
 background-position: -463px 0;
}

.button-weibo-big {
 background-position: -618px 0;
}

.icon {
 margin: 5px;
 cursor: pointer;
 background: url(images/icons.png) no-repeat;
}

.icon-face,.icon-image {
 width: 23px;
 height: 23px;
 background-position: -7px -61px;
}

.icon-image {
 background-position: -54px -61px; 
}

.icon-text,.icon-photo,.icon-video,.icon-music,.icon-link {
 width: 60px;
 height: 75px;
}

.icon-text {
 background-position: 2px -238px;
}

.icon-text:hover {
 background-position: 2px -318px;
}

.icon-photo {
 background-position: -113px -238px;
}

.icon-photo:hover {
 background-position: -113px -318px;
}

.icon-video {
 background-position: -227px -238px;
}

.icon-video:hover {
 background-position: -227px -318px;
}

.icon-music {
 background-position: -343px -238px;
}

.icon-music:hover {
 background-position: -343px -318px;
}

.icon-link {
 background-position: -456px -238px;
}

.icon-link:hover {
 background-position: -456px -318px;
}

.icon-make {
 border: solid 1px #d7d7d7;
 display: block;
 width: 47px;
 height: 20px;
 line-height: 20px;
 text-indent: 20px;
 color: #666;
 font-size: 12px;
 background-position: -440px -62px;
}

.icon-make:hover {
 color: #e3f4ff;
 background: url(images/icons.png) no-repeat -441px -90px #7dbfeb;
 border-color: #7dbfeb;
}

.loading{
 display:none;
 width:100%;
 height:30px;
 background:url(images/loading2.gif) no-repeat scroll center center transparent;
}
.hidden{
    display: none;
}
.clearfloat{
 overflow: auto;
}