齐鲁社区 » 『电脑数码』 » x-space CSS样式表功能块说明

冯总书记 发表于 2007-12-21 23:51

x-space CSS样式表功能块说明

/*
X-Space Template
Template Name: Classic Blue
Author: X-Space Team
Url: http://www.supesite.com
(C) 2001-2006 Comsenz Inc.
这里是一些相关版权说明，不用去理会，放这里不用动*/
/*布局，下面这一部分是对页面中主体内容部分一些操控，共有三部分，这是最重要的一段，它将直接影响到您的页面总体布局*/

/*这一段是个人空间主体部分的页宽及左右边距，!important 是用来指定给Mozilla Firefox浏览器使用的，最下面的一行针对我们常用的IE*/
#content {
text-align: left;
width: 960px;
margin: -17px 0px 0px 0px !important;
margin: -17px 0px 0px 0px;
}

/*Layout_1 左侧有导航模块，个人空间设置里您可以把页面设成左右、右左或是左中右的样式，所以这里分成了三部分为了有针对性的去调用*/
.xspace-layout1 #sideleft {
float:left;
width: 190px;
padding-top:12px;
}
.xspace-layout1 .mainarea-side {
width: 750px;
margin-left: 190px !important;
margin-left: 182px;
padding-left: 15px;
padding-top:12px;
background:#e6e6e6 url(http://www.d-show.cn/attachments/2007/01/2_200701140254215.gif) repeat-y left top;
}

/*Layout_2 右侧有导航模块时*/
.xspace-layout2 #sideright {
float: right;
width: 200px;
padding-top:12px;
padding-left:10px;
background:#e6e6e6 url(http://www.d-show.cn/attachments/2007/01/2_200701140254215.gif) repeat-y left top;
}
.xspace-layout2 .mainarea-side {
float: left;
padding-top:12px;
width: 740px;
}

/*Layout_3 三列时，也就是左中右结构*/
.xspace-layout3 #sideleft {
float:left;
padding-top:12px;
width: 190px;
}
.xspace-layout3 #sideright {
float:right;
padding-top:12px;
width: 185px;
padding-left:0px;

}
.xspace-layout3 .mainarea-side {
float: left;
width: 561px;
padding-left:10px;
padding-top:12px;
padding-right: 10px;
background:#e6e6e6 url(http://www.d-show.cn/attachments/2007/01/2_200701140353281.gif) repeat-y left top;
}

/*用户头像样式，为了不让个性头像有背景或是边框，特意给了头像一个单独的定义*/
#xspace-avatar { text-align: center; padding-top: 5px; }
#xspace-avatar img { max-width: 150px; max-height: 200px; width: expression(this.width > 150 && this.height < this.width ? 150: true);
height: expression(this.height > 150 ? 150: true); margin: 0 auto; background: none; border: 0; }
#xspace-avatar p { margin: 0; font-weight: bold; line-height: 2.5em; }
#xspace-avatar img .xspace-imgstyle { background: none; border: 0;}

/*图片样式，也就是 最新来客、我的好友、我的最新图片这几个模块中图片的表现形式，可以看到这里加入了背景色及外边框*/
.xspace-imgstyle {
background: #F5F5F5; border-color: #E2E2E2;
}

/*这里规定了标题的样式，加入了标题背景图片，看上去效果能有些变化*/
h1.xspace-title {
background: transparent;
border-bottom: 1px solid #DEDEDE;
}
.xspace-blocktitle {
overflow: hidden;
font-size: 1em;
color: #333;
height: 22px;
line-height: 22px;
background: url(http://www.d-show.cn/attachments/2007/01/2_200701140253091.gif) repeat-x bottom;
}
#mainarea .xspace-blocktitle {
padding-top:12px;
font-size: 1.2em;
}
li.xspace-loglist h4.xspace-entrytitle {
background: url(http://www.d-show.cn/attachments/2007/01/2_200701140253092.gif) no-repeat bottom left;
padding-left:24px;
}

/*页面样式，给页面总体加了一个齐上方而且只有左右循环的背景图片，也就是头部的深色长条图片*/
body {
margin: 0;
padding: 0;
background: #e6e6e6 url(http://www.d-show.cn/attachments/2007/01/2_200701140254214.png) repeat-x top;
font: 12px Arial, Helvetica, sans-serif;
color: #333;
}

/*这是一些输入窗口的字体样式*/
input, textarea, select, button {
font: 1em Arial, Helvetica, sans-serif;
}

/*这就是最大的那个容器，下面的所有内容都将放置在它的内部，总体控制了页面的宽度及左右边距--AUTO*/
#wrap {
margin-right: auto;
margin-left: auto;
width: 960px;
padding: 0; }

/*放置头部内容的一个顶部容器*/
#header {
padding: 0;
width: 960px;
height: 151px;
position: relative;
}

/*这一句说明只要是在头部容器内的字体都将是白色的*/
#header *{
color: #FFF;
}

/*将要放置空间名称的一个容器，这里要指出的是我们为了让那个棒球帽的PNG图片在IE中可以透明底色调用了IE滤镜(不支持IE5)*/
#spacename {
margin: 0px 0px 0px 0px;
height: 151px;
background:url(http://www.d-show.cn/attachments/2007/01/2_200701140253094.png) no-repeat left !important;
background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.d-
show.cn/attachments/2007/01/2_200701140253094.png',sizingMethod='image');
}

/*右上角个人空间名称及URL*/
#xspace-spacename {
padding: 12px 20px 0 0;
height: 86px;
overflow: hidden;
text-align: right;
position: absolute;
width: 940px;
}

/*右上角个人空间名称及URL(在Mozilla Firefox中调用的样式)*/
#xspace-spacename .xspace-manage { float: right !important; margin: 0 3px 0 0; }

/*个人空间名称放置的容器*/
#xspace-spacename p { text-align: right; margin: 0; clear: both; width: 940px; }
#xspace-spacename p a { display: none; }
#xspace-spacename p a.xspace-add2fav { display: none; }

/*个人空间名称的粗体字体样式，如果去掉这个段，字体将会默认为14px*/
#xspace-spacename strong {
font-size: 12px;
}

/*用户菜单/Space快速导航，照猫画虎就可以了*/
#guide {
text-align: right;
margin: 0 ;
}
#xspace-action, #xspace-guide {
list-style: none;
margin: 0; padding: 0;
}
/*\*/ * html #xspace-action, * html #xspace-guide { height: 1%; } /**/ *>#xspace-action, *>
#xspace-action, #xspace-guide { margin: 0.5em 0; }
   #xspace-guide li { float: left; }
#xspace-action a, #xspace-guide a { padding-left: 1.6em;   padding-top: 3px;background: url(http://www.d-
show.cn/attachments/2007/01/2_200701140254042.gif) no-repeat 0; }

/*这一段中修改了前面带有小图标的那些链接文字样式，个人空间中有不少带有小图标的功能链接，如果不想和别人一样，也可以自行指定图片地址*/
#xspace-action a.xspace-sendpm { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254046.gif) no-repeat 0; }
#xspace-action a.xspace-profile { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254045.gif) no-repeat 0; }
#xspace-action a.xspace-message { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254213.gif) no-repeat 0; }
#xspace-guide a.xspace-spacehome { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254211.gif) no-repeat 0; }
#xspace-guide a.xspace-ctrlpannel { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254041.gif) no-repeat 0; }
#xspace-guide a.xspace-sitehome { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254043.gif) no-repeat 0; }
#xspace-guide a.xspace-bbs { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140253096.gif) no-repeat 0; }
#xspace-guide a.xspace-post { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254042.gif) no-repeat 0; }
#xspace-guide a.xspace-addfriend { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140253095.gif) no-repeat 0; }

/*这里是对上方主菜单滑动门效果的定位方法，把它向上移动了39像素，向右移动了193像素，可以把棒球帽透出来*/
#menu {
float: left;
position: absolute;
height: 22px;
width: 765px;
margin: -39px auto 0px 193px;
float: right;
}

/*下面是对滑动门效果菜单的正式定义，这里只是做了简单的尺寸修改，有心的朋友可以做出更加理想的效果*/
#xspace-menu li {
margin: 0px;
}
#menu li a {
float: left;
background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254212.gif);
width: 74px;
height: 22px;
line-height: 22px;
text-align: center;
text-decoration: none;  
color: #575757;
}
#menu li a:hover, #menu li.xspace-active a {
background-position: 0 -22px;
color: #fff;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: none;
   }
a:visited {
color: #666;
   }

/*页面底部版权信息等的样式，这里加了一个小的底图齐上部并左右循环*/
#xspace-footer {
   margin: 0;
   border-top: 1px solid #FFF;
   background:#494949 url(http://www.d-show.cn/attachments/2007/01/2_200701140253093.gif) repeat-x top;
}
#xspace-footer * {
color: #FFF !important;
}

大眼sky 发表于 2007-12-22 08:56

不错 不错

小么哥弟弟 发表于 2007-12-22 10:51

*** 作者被禁止或删除 内容自动屏蔽 ***

查看完整版本: x-space CSS样式表功能块说明