|
|
|
| |
| 制作模板 |
| 作者：原声五月话 发表时间：2006-8-6 |
|
我是完全不懂html和css的，刚来的时候也是看着教程，再慢慢的调试才做出来的。5D有很多很好的教程，不过部分教程可能过于长，使人没耐心看下去（我也是其中一个- -）所以这里我也就简化的说一下主要的部分（也不知道到底简化了没...）基本就是替换一些地址和颜色代码就可以了- -
设置模版底色：
body {font-size:12px;font-family:"Verdana",
"Arial","Tahoma";background:url(http://photo7.yupoo.com); color:#8c9092;}
这段代码设置底色图片，background:url是使用连接的图片，红色是可以自定义图片的地址，如果只需要使用单一的颜色而不是图片，可以直接使用background:#ffffff,蓝色是自定义颜色代码, 绿色是自定义整体版面字体的颜色。颜色代码可参考:http://www.ezhy.com/zhiyong/color.htm
设置主体字体：
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个不太清楚，通常我不改动的。（再次不负责任...- -）
设置边栏：
说到边栏，我是真的很晕很晕，因为实在到现在还是搞不清楚很多设置问题，我的第一个模版就是被边栏搞的头昏眼花。如果是新手的话，学我一样，能简化就简化吧- -lll
#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只小鸡的图片。
.acomment div .authorcomment{background: url(http://photo7.yupoo.com) no-repeat left top;}
红色是设置作者回复的图片。
设置列表和普通的位置：
.z_normal {position:absolute;top:275px;margin:0 0 0 488px;}
.z_list {position:absolute;top:250px;margin:0 0 0 488px;}
红色是绝对定位，绿色是定义从顶部开始到list或者normal图标所在位置的距离，其实也就是调整上下的距离。蓝色是list或者normal调整左右的位置。这个很多人都想知道，但是却没有教程里有说明，开始我自己也是试了半天，所以这里我就说明一下啦~~~
还有部分自定义设置：
如果想页面全部显示英文，可添加如下代码.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就可以了。
|
|
| [所属栏目：尽收眼底] | [返回首页] |
| | | |
| |
|
|
|
|
|
|
|
| |
|
