一个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;
}
總結(jié)
以上是生活随笔為你收集整理的一个base.css的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 渭南市天留山景区(渭南天留山国家森林公园
- 下一篇: 简单的数字钢琴谱 流行歌曲(简单的数字钢