作出解释的都是主页的相关代码，其他页面的没有测试。希望能给刚接触空间的朋友一些帮助^_^
关于其他空间中原来没有的美化代码请参见我的其他日志：
http://hi.baidu.com/tblc
打开CSS表：
在空间页面上依次点击：设置——高级设置——自定义css
代码解释：
1、关于文字或背景的颜色的16进制代码形式如：#530C0E
可以到如下网页直观查看颜色代码：
http://shirley329.blogchina.com/3501281.html
也可以用颜色的相应英文单词替换，如：Black Fuchsia Gray Gree Lime Maroon Navy Olive Purple
Red Silver Teal White Yellow Blue Aqua
2、相关元素“位置”为“center,left,right”，可直接相互替换；
3、文字等元素的大小格式为“13px”数字越大字号或元素就越大，反之则越小；
4、图片地址可直接用可以引用的地址替换，建议将图片传到空间相册后再引用。
5、代码详细注释：
body{background-color:#530C0E}
——背景颜色
#header{height:89pxbackground:url() no-repeat}
#header div.rc{background:url() repeat-x}
——页面上方“主页博客|相册……”栏背景图片
#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:3pxline-height:19pxbackground-
color:#BC0304color:#FFFFFFfont-size:14px}
——页面上方“主页”栏大小颜色＋背景
#tab span{color:#FFFFFFfont-size:14px}
#tab a:link{color:#FFFFFFtext-decoration:nonefont-size:14px}
——页面上方“博客|相册……”栏链接颜色，未被点击
#tab a:visited{color:#FFFFFFtext-decoration:nonefont-size:14px}
——页面上方“博客|相册……”栏链接颜色，已被点击
#tab2{background:#DAE9F5}
#tab2 span{color:#000000font-size:12pxfont-weight:bold}
#tab2 a{font-size:12px}
#tab2 a:link{color:#0000CC}
#tab2 a:visited{color:#0000CC}
.stage{background:url() no-repeat top leftline-
height:1px}
——每个栏目右上角远郊边沿图片
.modbl{background-color:#FFF6E7border-left:1px solid #FFF6E7border-bottom:1px solid
#FFF6E7line-height:1px}
——每个栏目左下角点的设置
.modbc{background-color:#FFF6E7border-bottom:1px solid #FFF6E7line-height:1px}
——每个栏目最下端一条的设置
.modbr{background-color:#FFF6E7border-right:1px solid #FFF6E7border-bottom:1px solid
#FFF6E7line-height:1px}
——每个栏目右下角点的设置
#m_blog div.tit{font-size:14pxfont-weight:bold}
#m_blog div.tit a{color:#000000font-size:14pxfont-weight:bold}
——日志标题大小颜色，未被点击
#m_blog div.tit a:visited{color:#000000}
——日志标题大小颜色，已被点击
#m_blog div.date{margin:5px 0 8px 0color:#666666}
——日志日期文字大小颜色
#m_blog div.cnt{color:#000000line-height:20pxfont-size:14px}
——日志内容大小颜色
#m_blog div.more{margin:14px 0 16px 0}
#m_blog div.more a{color:#D77B18font-size:14px}
——日志“阅读全文>>”的大小颜色，未被点击
#m_blog div.more a:visited{color:#D77B18}
——日志“阅读全文>>”的大小颜色，已被点击
#m_blog div.opt{color:#666666font-size:12px}
——“类别：技术专区 | 编辑……”中的“|”的颜色大小
#m_blog div.opt a{color:#D77B18font-size:12px}
——“类别：技术专区”的大小颜色
#m_blog div.opt a:visited{color:#D77B18}
——“编辑 删除 评论(4) 浏览(21)”的大小颜色
#m_blog div.line{margin-top:17pxline-height:17pxborder-top:1px solid #F4C1B5}
——日之间的分割线的相关设置
#m_blog div.none{padding:100px 0 100px 0color:#000000font-size:14px}
——隐形设置，不需要改变
#m_pro a{color:#D77B18}
——个人档案中“查看详细信息”的颜色，未被点击
#m_pro a:visited{color:#D77B18}
——个人档案中“查看详细信息”的颜色，已被点击
#m_pro div.image{text-align:center}
——个人档案中照片的显示位置，分为“中，左，右——center,left,right”
#m_pro div.act{margin-top:10px}
——个人介绍和照片的间距
#m_pro div.user{margin-top:10pxcolor:#000000font-size:12pxfont-weight:bold}
——个人用户名的大小颜色
#m_pro div.desc{color:#000000font-size:12px}
——个人介绍的大小颜色
#m_pro div.line{margin-top:17pxline-height:17pxborder-top:1px solid #F4C1B5}
#m_pro td{color:#000000line-height:24pxfont-size:14px}
#m_album div.image{text-align:center}
——相册中照片的显示位置，分为“中，左，右——center,left,right”
#m_album div.page{color:#666666font-size:12pxtext-align:center}
#m_album div.page a{color:#0000CCfont-size:12px}
#m_album div.page a:visited{color:#0000CC}
#m_links div.item{color:#000000font-size:12px}
——友情链接的连接描述的大小颜色
#m_links div.item a{color:#D77B18font-size:12pxtext-decoration:none}
——友情链接名的大小颜色，未被点击
#m_links div.item a:visited{color:#D77B18}
——友情链接名的大小颜色，已被点击
#m_links div.line{margin-top:5pxline-height:8pxborder-top:1px solid #F4C1B5}
——友情链接见的分隔符的相关设置
#m_artclg div.item{color:#666666font-size:12px}
——文章分类中各分类后面主题数及括号的大小颜色
#m_artclg div.item a{color:#D77B18font-size:12px}
——文章分类中各分类的大小颜色，未被点击
#m_artclg div.item a:visited{color:#D77B18}
——文章分类中各分类的大小颜色，已被点击
#m_artclg div.line{margin-top:5pxline-height:8pxborder-top:1px solid #F4C1B5}
——文章分类中各分类之间的分割线的相关设置
#m_comment div.item{color:#000000font-size:12px}
#m_comment div.item a{color:#D77B18font-size:12px}
——最新评论中用户名的大小颜色，未被点击
#m_comment div.item a:visited{color:#D77B18}
——最新评论中用户名的大小颜色，已被点击
#m_comment div.item a.cnt{color:#000000font-size:12pxtext-decoration:none}
——最新评论中评论文字的大小颜色，未被点击
#m_comment div.item a.cnt:visited{color:#000000text-decoration:none}
——最新评论中评论文字的大小颜色，已被点击
#m_comment div.item a.cnt:hover{color:#000000text-decoration:underline}
————最新评论中评论文字当鼠标移上去时的颜色
#m_comment div.line{margin-top:5pxline-height:8pxborder-top:1px solid #F4C1B5}
——最新评论中各评论之间的分割线的相关设置
有什么不懂的去我空间留言 http://hi.baidu.com/fayewang8
背景颜色自己选[推荐][共1步]====1、以下是这个效果的全部代码。[最好从一个空页面开始]
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb_2312-80">
<title>新页面 </title>
</head>
<body>
<script language="JavaScript">
<!--
done = 0
step = 4
function anim(yp,yk)
{
if(document.layers) document.layers["napis"].top=yp
else document.all["napis"].style.top=yp
if(yp>yk) step = -4
if(yp<60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35)
}
function start()
{
if(done) return
done = 1
if(navigator.appName=="Netscape") {
document.napis.left=innerWidth/2 - 145
anim(60,innerHeight - 60)
}
else {
napis.style.left=11
anim(60,document.body.offsetHeight - 60)
}
}
//-->
</script>
<div id="napis"
style="position: absolutetop: -50
color: #000000font-family:宋体font-size:9pt">
</div><script language="JavaScript">
<!--
setTimeout('start()',10)
//-->
</script>
<script language="JavaScript">
<!-- Begin
function initArray() {
for (var i = 0i <initArray.arguments.lengthi++) {
this[i] = initArray.arguments[i]
}
this.length = initArray.arguments.length
}
var colors = new initArray(
"#000000","#0000FF","#80FFFF","#80FF80","#FFFF00","#FF8000","#FF00FF","#FF0000"
)
delay = 100
link = 0
vlink = 0
function linkDance() {
link = (link+1)%colors.length
vlink = (vlink+1)%colors.length
document.linkColor = colors[link]
document.vlinkColor = colors[vlink]
setTimeout("linkDance()",delay)
}
linkDance()
// End -->
</script>
<script>
function colors(c1){
this.c1 = c1
}
a00 = new colors("FFFBD0")
a01 = new colors("FF0000")
a02 = new colors("FF8080")
a03 = new colors("FF8000")
a04 = new colors("FFFF00")
a05 = new colors("000080")
a06 = new colors("0000FF")
a07 = new colors("008000")
a08 = new colors("00FF00")
a09 = new colors("804000")
a10 = new colors("808000")
a11 = new colors("000000")
a12 = new colors("FFFFFF")
a13 = new colors("C0C0C0")
a14 = new colors("408080")
a15 = new colors("808080")
a16 = new colors("D2BF51")
a17 = new colors("44BBE8")
a18 = new colors("C97AB9")
a19 = new colors("A2C97A")
a20 = new colors("804000")
a21 = new colors("6AE6C4")
a22 = new colors("33A3D1")
a23 = new colors("6C9AEE")
function changebg(type){
scheme = type
document.bgColor = scheme.c1
timerID=setTimeout('document.bgColor = scheme.c2', document.selector.value * 10)
}
</script>
<form NAME="selector">
<p><input TYPE="button" onClick="changebg(a00)" style="background-color: rgb(255,251,208)"><input
TYPE="button" onClick="changebg(a01)" style="background-color: rgb(255,0,0)"><input
TYPE="button" onClick="changebg(a02)" style="background-color: rgb(255,128,128)"><input
TYPE="button" onClick="changebg(a03)" style="background-color: rgb(255,128,0)"><input
TYPE="button" onClick="changebg(a04)" style="background-color: rgb(255,255,0)"><input
TYPE="button" onClick="changebg(a05)" style="background-color: rgb(0,0,128)"><input
TYPE="button" onClick="changebg(a06)" style="background-color: rgb(0,0,255)"><input
TYPE="button" onClick="changebg(a07)" style="background-color: rgb(0,128,0)"><input
TYPE="button" onClick="changebg(a08)" style="background-color: rgb(0,255,0)"><input
TYPE="button" onClick="changebg(a09)" style="background-color: rgb(128,0,0)"><input
TYPE="button" onClick="changebg(a10)" style="background-color: rgb(128,128,0)"><input
TYPE="button" onClick="changebg(a11)" style="background-color: rgb(0,0,0)"><input
TYPE="button" onClick="changebg(a12)" style="background-color: rgb(255,255,255)"><input
TYPE="button" onClick="changebg(a13)" style="background-color: rgb(192,192,192)"><input
TYPE="button" onClick="changebg(a14)" style="background-color: rgb(64,128,128)"><input
TYPE="button" onClick="changebg(a15)" style="background-color: rgb(128,128,128)"><input
TYPE="button" onClick="changebg(a16)" style="background-color: rgb(210,191,81)"><input
TYPE="button" onClick="changebg(a17)" style="background-color: rgb(68,187,232)"><input
TYPE="button" onClick="changebg(a18)" style="background-color: rgb(201,122,185)"><input
TYPE="button" onClick="changebg(a19)" style="background-color: rgb(162,201,122)"><input
TYPE="button" onClick="changebg(a20)" style="background-color: rgb(106,230,196)"><input
TYPE="button" onClick="changebg(a21)" style="background-color: rgb(194,219,185)"><input
TYPE="button" onClick="changebg(a22)" style="background-color: rgb(51,163,209)"><input
TYPE="button" onClick="changebg(a23)" style="background-color: rgb(108,154,238)"></p>
</form>
</body>
</html>
不停变换的背景颜色[共1步]
====1、将以下代码加入HTML的<body></body>之间：
<body bgColor="#ffffff" onload="chgCol()pingpong()">
<script language="JavaScript">
<!-- Hide from JavaScript-Impaired Browsers
var pos = 10
function initArray() {
this.length = initArray.arguments.length
for (var i = 0i <this.lengthi++) {
this[i] = initArray.arguments[i]
}
}
var col=new initArray("4b","5b","8b","8b")
col[0] = "yellow"
col[1] = "coral"
col[2] = "orange"
col[3] = "red"
col[4] = "greenyellow"
col[5] = "lime"
col[6] = "turquoise"
col[7] = "coral"
col[8] = "blueviolet"
col[9] = "violet"
function chgCol() {
pos++
if (pos<0||pos>9) {
pos = 0
}
document.bgColor = col[pos]
setTimeout("chgCol()",5000)
/* Change above set to every 10 seconds (1000 = 1 sec) If
you wish to speed it up, lower the number. To slow it
down, raise the number. */
}
var yourwords = "不断变化背景色彩"var buffer1=" "var buffer2=" "var message1=buffer1+yourwords+buffer2var dir = "left"var speed =150function pingpong(){if (dir == "left") { message2=message1.substring(2,message1.length)+" "window.status=message2setTimeout("pingpong()",speed)message1=message2if (message1.substring(0,1) == "*") dir="right"}else { message2=" "+message1.substring(0,message1.length-2)window.status=message2setTimeout("pingpong()",speed)message1=message2if (message1.substring(message1.length-1,message1.length) == "*") dir="left"}}// --></script>
检测浏览器类型并调用不同的背景音乐[修改MIDI文件名][共1步]
====1、将以下代码加入HTML的<body></body>之间：
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var MSIE=navigator.userAgent.indexOf("MSIE")
var NETS=navigator.userAgent.indexOf("Netscape")
var OPER=navigator.userAgent.indexOf("Opera")
if((MSIE>-1) || (OPER>-1)) {
document.write("<BGSOUND SRC=sound.mid LOOP=INFINITE>")
} else {
document.write("<EMBED SRC=sound2.mid AUTOSTART=TRUE ")
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>")
}
// End -->
</SCRIPT>
滚动背景[特别推荐][共1步][IE专用]<先在页面中设置好背景图片然后再进行下一步>
====1、将以下代码加入HEML的<body></body>之间：
<script language="VBScript">
dim c,numgc
c=-100000
numgc=document.body.sourceIndex
sub SF
c=c+1
Document.all(numgc).style.BackgroundPosition= "0 " &c
id=SetTimeOut("SF",16,"VBScript")
end sub
SF
</script>
永远居中的背景图片[推荐][共1步][修改图片名称]
====1、将以下代码加入HEML的<body></body>之间：
<STYLE TYPE="text/css">
<!--
BODY {background-image: URL(图片名称.gif)
background-position: center
background-repeat: no-repeat
background-attachment: fixed}
-->
</STYLE>
随机显示的背景图片[想别人每次看你页面时背景都不一样吗？][共1步]
====1、将以下代码加入HTML的<head></head>之间：
<script LANGUAGE="JavaScript">
bg = new Array(2)//设定图片数量，如果图片数为3，这个参数就设为2，依次类推
bg[0] = 'bg1.gif' //显示的图片路径，可用http://
bg[1] = 'bg2.gif'
bg[2] = 'bg3.gif'
index = Math.floor(Math.random() * bg.length)
document.write("<BODY BACKGROUND="+bg[index]+">")
</script>
跟随屏幕移动的图像[推荐]修改图片名称和文字即可][共2步]
====1、将以下代码加入到HEML的<head></head>之间：
<style type="text/css">
#floater {
position: absolute
left: 500
top: 146
width: 125
visibility: visible
z-index: 10
}</style>
====2、将以下代码加入到HEML的<body></body>之间
<div ID="floater" style="left: 590pxtop: 158px">
<p align="center"><img SRC="想要显示的图片.gif" alt="图片显示的文字" WIDTH="125" HEIGHT="60"><br>
<font color="#FF8040">图片下面的文字</font></p>
</div><script LANGUAGE="JavaScript">
self.onError=null
currentX = currentY = 0
whichIt = null
lastScrollX = 0lastScrollY = 0
NS = (document.layers) ? 1 : 0
IE = (document.all) ? 1: 0
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTopdiffX = document.body.scrollLeft}
if(NS) { diffY = self.pageYOffsetdiffX = self.pageXOffset}
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY)
if(percent >0) percent = Math.ceil(percent)
else percent = Math.floor(percent)
if(IE) document.all.floater.style.pixelTop += percent
if(NS) document.floater.top += percent
lastScrollY = lastScrollY + percent
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX)
if(percent >0) percent = Math.ceil(percent)
else percent = Math.floor(percent)
if(IE) document.all.floater.style.pixelLeft += percent
if(NS) document.floater.left += percent
lastScrollX = lastScrollX + percent
}
}
<!-- /STALKER CODE -->
<!-- DRAG DROP CODE -->
function checkFocus(x,y) {
stalkerx = document.floater.pageX
stalkery = document.floater.pageY
stalkerwidth = document.floater.clip.width
stalkerheight = document.floater.clip.height
if( (x >stalkerx &&x <(stalkerx+stalkerwidth)) &&(y >stalkery &&y <(stalkery+stalkerheight))) return true
else return false
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement
if (whichIt == null) { return true}
}
whichIt.style.pixelLeft = whichIt.offsetLeft
whichIt.style.pixelTop = whichIt.offsetTop
currentX = (event.clientX + document.body.scrollLeft)
currentY = (event.clientY + document.body.scrollTop)
} else {
window.captureEvents(Event.MOUSEMOVE)
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.floater
StalkerTouchedX = e.pageX-document.floater.pageX
StalkerTouchedY = e.pageY-document.floater.pageY
}
}
return true
}
function moveIt(e) {
if (whichIt == null) { return false}
if(IE) {
newX = (event.clientX + document.body.scrollLeft)
newY = (event.clientY + document.body.scrollTop)
distanceX = (newX - currentX)distanceY = (newY - currentY)
currentX = newXcurrentY = newY
whichIt.style.pixelLeft += distanceX
whichIt.style.pixelTop += distanceY
if(whichIt.style.pixelTop <document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop
if(whichIt.style.pixelLeft <document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft
if(whichIt.style.pixelLeft >document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20
if(whichIt.style.pixelTop >document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5
event.returnValue = false
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY)
if(whichIt.left <0+self.pageXOffset) whichIt.left = 0+self.pageXOffset
if(whichIt.top <0+self.pageYOffset) whichIt.top = 0+self.pageYOffset
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17
return false
}
return false
}
function dropIt() {
whichIt = null
if(NS) window.releaseEvents (Event.MOUSEMOVE)
return true
}
<!-- DRAG DROP CODE -->
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN)
window.onmousedown = grabIt
window.onmousemove = moveIt
window.onmouseup = dropIt
}
if(IE) {
document.onmousedown = grabIt
document.onmousemove = moveIt
document.onmouseup = dropIt
}
if(NS || IE) action = window.setInterval("heartBeat()",1)
</script>
可以看一下http://www.ik8.com/
要创建 CSS3 动画，你需要了解 @keyframes 规则。@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
