[Xspace]模版修改,制作录.

kdan.模板制作录

---题外话---

很久没弄模板了,再次接触网络后发现Cfan的X-SPACE程序竟然升级了.很高兴.毕竟升级会解决许多的BUG和增加更多的实用功能.可是没过多久,就高兴不起来了.我在禁网前做过4个模板吧,都不能使用了.嘿嘿..真的很无奈!其实我也知道.我当时做的模板真的很差.对CSS连一知半解都算不上.瞎硬给套上去.也竟然给做成了几个模板.所以,不能用,也不是很冤.
决定重新学习下CSS.再做几个模板玩玩.呵呵..

---正文---

学习中,看到部落窝的模板做的很不错,去那里看了看,突然来了感觉.发现模板制作和修改真的不难.甚至可以说很简单.因为终归所有,也......
只不过是一个头部图片.和头部图片配套的容器背景和字体颜色方案.

所以,认真看教程学习的话,相信一天的时间就可以明白一个大概.

这篇文章以部落窝的精灵模板和我做的苹果树下为例,为大家说下我的看法和想法!
X-Space的模板,也就是CFAN的模板大概可以分为几个模块.(可以看图,直接明了.像这两个模板,可以分为四个模块)

1.头部-header
2.边栏-side
3.主体-mainarea
4.footer

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



推荐点击看大图.

点击下载源码： apple.zip (1.81 KB, 下载次数: 1938)

2007-7-9 22:33 上传

点击文件名下载附件

精灵.zip (1.66 KB, 下载次数: 1871)

2007-7-9 22:33 上传

点击文件名下载附件

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

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

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

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

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

/*项目列表*//*信息正文中的模块*//*自定义字段*/

/*出价记录*//*商品基本信息*//*图片显示页面*//*文件显示页面*//*信息正文中的模块*/

/*Tab选项卡*//* 分页 */

/*日志列表*//*图片样式*//*页面底部定义*/

---------------------------------------------------------------------------------------------------------------------------
标记为红色的模块,CFAN还没有开放.标记为蓝色的模块,对整体效果影响不大.所以都不说.喜欢或者需要的话也可以修改.
而其中主要的只有:

/*头部 */
主要控制头部的图片.图片样式.字体.字体样式.背景.背景颜色.以及位置的限制性!

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

如图:



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

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

/*页面底部定义*/
定义底部样式

对照图片,再对照我学习CSS时候的精灵模板笔记,再对比我怎样修改.应该比较容易理解吧!

~!important:有的地方我也不是太理解.或者会有错误.S0..请不要吝惜你的意见.我会不断完善这篇文章!

标记为红色的就是我不理解的地方.见谅.



[ 本帖最后由 kdan 于 2007-7-21 16:39 编辑 ]

/********整体*********/
body -主体
/背景颜色:黑色;字体(公告,正文,日历等这些未定义的字体)颜色:白色;margin:设置对象四边的外延边距,如果只提供一个，将用于全部的四边。/
我把这里的背景颜色改为淡黄色,字体颜色改为黑色其他没变.

{background:#000000;color:#FFFFFF;font:75%/150% Arial,Helvetica,sans-serif,"宋体";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}

注意-上面的CSS样式是精灵的,下面的是苹果的.下面相同.

a -单个链接
/字体颜色:亮绿色;文字特效:无/
我把这里的字体颜色改为青蛙屎色(哈哈,原谅我这么形容,龙珠看多了);

{color:#CCFF00;text-decoration:none}
{color:#718F1D;text-decoration:none}

a:hover -链接悬停
/字体颜色:橘黄色;文字特效:无/
我把这里的字体颜色改为亮绿色;

{color:#FF6600;text-decoration:none}
{color:#ccff00;text-decoration:none}

#wrap -容器
/背景颜色:黑色;背景图片链接()-图像在纵向平铺-居中,置顶;auto:值被设置为相对边的值;overflow:设置当对象的内容超过其指定高度及宽度时如何管理内容。hidden :不显示超过对象尺寸的内容;字体对齐方式:居中;容器宽度:996像素（Pixel）/
我把背景颜色改为白色,修改了链接图片.

{background:#000000 url(http://template.blogworld.com.cn/class14/template24/images/wrap.jpg) repeat-y center top;margin:0 auto;overflow:hidden;text-align:center;width:996px}
{background:#fff url(http://blog.cfan.com.cn/attachments/2007/06/410206_200706301645321.jpg) repeat-y center top;margin:0 auto;overflow:hidden;text-align:center;width:996px}

/********头部 *********/

#header -头部
/字体颜色:白色;头部图片高度:742px;头部图片链接()-背景图像不平铺-居中,置顶;相对四边距离:0-auto:值被设置为相对边的值;字体对齐:左对齐;头部宽度:740px;padding值:第一个0 用于上－下，第二个100 px用于左－右。用于设置对象四边的补丁边距。/
我修改了头部图片以及对应的高度和宽度.以及图片的位置样式-横向拉伸.

{color:#FFFFFF;height:743px;background:url(http://blog.cfan.com.cn/attachments/2007/06/410206_200706270924311.jpg) no-repeat center top;margin:0 auto;overflow:hidden;text-align:left;width:740px;padding:0 100px}
{color:#FFFFFF;height:223px;background:url(http://blog.cfan.com.cn/attachments/2007/07/410206_200707010931581.jpg) repeat-x center top;margin:0 auto;overflow:hidden;text-align:left;width:994px}

#spacename -空间名称
/距离顶部(内):25px/
我修改了距离顶部的距离和距离左端的距离.

{padding-top:25px;}
{margin-top:20px;margin-left:82px}

#menu -菜单
/距离顶部(外):443px;距离左边(外):145px/

{margin-top:443px;margin-left: 145px;}
{margin-top:45px;margin-left: 640px;}

#menu a -单个菜单
/单个字体颜色:白色;字体大小:13px;文字特效:无/

{color:#FFFFFF;font-size:13px;text-decoration:none}
{color:#FFFFFF;font-size:13px;}

/*默认布局*/
#content -布局
/相对四边距离:0-auto:0px 值被设置为相对边的值;字体对齐:左对齐;容器宽度:900px/
我扩大了容器的宽度.修改为994px,因为我头部图片的宽度就是994px.

{margin:0px auto 0px;text-align:left;width:900px}
{margin:0px auto 0px;text-align:left;width:994px}

/*Layout_1 -左侧导航*/  注:.xpace为X-SPACE特有,非通用CSS.
.xspace-layout1 #sideleft
/浮动:靠左;左导航宽度:190px;右边框:1px 颜色:亮绿色;/
我修改了左边栏的宽度以及位置.以对应我的容器背景.去掉了右边框.

{float:left;width: 190px;border-right:1px solid #CCFF00;}
{float:left;width: 200px;margin-left:22px;}

.xspace-layout1 .mainarea-side
左侧导航相对于整体容器所占百分比.我修改为23%,同样是为了对应容器背景.

{ margin-left: 27%; }
{ margin-left: 23%; }

/*Layout_2 右侧导航*/ 注:这里的右侧导航需要设置布局才会显示出来.精灵和苹果都不属于这种布局.so..没改!
.xspace-layout2 #sideright
/浮动:靠右;右导航宽度:190px;左边框:1px 颜色:亮绿色;/没有修改!
{ float: right; width: 190px; border-left: 1px solid #CCFF00; }
.xspace-layout2 .mainarea-side
{ float: left;}
/*Layout_3 三列*/ 注:三列应该也属于需要设置的布局.

.xspace-layout3 #sideleft
/浮动:靠左;宽:188px 右边框:1px 颜色:亮绿色;/

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

{ 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 {}

/********边栏定义*********/
#sideleft/左边栏-字体对齐:左对齐/
{text-align:left;}
#sideright/右边栏-字体对齐:左对齐/
{text-align:left;}

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

#sideleft .xspace-list,#sideleft #xspace-calendar
/左侧列表,日历-宽度:160px;overflow:设置当对象的内容超过其指定高度及宽度时如何管理内容。hidden :不显示超过对象尺寸的内容;/我修改了左侧列表的宽度.以适应背景需要.这里的!important说明左侧列表和日历宽度以这个为准./

{width:160px!important;overflow:hidden}
{width:180px!important;overflow:hidden}

.xspace-layout1 #avatar
{ padding-top:35px;}
.xspace-layout3 #avatar
{ padding-top:35px;}
.xspace-layout2 #avatar
{ background:none;padding-top:35px;}

.xspace-sideblock .xspace-blocktitle -侧边栏边框,侧边栏标题
/背景图片链接()-背景图象不平铺 靠左 置顶;距离左侧:79px;距离顶部:4px;字体颜色:亮绿色;字体大小:14px;高度;38px;/
我修改了图片和其拉伸方式.

{background: url() no-repeat left top;padding-left:79px!important;padding-top:4px;color:#CCFF00;font-size:14px;height: 38px;}
{background: url() no-repeat bottom;color:#718F1D;text-align:center;font-size:14px;height: 24px;}

/********主体内容定义*********/
#mainarea .xspace-blocktitle
/大标题-字体颜色:亮蓝色;字体大小:14px;距离左侧:6px;距离顶部:16px;/
我修改了字体颜色.背景图片.以及相应参数.

{color:#FFF;font-size:14px;padding-left:6px!important;padding-top:16px;}
{
      color:#718F1D;
      font-size:14px;
      padding-left:22px!important;
      padding-top:1px;
background: #F9FFD9 url() no-repeat;
height: 29px;
line-height: 29px;
}

#mainarea .xspace-title
/日志显示页面标题-字体颜色:亮绿色;字体大小:14px;距离左侧:6px;距离顶部:5px;背景颜色:灰色;/
我修改了字体颜色.背景.和边框.

{
color:#CCFF00;
font-size:14px;
padding-left:6px!important;
padding-top:5px;
background: #999999;
}
{
color:#718F1D;
font-size:14px;
padding-left:6px!important;
padding-top:5px;
background: #F9FFD9;
border: 1px solid #CAFBCF; /边框-1px 实线 边框颜色/
}

#mainarea .xspace-entrytitle
/小标题(日志)-颜色:亮绿色;字体大小:13px;/
{color:#CCFF00;font-size:13px}

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

#announcement{
     border: 1px solid #CAFBCF;
     text-align:center;
     background: #F2FFF3;
     color: #547E00;}
#show{
     border: 1px solid #CAFBCF;
     background: #F2FFF3;
     color: #547E00;}

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

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

/*图片显示页面*/

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

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

{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

{background:url() no-repeat left top;color:#CCFF00;height:160px;margin:0px auto;padding-top:80px;text-align:center;width:996px}

我很很辛苦的写了这么多.为啥没人看呢.

好东西，顶起！

:) :) 不错

真的很好
学习~

支持下，呵呵，支持下，呵呵，支持下，呵呵，支持下，呵呵，

支持楼主，把帖子顶上去