---题外话---
很久没弄模板了,再次接触网络后发现Cfan的X-SPACE程序竟然升级了.很高兴.毕竟升级会解决许多的BUG和增加更多的实用功能.可是没过多久,就高兴不起来了.我在禁网前做过4个模板吧,都不能使用了.嘿嘿..真的很无奈!其实我也知道.我当时做的模板真的很差.对CSS连一知半解都算不上.瞎硬给套上去.也竟然给做成了几个模板.所以,不能用,也不是很冤.
决定重新学习下CSS.再做几个模板玩玩.呵呵..
---正文---
学习中,看到部落窝的模板做的很不错,去那里看了看,突然来了感觉.发现模板制作和修改真的不难.甚至可以说很简单.因为终归所有,也......
只不过是一个头部图片.和头部图片配套的容器背景和字体颜色方案.
所以,认真看教程学习的话,相信一天的时间就可以明白一个大概.
这篇文章以部落窝的精灵模板和我做的苹果树下为例,为大家说下我的看法和想法!
X-Space的模板,也就是CFAN的模板大概可以分为几个模块.(可以看图,直接明了.像这两个模板,可以分为四个模块)
QUOTE:
---------------------------------------------------------------------------------------------------------------------------
1.头部-header
2.边栏-side
3.主体-mainarea
4.footer
2+3=Warp
1+2+3+4=body
推荐点击看大图.
点击下载源码：
apple.zip
(2007-07-09 22:33:56, Size: 1.81 KB, Downloads: 709)
(2007-07-09 22:33:56, Size: 1.66 KB, Downloads: 666)
了解了大概以后,现在我就说一下.我是怎样把精灵模板变成苹果树下的:
在精灵模板的基础上,我主要修改了:
精灵模板的头部图片(header)方案,字体颜色方案,容器(warp)背景图片,各个部分的位置.再就是细节修改.
而我们需要知道的.就是CSS怎样控制这几个模块的...位置.大小.颜色(字体,背景).背景图片.等
首先,我们来看一下精灵模板和苹果树下模板具体有哪些CSS模块!
---------------------------------------------------------------------------------------------------------------------------
[quote]
/********头部*********//*默认布局*//********边栏定义*********//********主体内容定义*********/
/*项目列表*//*信息正文中的模块*//*自定义字段*/
/*出价记录*//*商品基本信息*//*图片显示页面*//*文件显示页面*//*信息正文中的模块*/
/*Tab选项卡*//* 分页 */
/*日志列表*//*图片样式*//*页面底部定义*/
标记为红色的模块,CFAN还没有开放.标记为蓝色的模块,对整体效果影响不大.所以都不说.喜欢或者需要的话也可以修改.
而其中主要的只有:
QUOTE:
/*头部 */对照图片,再对照我学习CSS时候的精灵模板笔记,再对比我怎样修改.应该比较容易理解吧!
主要控制头部的图片.图片样式.字体.字体样式.背景.背景颜色.以及位置的限制性!
/*默认布局*/
主要控制wrap(容器)的布局.分为左边栏,右边栏,和主体的相对位置.
如图:
/*边栏定义*/
定义侧边栏的样式:字体.背景.图片.颜色.大小.位置等..
/*主体内容定义*/
定义主体区域的样式:字体.背景.图片.颜色等..
/*页面底部定义*/
定义底部样式
~!important:有的地方我也不是太理解.或者会有错误.S0..请不要吝惜你的意见.我会不断完善这篇文章!
标记为红色的就是我不理解的地方.见谅.
[ 本帖最后由 kdan 于 2007-7-21 16:39 编辑 ]
最新回复
body -主体
/背景颜色:黑色;字体(公告,正文,日历等这些未定义的字体)颜色:白色;margin:设置对象四边的外延边距,如果只提供一个，将用于全部的四边。/
我把这里的背景颜色改为淡黄色,字体颜色改为黑色其他没变.
QUOTE:
注意-上面的CSS样式是精灵的,下面的是苹果的.下面相同.a -单个链接
/字体颜色:亮绿色;文字特效:无/
我把这里的字体颜色改为青蛙屎色(哈哈,原谅我这么形容,龙珠看多了);
QUOTE:
a:hover -链接悬停/字体颜色:橘黄色;文字特效:无/
我把这里的字体颜色改为亮绿色;
QUOTE:
#wrap -容器/背景颜色:黑色;背景图片链接()-图像在纵向平铺-居中,置顶;auto:值被设置为相对边的值;overflow:设置当对象的内容超过其指定高度及宽度时如何管理内容。hidden :不显示超过对象尺寸的内容;字体对齐方式:居中;容器宽度:996像素（Pixel）/
我把背景颜色改为白色,修改了链接图片.
QUOTE:
/********头部 *********/#header -头部
/字体颜色:白色;头部图片高度:742px;头部图片链接()-背景图像不平铺-居中,置顶;相对四边距离:0-auto:值被设置为相对边的值;字体对齐:左对齐;头部宽度:740px;padding值:第一个0 用于上－下，第二个100 px用于左－右。用于设置对象四边的补丁边距。/
我修改了头部图片以及对应的高度和宽度.以及图片的位置样式-横向拉伸.
QUOTE:
#spacename -空间名称/距离顶部(内):25px/
我修改了距离顶部的距离和距离左端的距离.
QUOTE:
#menu -菜单/距离顶部(外):443px;距离左边(外):145px/
QUOTE:
#menu a -单个菜单/单个字体颜色:白色;字体大小:13px;文字特效:无/
QUOTE:
#content -布局
/相对四边距离:0-auto:0px 值被设置为相对边的值;字体对齐:左对齐;容器宽度:900px/
我扩大了容器的宽度.修改为994px,因为我头部图片的宽度就是994px.
QUOTE:
/*Layout_1 -左侧导航*/ 注:.xpace为X-SPACE特有,非通用CSS..xspace-layout1 #sideleft
/浮动:靠左;左导航宽度:190px;右边框:1px 颜色:亮绿色;/
我修改了左边栏的宽度以及位置.以对应我的容器背景.去掉了右边框.
QUOTE:
.xspace-layout1 .mainarea-side左侧导航相对于整体容器所占百分比.我修改为23%,同样是为了对应容器背景.
QUOTE:
/*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说明左侧列表和日历宽度以这个为准./
QUOTE:
.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;/
我修改了图片和其拉伸方式.
QUOTE:
#mainarea .xspace-blocktitle
/大标题-字体颜色:亮蓝色;字体大小:14px;距离左侧:6px;距离顶部:16px;/
我修改了字体颜色.背景图片.以及相应参数.
QUOTE:
#mainarea .xspace-title/日志显示页面标题-字体颜色:亮绿色;字体大小:14px;距离左侧:6px;距离顶部:5px;背景颜色:灰色;/
我修改了字体颜色.背景.和边框.
QUOTE:
#mainarea .xspace-entrytitle/小标题(日志)-颜色:亮绿色;字体大小:13px;/
{color:#CCFF00;font-size:13px}
#announcement,#show/公告栏,正文-距离顶部(外):20px/
{margin-top:20px}
我把这儿拆开了分别修改.如下.
QUOTE:
#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
QUOTE:
学习~
QUOTE:
好
我帮你转贴!
好东西！支持！！