永恒之塔中国's Archiver

永恒之塔视频站

mmoaion 发表于 2007-10-10 16:45

永恒之塔中国站 玩转论坛“个人空间”

[b][color=blue]1.“升级个人空间”的方法?[/color][/b]


登陆论坛后 点击“升级个人空间”，即会弹出新空间页面

鼠标移至左上交的导航，即会显示出登陆框

输入论坛的用户名及密码 登入后 再将鼠标移至左上交的导航，点击下拉导航条中的“空间管理”

即会自动升级到最新版的个人空间 进行相关的设置后 即可开始使用全新的功能强大的my space了

天赐tc娃娃 发表于 2007-11-22 14:53

占楼一用

[b][color=blue]2.如何添加鼠标样式？[/color][/b]

[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3]打开个人空间，点击“空间管理”进到个人空间后台－>“模板”－>“可视化模板DYI”－“[/size][url=http://localhost/supesite/spacecp.php?action=usertemplates&op=drag][size=3][color=windowtext]进入可视化模板DIY[/color][color=windowtext]页面[/color][/size][/url][size=3]”，如图1所示：[/size][/font][/color][/align][align=left][font=宋体][size=3]
[img]http://www.discuz.net/attachments/month_0612/1_DPsnjTNrxUP0.jpg[/img] [/align][/size][/font]
[align=left][font=宋体][size=3][/size][/font][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3]点击“[/size][url=http://localhost/supesite/spacecp.php?action=usertemplates&op=drag][size=3][color=windowtext]进入可视化模板DIY[/color][color=windowtext]页面[/color][/size][/url][size=3]”进入如图2所示的页面：[/size][/font][/color][/align][align=left][font=宋体][size=3][img]http://www.discuz.net/images/Beijing2008/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0612/2_INyJV05gnMAx.jpg[/img] [/align][/size][/font]
[align=left][font=宋体][size=3][/size][/font][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3]点击“编辑页面整体样式”弹出如图3所示的窗口：[/size][/font][/color][/align][align=left][font=宋体][size=3][img]http://www.discuz.net/images/Beijing2008/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0612/3_1H9NaLjcmScK.jpg[/img] [/align][/size][/font]
[align=left][font=宋体][size=3][/size][/font][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3]在“鼠标形状”这里选择你喜欢的系统自带鼠标样式，如图4所示：[/size][/font][/color][/align][align=left][font=宋体][size=3][img]http://www.discuz.net/images/Beijing2008/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0612/4_YNmfJiryYHF4.jpg[/img] [/align][/size][/font]
[align=left][font=宋体][size=3][/size][/font][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3]我们选择第一行最后一个鼠标样式为例为大家做下演示，单击那个鼠标样式，在“可视化模板DIY页面”提交保存，如图5所示：[/size][/font][/color][/align][align=left][font=宋体][size=3][img]http://www.discuz.net/images/Beijing2008/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0612/5_hAb5JFjj8LcM.jpg[/img] [/align][/size][/font]
[align=left][font=宋体][size=3][/size][/font][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3]点击“保存”按钮后返回个人空间首页看看效果吧！如图6所示：[/size][/font][/color][/align][align=left][font=宋体][size=3][color=#333333][/color][/size][/font][/align][align=left][font=宋体][size=3][img]http://www.discuz.net/images/Beijing2008/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0612/6_5HmGSREjvczm.gif[/img] [/align][/size][/font]
[align=left][font=宋体][size=3][/size][/font][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3][/size][/font][/color][/align][size=3][/size]
[size=3][/size]
[align=left][color=#333333][font=宋体][size=3]自此，添加系统自带的鼠标样式的方法讲解完毕[/size][/font][/color][/align]

逍遥￡絕爱 发表于 2007-11-22 18:42

[b][color=blue]3.关于增加音乐盒后 音乐盒列表为空的集中解答[/color][/b]
[b][color=#0000ff][/color][/b]
1,音乐盒音乐必须为mp3格式音乐
2,音乐盒音乐地址必须以http://开始的完整地址
我们之后会针对这个情况在产品中增加个提示。

如果您的音乐盒添加之后出现空白，请对照检查。

逍遥￡絕爱 发表于 2007-11-22 18:42

[b][color=blue]4.[Xspace]模版修改,制作录.[/color][/b]
[b][color=#0000ff][/color][/b]
X-Space的模板,也就是CFAN的模板大概可以分为几个模块.(可以看图,直接明了.像这两个模板,可以分为四个模块)
引用:[indent]
1.头部-header
2.边栏-side
3.主体-mainarea
4.footer

2+3=Warp
1+2+3+4=body

[url=http://blog.cfan.com.cn/attachments/2007/07/217173_200707051105211.jpg][img]http://blog.cfan.com.cn/attachments/2007/07/217173_200707051105211.thumb.jpg[/img][/url] [url=http://blog.cfan.com.cn/attachments/2007/07/217173_200707051104571.jpg][img]http://blog.cfan.com.cn/attachments/2007/07/217173_200707051104571.thumb.jpg[/img][/url]

推荐点击看大图.

点击下载源码： [img]http://www.discuz.net/images/attachicons/zip.gif[/img] [url=http://www.discuz.net/attachment.php?aid=164159][b][color=#0000ff]apple.zip[/color][/b][/url] (1.81 KB) [img]http://www.discuz.net/images/attachicons/zip.gif[/img] [url=http://www.discuz.net/attachment.php?aid=164160][b][color=#0000ff]精灵.zip[/color][/b][/url] (1.66 KB)

了解了大概以后,现在我就说一下.我是怎样把精灵模板变成苹果树下的:

在精灵模板的基础上,我主要修改了:

精灵模板的头部图片(header)方案,字体颜色方案,容器(warp)背景图片,各个部分的位置.再就是细节修改.

而我们需要知道的.就是CSS怎样控制这几个模块的...位置.大小.颜色(字体,背景).背景图片.等

首先,我们来看一下精灵模板和苹果树下模板具体有哪些CSS模块!
---------------------------------------------------------------------------------------------------------------------------
[quote]
/********头部*********//*默认布局*//********边栏定义*********//********主体内容定义*********/

[color=blue]/*项目列表*//*信息正文中的模块*//*自定义字段*/[/color]
[color=blue]
[/color][color=red]/*出价记录*//*商品基本信息*/[/color]/*图片显示页面*/[color=red]/*文件显示页面*/[/color]/*信息正文中的模块*/

[color=blue]/*Tab选项卡*//* 分页 */[/color]
[color=blue]
[/color]/*日志列表*//*图片样式*//*页面底部定义*/[/indent]
---------------------------------------------------------------------------------------------------------------------------
标记为红色的模块,CFAN还没有开放.标记为蓝色的模块,对整体效果影响不大.所以都不说.喜欢或者需要的话也可以修改.
而其中主要的只有:
引用:[indent]/*头部 */
主要控制头部的图片.图片样式.字体.字体样式.背景.背景颜色.以及位置的限制性!

/*默认布局*/
主要控制wrap(容器)的布局.分为左边栏,右边栏,和主体的相对位置.

如图:

[url=http://blog.cfan.com.cn/batch.download.php?aid=117970][img]http://blog.cfan.com.cn/attachments/2007/07/217173_200707051123371.thumb.jpg[/img][/url]

/*边栏定义*/
定义侧边栏的样式:字体.背景.图片.颜色.大小.位置等..

/*主体内容定义*/
定义主体区域的样式:字体.背景.图片.颜色等..

/*页面底部定义*/
定义底部样式[/indent]
对照图片,再对照我学习CSS时候的精灵模板笔记,再对比我怎样修改.应该比较容易理解吧!

[color=red][b]~!important:有的地方我也不是太理解.或者会有错误.S0..请不要吝惜你的意见.我会不断完善这篇文章![/b][/color]
[color=red][b]
标记为红色的就是我不理解的地方.见谅.[/b][/color]

逍遥￡絕爱 发表于 2007-11-22 20:55

[b][color=#8b0000]/********整体*********/
[/color][/b]body -[b]主体[/b]
/[color=blue]背景颜色:黑色;字体(公告,正文,日历等这些未定义的字体)颜色:白色;[/color][color=gray]margin:设置对象四边的外延边距,如果只提供一个，将用于全部的四边。[/color]/
我把这里的背景颜色改为淡黄色,字体颜色改为黑色其他没变.
引用:[indent]{background:#000000;color:#FFFFFF;[color=red]font:75%/150% Arial,Helvetica,sans-serif[/color],"宋体";margin:0;padding:0;text-align:center}
{background:#F9FFD9;color:#000;font:75%/150% Arial,Helvetica,sans-serif,"宋体";margin:0;padding:0;text-align:center}[/indent]
注意-上面的CSS样式是精灵的,下面的是苹果的.下面相同.

a -[b]单个链接
[/b]/[color=blue]字体颜色:亮绿色;文字特效:无[/color]/
我把这里的字体颜色改为青蛙屎色(哈哈,原谅我这么形容,龙珠看多了);
引用:[indent]{color:#CCFF00;text-decoration:none}
{[color=darkgreen]color:#718F1D[/color];text-decoration:none}[/indent]
a:hover -[b]链接悬停
[/b]/[color=blue]字体颜色:橘黄色;文字特效:无[/color]/
我把这里的字体颜色改为亮绿色;
引用:[indent]{color:#FF6600;text-decoration:none}
{color[color=darkgreen]:#ccff00[/color];text-decoration:none}[/indent]
#wrap -[b]容器[/b]
/[color=blue]背景颜色:黑色;背景图片链接()-图像在纵向平铺-居中,置顶[/color];[color=gray]auto:值被设置为相对边的值;overflow:设置当对象的内容超过其指定高度及宽度时如何管理内容。hidden :不显示超过对象尺寸的内容;[/color][color=blue]字体对齐方式:居中;容器宽度:996像素（Pixel）[/color]/
我把背景颜色改为白色,修改了链接图片.
引用:[indent]{background:#000000 url([url=http://template.blogworld.com.cn/class14/template24/images/wrap.jpg][color=#0000ff]http://template.blogworld.com.cn/class14/template24/images/wrap.jpg[/color][/url]) repeat-y center top;margin:0 auto;overflow:hidden;text-align:center;width:996px}
{[color=darkgreen]background:#fff url([/color][url=http://blog.cfan.com.cn/attachments/2007/06/410206_200706301645321.jpg][color=darkgreen]http://blog.cfan.com.cn/attachments/2007/06/410206_200706301645321.jpg[/color][/url]) repeat-y center top;margin:0 auto;overflow:hidden;text-align:center;width:996px}[/indent]
[color=darkred][b]/********头部 *********/[/b][/color]

#header -[b]头部[/b]
/[color=blue]字体颜色:白色;头部图片高度:742px;头部图片链接()-背景图像不平铺-居中,置顶;[/color][color=red]相对四边距离:0-auto:值被设置为相对边的值;[/color][color=blue]字体对齐:左对齐;头部宽度:740px[/color];[color=red]padding值:第一个0 用于上－下，第二个100 px用于左－右。用于设置对象四边的补丁边距[/color]。/
我修改了头部图片以及对应的高度和宽度.以及图片的位置样式-横向拉伸.
引用:[indent]{color:#FFFFFF;height:743px;background:url([url=http://blog.cfan.com.cn/attachments/2007/06/410206_200706270924311.jpg][color=#0000ff]http://blog.cfan.com.cn/attachments/2007/06/410206_200706270924311.jpg[/color][/url]) no-repeat center top;margin:0 auto;overflow:hidden;text-align:left;width:740px;padding:0 100px}
{color:#FFFFFF;[color=darkgreen]height:223px[/color];background:url([url=http://blog.cfan.com.cn/attachments/2007/07/410206_200707010931581.jpg][color=darkgreen]http://blog.cfan.com.cn/attachments/2007/07/410206_200707010931581.jpg[/color][/url]) repeat-x center top;margin:0 auto;overflow:hidden;text-align:left;[color=darkgreen]width:994px[/color]}[/indent]
#spacename -[b]空间名称[/b]
/[color=blue]距离顶部(内):25px[/color]/
我修改了距离顶部的距离和距离左端的距离.
引用:[indent]{padding-top:25px;}
{margin-top:20px;margin-left:82px}[/indent]
#menu -[b]菜单[/b]
/[color=blue]距离顶部(外):443px;距离左边(外):145px[/color]/
引用:[indent]{margin-top:443px;margin-left: 145px;}
{margin-top:45px;margin-left: 640px;}[/indent]
#menu a -[b]单个菜单[/b]
/[color=blue]单个字体颜色:白色;字体大小:13px;文字特效:无[/color]/
引用:[indent]{color:#FFFFFF;font-size:13px;text-decoration:none}
{color:#FFFFFF;font-size:13px;}[/indent]

逍遥vs无聊 发表于 2007-11-23 18:38

[b][color=#8b0000]/*默认布局*/
[/color][/b]#content -[b]布局[/b]
/[color=red]相对四边距离:0-auto:0px 值被设置为相对边的值;[/color][color=blue]字体对齐:左对齐;容器宽度:900px[/color]/
我扩大了容器的宽度.修改为994px,因为我头部图片的宽度就是994px.
引用:[indent]{margin:0px auto 0px;text-align:left;width:900px}
{margin:0px auto 0px;text-align:left;[color=darkgreen]width:994px[/color]}[/indent]
/*Layout_1 -左侧导航*/  [color=magenta]注:.xpace为X-SPACE特有,非通用[/color][color=magenta]CSS.
[/color].xspace-layout1 #sideleft
/[color=blue]浮动:靠左;左导航宽度:190px;右边框:1px 颜色:亮绿色;/[/color]
我修改了左边栏的宽度以及位置.以对应我的容器背景.去掉了右边框.
引用:[indent]{float:left;width: 190px;border-right:1px solid #CCFF00;}
{float:left;[color=darkgreen]width: 200px[/color];[color=darkgreen]margin-left:22px[/color];}[/indent]
.xspace-layout1 .mainarea-side
左侧导航相对于整体容器所占百分比.我修改为23%,同样是为了对应容器背景.
引用:[indent]{ margin-left: 27%; }
{ [color=darkgreen]margin-left: 23%[/color]; }[/indent]
/*Layout_2 右侧导航*/ [color=magenta]注:这里的右侧导航需要设置布局才会显示出来.精灵和苹果都不属于这种布局.so..没改![/color]
[color=gray].xspace-layout2 #sideright
/浮动:靠右;右导航宽度:190px;左边框:1px 颜色:亮绿色;/没有修改!
{ float: right; width: 190px; border-left: 1px solid #CCFF00; }
.xspace-layout2 .mainarea-side
{ float: left;}[/color]
/*Layout_3 三列*/ [color=magenta]注:三列应该也属于需要设置的布局.[/color]
[color=magenta]
[/color][color=gray].xspace-layout3 #sideleft
/浮动:靠左;宽:188px 右边框:1px 颜色:亮绿色;/[/color]

[color=gray]{ float:left; width:188px;  border-right: 1px solid #CCFF00; }
{ float:left; width:188px;  border-right: 1px solid #CCFF00; }
.xspace-layout3 #sideright
/浮动:靠右;宽:188px;对象顶边的外延边距:10px; 左边框:1px 颜色:亮绿色/[/color]

[color=gray]{ float:right; width: 188px; margin-top:10px;  border-left: 1px solid #CCFF00;}
{ float:right; width: 188px; margin-top:10px;  border-left: 1px solid #CCFF00;}
.xspace-layout3 .mainarea-side
{
float: left;
width: 500px;
margin-right: 5px;
margin-left: 5px;
}
.xspace-layout3 .mainarea-side-single { margin-left: 23%; }
.xspace-layout3 #xspace-guide {}[/color]

[color=darkred][b]/********边栏定义*********/[/b][/color]
#sideleft/[color=blue]左边栏-字体对齐:左对齐[/color]/
{text-align:left;}
#sideright/[color=blue]右边栏-字体对齐:左对齐[/color]/
{text-align:left;}

#sideleft .xspace-sideblock
/[color=blue]侧边栏区框-距离右侧:5px;[/color] [color=gray]!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权[/color] /
{padding-right:5px!important;}

#sideleft .xspace-list,#sideleft #xspace-calendar
/[color=blue]左侧列表,日历-宽度:160px;[/color][color=gray]overflow:设置当对象的内容超过其指定高度及宽度时如何管理内容。hidden :不显示超过对象尺寸的内容;/我修改了左侧列表的宽度.以适应背景需要.这里的!important说明左侧列表和日历宽度以这个为准./
[/color]
引用:[indent]{width:160px!important;overflow:hidden}
{[color=darkgreen]width:180px[/color]!important;overflow:hidden}[/indent]
.xspace-layout1 [color=red]#avatar[/color]
{ padding-top:35px;}
.xspace-layout3 [color=red]#avatar
[/color]{ padding-top:35px;}
.xspace-layout2 [color=red]#avatar[/color]
{ background:none;padding-top:35px;}

.xspace-sideblock .xspace-blocktitle -[color=black][b]侧边栏边框,侧边栏标题[/b][/color]
/[color=blue]背景图片链接()-背景图象不平铺 靠左 置顶;距离左侧:79px;距离顶部:4px;字体颜色:亮绿色;字体大小:14px;高度;38px[/color];/
我修改了图片和其拉伸方式.
引用:[indent]{background: url([img]http://template.blogworld.com.cn/class14/template24/images/title.jpg[/img]) no-repeat left top;padding-left:79px!important;padding-top:4px;color:#CCFF00;font-size:14px;height: 38px;}
{background: url([img]http://blog.cfan.com.cn/attachments/2007/06/410206_200706301806161.gif[/img]) no-repeat bottom;color:#718F1D;text-align:center;font-size:14px;height: 24px;}[/indent]

mmoaion 发表于 2008-1-24 18:54

[b][color=#8b0000]/********主体内容定义*********/
[/color][/b]#mainarea .xspace-blocktitle
/[color=blue]大标题-字体颜色:亮蓝色;字体大小:14px;距离左侧:6px;距离顶部:16px[/color];/
我修改了字体颜色.背景图片.以及相应参数. 引用:[indent]{color:#FFF;font-size:14px;padding-left:6px!important;padding-top:16px;}
{
      [color=darkgreen]color:#718F1D;
[/color]      font-size:14px;
      padding-left:22px!important;
      padding-top:1px;
background: #F9FFD9 url([img]http://www.morelove.cn/images/dream/mainarea_title_bg.jpg[/img]) no-repeat;
height: 29px;
line-height: 29px;
}[/indent]
#mainarea .xspace-title
/[color=blue]日志显示页面标题-字体颜色:亮绿色;字体大小:14px;距离左侧:6px;距离顶部:5px;背景颜色:灰色[/color];/
我修改了字体颜色.背景.和边框. 引用:[indent]{
color:#CCFF00;
font-size:14px;
padding-left:6px!important;
padding-top:5px;
background: #999999;
}
{
[color=darkgreen]color:#718F1D;[/color]
font-size:14px;
padding-left:6px!important;
padding-top:5px;
[color=darkgreen]background: #F9FFD9;
border: 1px solid #CAFBCF; [/color][color=blue]/边框-1px 实线 边框颜色/
[/color]}[/indent]
#mainarea .xspace-entrytitle
/[color=blue]小标题(日志)-颜色:亮绿色;字体大小:13px[/color];/
{color:#CCFF00;font-size:13px}

#announcement,#show/[color=blue]公告栏,正文-距离顶部(外):20px[/color]/
{margin-top:20px}
我把这儿拆开了分别修改.如下.

[color=darkgreen]引用:[indent][/color]
[color=darkgreen][color=darkgreen]#announcement{
     border: 1px solid #CAFBCF;
     text-align:center;
     background: #F2FFF3;
     color: #547E00;}
#show{
     border: 1px solid #CAFBCF;
     background: #F2FFF3;
     color: #547E00;}[/color][/indent]
[/color]

[color=#535353].[/color][color=red]xspace-smalltxt[/color][color=#535353]/小文本?-字体颜色:蓝色/
{color:#FFF}

[/color][color=gray]/*项目列表*/
.xspace-itemlist
{margin:0;}
.xspace-itemlist li /单一项目-底部边框:1px-实线 颜色:深蓝色/
{ border-bottom: 1px solid #999!important; }[/color]

[color=#535353]/*图片显示页面*/

.xspace-imagebox/图片盒子/
{ border: 1px solid #999 }
.xspace-multipage /[/color][color=gray]clear-该属性的值指出了不允许有浮动对象的边。both-不允许有浮动对象[/color][color=#535353]/
{margin-top:6px; clear:both;}
#xspace-imgnavbar
{  border-bottom: 1px solid #999  }

/*日志列表*/
li.xspace-loglist h4.xspace-entrytitle
/[/color][color=blue]背景颜色:黑色;底部边框:1px 实线;颜色:;line-height-设置对象的行高。即字体最底端与字体内部顶端之间的距离。距离(内)左侧:0.2em;[/color][color=#535353] /
我修改了颜色方案.

{background-color: #000;border: 1px solid #042828; line-height: 2em; padding-left: 0.2em;}

/*图片样式*/
我修改了颜色方案和图片样式底部图片.(嘿嘿.是不是有点拗口?)
.xspace-imgstyle
{ background: #042828; border: 1px solid #CCFF00; padding: 4px; }
  
/********页面底部定义*********/底部就留给你慢慢研究了.相信你看了上面的内容应该能理解了.我就懒得写了!
#xspace-footer [/color]引用:[indent]
{background:url([img]http://blog.cfan.com.cn/attachments/2007/06/410206_200706270752041.jpg[/img]) no-repeat left top;color:#CCFF00;height:160px;margin:0px auto;padding-top:80px;text-align:center;width:996px}[/indent]


THE  END

路伽 发表于 2008-5-7 17:30

:face024 楼上几位都很牛啊，不知道我能不能回帖。。。

页: [1]

Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.