2008/01/15 | 5D模版制作傻瓜版--sasha
类别(杂七杂八) | 评论(0) | 阅读(38) | 发表于 16:48

转贴自sasha的蜜糖日记:http://blog.5d.cn/user18/Val/Category/74304_1.html

放在在里,因为我对html和css也是完全不懂的,比较适合看sasha的傻瓜教程,西西

设置模版底色:

body {font-size:12px;font-family:"Verdana",
"Arial","Tahoma";background:url(http://photo7.yupoo.com); color:#8c9092;}

这段代码设置底色图片,background:url是使用连接的图片,红色是可以自定义图片的地址,如果只需要使用单一的颜色而不是图片,可以直接使用background:#ffffff,蓝色是自定义颜色代码, 绿色是自定义整体版面字体的颜色。颜色代码可参考:Web网页安全色谱

设置主体字体:

a:link {text-decoration:none;color:#86d1d1;}                    这个是分类栏普通状态下显示的颜色
a:visited {text-decoration:none;color:#86d1d1;}                这个是分类栏普通状态下显示的颜色
a:hover {background-color:none;color: #ffffff;}                 这个是鼠标移动到字体上时显示的颜色
a:active {text-decoration:none;color:#ffcc99;}                   这个是鼠标点击下去时显示的颜色

设置主体头部:

#head {background:url(http://photo7.yupoo.com) no-repeat;height:330px;width:800px;}

红色是可以自定义图片的地址,其实只要有background:url都是可以自定义图片的(当然有些没有的也可以自己添加上去)。绿色是设置图片的高度蓝色是设置图片的宽度,px代表的是象素,数字可以自己调试。

blog名称和作者名,如果想要不显示,只要添加这段代码:#head h1, #head p {display:none;}

红色代表不显示这个2个部分,其实任何不想显示的地方只要在后面加上display:none;就可以了。

设置主体中间部分:

#wrapper {background:url(http://photo7.yupoo.com);width:800px;margin-left:auto; margin-right:auto;}

红色是自定义图片部分绿色是自定义宽度,这里使用希儿的方法很不错,将图片裁减成1px,会使显示快多了,蓝色代表的是自动居中

#main {margin:0px 8px 0px 8px;}
#inner {float:left;width:100%;}
#shead {display:none;}
#content {margin:0 0 0 220px;}

这几个部分通常是不会怎么改动的,所以我也不阐述了。具体请教高手吧~~~(是不是有点不负责任- -)

设置主体底部:

#footer {clear:both;background:url(http://photo7.yupoo.com);no-repeat top;height:56px;padding:10px 0 0 0;}

红色是自定义图片地址绿色是自定义高度。如果你不打算有底部的话,请无视这段...

设置分类栏:

#menu {position:absolute;width:734px;top:310px;background:none;}

红色是绝对定位绿色是宽度蓝色是从顶部开始设置到距离它310px的位置,具体数字可以自己调试。

#menu a:link {text-decoration:none;color:#86d1d1;}               这个是分类栏普通状态下显示的颜色
#menu a:visited {text-decoration:none;color:#86d1d1;}           这个是分类栏普通状态下显示的颜色
#menu a:hover {background-color:none;color: #ffffff;}            这个是鼠标移动到字体上时显示的颜色
#menu a:active {text-decoration:none;color:#ffcc99;}               这个是鼠标点击下去时显示的颜色

#menu h3,  #menu li span{display:none;}
#menu ul {padding:0;margin:5px;}
#menu li {list-style:none;float:left;margin:0 18px 0 18px;}        这个是调整分类栏之间的距离,前面2个不太清楚,通常我不改动的。(再次不负责任...- -)

设置边栏:

说到边栏,我是真的很晕很晕,因为实在到现在还是搞不清楚很多设置问题,我的第一个模版就是被边栏搞的头昏眼花。因为边栏的组成问题不是像我们这种低手能搞定的...如果是新手的话,学我一样,能简化就简化吧-______-

#sidebar {float:left;width:188px;margin:13px 0 0 7px;background:none;}

红色是边栏位置,现在是靠左。绿色是边栏的宽度蓝色是边栏与页面边之间的距离

#sidebar h3 {margin:0;cursor:pointer;no-repeat right;font-size:12px;height:23px;background:#86d1d1;padding:0 0 0 13px;color:#ffffff;}

这个是设置边栏的头部,红色是设置边栏头部的颜色代码,也可以自定义图片,紫色是设置边栏头部字体的颜色绿色是设置高度蓝色是设置边栏头部字体到边部的距离

设置日志:

.normallog h4 {background:#e7e6e6;no-repeat;padding:5px 5px 5px 5px;margin:13px 5px 18px 0px;font-size:11px;font-weight:normal;color:#cccc33

红色是设置日志标题的背景的颜色,可以自定义图片。绿色是设置日志标题背景色块的大小,具体设置可以自己调试^-^。蓝色是设置日志标题后面时间的颜色

.normallog h6 {padding:0px 10px 0px 0px;font-size:10px;font-weight:normal;text-align:right;}

红色是定义回复、引用、评论的字体大小。这个通常我都定义是10px,也可以自己定义。

还有这个部分的计数显示是斜体的,只要添加如下代码

.em {font-style:normal;}

设置回复评论:

#commentshead {background:url(http://photo7.yupoo.com) no-repeat;}

红色设置3只小鸡的图片。  

.acomment h4 {background:url(http://photo7.yupoo.com) no-repeat;}

红色是设置评论1只小鸡的图片。(关于这个,我发现评论刷新的时候还是会出现的,比较喜欢完整性的朋友还是可以修改的,像我的还是一朵黑色的玫瑰^0^)      

还有部分自定义设置:

如果想页面全部显示英文,可添加如下代码.cn {display:none;}       

 如果想显示中文,添加代码.en {display:none;}

如果不想显示rss图标,可添加.rss,.rss_c{display:none;}

在特定的地方加上Flash:

在模版下面点击JS代码添加如下语句

window.onload=function(){
var n=document.getElementById('head');
var tt="<EMBED src=Flash地址 width=800 height=310 type=application/x-shockwave-flash wmode=\"transparent\">"
n.innerHTML=tt}

红色是要添加Flash的位置,其实通常比较多都是加在头部,所以我也直接写上head了...绿色是Flash的地址蓝色是设定Flash的宽度和高度

在Blog插入音乐:

棉花糖的代码生成器生成代码,生成播放代码。选取一个已经激活的边栏,点击代码一项,按Ctrl+V粘贴代码进去,再点击代码,之后确定。如果想隐藏播放器,只要把宽度和高度全部改为0就可以了。

以上是5D模版构成的主要部分

0

评论Comments