|
一.基础篇
新人注意:不要把【群页面】跟你的【个人主页】混淆了!!!
【群页面】代码添加方式:群页面→“管理员工具箱”→“群设置”→“群公告栏”,代码都是放在群公告栏中的。
(一)群页面全透明代码
1.群页面绝对全透明代码(真正的全透明,删除所有广告;删除所有分割线——除了左侧导航条下的分割线,没了反而影响视觉):★★★★★★★★★★★★
<link href=”http://img.xiaonei.com/photos/20061201/2300/orig42570.css” rel=”stylesheet” type=”text/css” media=”all” />
2.群页面全透明代码保留“张贴你的布告连接”(真正的全透明;删除所有广告,单独保留“张贴你的布告连接”(相当于用舒肤佳洗手了,只保留有益的细菌:));删除所有分割线——除了左侧导航条下的分割线,没了反而影响视觉):★★★★★★★★★★★★
<link href=”http://img.xiaonei.com/photos/20061201/2300/orig43118.css” rel=”stylesheet” type=”text/css” media=”all” />
3.给整个页面加入一个漂亮的滚动条
<style>html{scrollbar-face-color:#990099;scrollbar-darkshadow-color:#FFCCFF;scrollbar-highlight-color:#FFCCFF;}</style>
————————其中“scrollbar-face-color”是滚动条的表面颜色(不包括其中的箭头),“scrollbar-darkshadow-color”是右侧及下侧边框颜色,“scrollbar-highlight-color”是左侧及上侧边框颜色。想做的更花哨可以继续定义以下部分的颜色,“scrollbar-arrow-color”是上下箭头的颜色 ,“scrollbar-track-color”是轨道的颜色 ,“scrollbar-3dlight-color”是立体光(3D效果),“scrollbar-shadow-color”是滚动条在3维空间中产生的阴影的颜色(3D效果);“#990099”“#FFCCFF”等是16位制颜色代码也是你可以根据页面风格替换的部分
(二)添加背景图片音乐和鼠标指针以及修改【群页面】所有字的字体属性与个人主页面的代码是一致的这里再给大家列出来:
1.添加背景音乐的代码
<embed style=”WIDTH:16px;HEIGHT:13px” name=MediaPlayer1 pluginspage=http://www.microsoft.com/Windows/MediaPlayer src=背景音乐的下载地址 width=14 height=13 type=application/x-mplayer2 autostart=”1″ loop=”1″ showcontrols=”1″></embed>
————————其中,背景音乐的格式必须是wmv或者mp3;“WIDTH:16px;HEIGHT:13px”是对播放器宽度和高度的定义;autostart=”1″表示背景音乐自动播放,不想自动播放就将数字改为“0”;loop=”1″表示背景音乐将循环播放,不想循环播放将数字改为“0”;showcontrols=”1″表示是否显示手动控制按钮不想显示播放器控制按钮将数字改为“0”
2.添加背景图片的代码
<style>body{background:url(”背景图片的下载地址”) no-repeat fixed center;}</style>
————————其中,“no-repeat” 表示图片不重复显示,“fixed”表示图片始终处于滚动条范围内固定显示,“center”表示图片在任意分辨率下居中显示
3.添加自定义鼠标指针样式的代码
<body style=”cursor:url(’鼠标指针的下载地址’)”;></body>
4.添加鼠标经过连接时的鼠标指针样式的代码★★★★★★★★★★★★
<style>a:hover{cursor:url(’鼠标指针的下载地址’)}</style>
5.修改群主页所有字的字体属性的代码(将群页面风格的统一做到了极至)★★★★★★★★★★★★
<style type=text/css>A:link{color:#990099;font-size:10pt;font-family:Tahoma, Helvetica, sans-serif;};A:visited{color:#FFCCFF;font-size:10pt;font-family:Tahoma, Helvetica, sans-serif;};A:active{color:#FFCCFF;font-size:10pt;font-family:Tahoma, Helvetica, sans-serif;};A:hover{color:#663366;text_decoration:underline};body{color:#FFCCFF;font-weight:bolder;font-size:10pt;font-family:Tahoma, Helvetica, sans-serif;};#header #navigation a {font-family:Tahoma, Helvetica, sans-serif;font-size:14pt;color:#990099;};#header #navigation a:hover {color:#663366;};#mymenu #myhome a.edit{font-size:8pt;text-align:center;color:#990099;};#content .box h3 {color:#990099;};#groupInviter .inputtext{color:#FFCCFF;font-weight:bolder;font-family:”Lucida Grande”, Arial, Tahoma, Helvetica, sans-serif;background:transparent;};#groupForum th {font-weight:bolder;color:#990099;};.threadlist .time{font-family:Tahoma, Helvetica, sans-serif;color:#990099;};input.subbutton {font-family:Tahoma, Helvetica, sans-serif;font-size:9pt;color:#FFCCFF;};* html .inputbutton, * html .inputsubmit {font-family:Tahoma, Helvetica, sans-serif;font-size:10pt;color:#FFCCFF;};#footer p{color:#990099;};</style>
————————其中,“A:link”(经常简化为A)是指未访问的连接字的字体属性,“A:visited”是已访问的连接字的字体属性,“A:active”是鼠标点住连接不放时的字体属性,“A:hover”是鼠标经过时的字体属性,“body”是页面主体部分没有连接的字的字体属性,“color:”是字的颜色(“#990099”“#FFCCFF”等是16位制颜色代码也是你可以根据页面风格替换的部分),“font-size:”是字的大小(其后的具体数值是你可以自己换的),“font-family:”是字的家族(比如宋体、隶书等等),“font-weight:bolder”是加粗显示(你可以替换的有normal、cite等);前面5个定义了绝大部分字的字体属性,后面的是将所有没有受影响的字的字体属性改变,“#header #navigation”是顶部导航条的字体颜色,“#mymenu #myhome a.edit”是左侧导航条“我的页面”右边的“编辑”这两个字的字体属性,“#content .box h3”是“群管理员”、“群公告栏”、“群论坛”、“最近访客”这几个字的字体属性,“#groupInviter .inputtext”是“校内ID”下的小文本框内的字的字体属性,“#groupForum th”是“主题”“作者”“回复”“阅读”“最后回复”这几个字的字体属性,“.threadlist .time”是回复时间这些字的字体属性,“#postForm .inputtext”是“新主题”标题的文本框内字体属性(因“Form”为禁用字体而必须在CSS文件中使用),“* Form Elements * input, textarea, select ”新主题文本区域和选择分版这些字的字体属性(因“Form”为禁用字体而必须在CSS文件中使用),“* html .inputbutton, * html .inputsubmit”是“邀请朋友加入”下的“发送”这两个字的字体属性,“input.subbutton”是新主题区域“发表”“取消”这两个按钮上的字的字体属性,“#footer p”是“© 2006 易寻在线”这几个字的字体属性,“.shy a”是“京ICP证060414号”这几个连接字的字体属性
PS:其实细心的读者会发现还有部分字的颜色没改变,那是因为那部分代码因为含有“form”等禁用字符串而被迫放弃使用,但是如果你把他们放在自己的CSS中的话就可以解决这个问题了:)
6.修改【个人主页】所有字的字体属性的代码。考虑到部分小鸟可能连自己页面的字体属性都没有统一所以专门给出此段代码:)看了“5.”中的代码相信你应该知道怎么操作了吧
<style type=text/css>A:link{color:#00FF00;font-size:10pt;font-family:Tahoma, Helvetica, sans-serif;text-decoration:none;};A:visited{color:#00FF00;font-size:10pt;font-family:Tahoma, Helvetica, sans-serif;text-decoration:none;};A:active{color:yellow;font-size:10pt;font-family:Tahoma, Helvetica, sans-serif;text-decoration:none;};A:hover{color:yellow;background:transparent;text_decoration:underline};body{color:#00FF00;font-size:10pt;font-weight:bolder;font-family:Tahoma, Helvetica, sans-serif;};#header #navigation a{font-family:Tahoma, Helvetica, sans-serif;font-size:14pt;color:#00FF00;};#header #navigation a:hover{color:yellow;};.box h3{color:#3b5998;font-size:12pt;font-family:Tahoma, Helvetica, sans-serif;};#album .subinfo {font-family:Tahoma, Helvetica, sans-serif;font-size:8pt;color:#3b5998;};.box h3{color:yellow;font-size:12pt;font-family:Tahoma, Helvetica, sans-serif;};#album .subinfo {font-family:Tahoma, Helvetica, sans-serif;font-size:8pt;color:yellow;};#AccountInfo .userProfileItem{font-family:Tahoma, Helvetica, sans-serif;font-size:10pt;color:yellow;};#BasicInfo .userProfileItem{font-family:Tahoma, Helvetica, sans-serif;font-size:10pt;color:yellow;};#ContactInfo .userProfileItem{font-family:Tahoma, Helvetica, sans-serif;font-size:10pt;color:yellow;};#PersonalInfo .userProfileItem{font-family:Tahoma, Helvetica, sans-serif;font-size:10pt;color:yellow;};#userBlog .article .time{color:#yellow;};#userBlog .stat{color:yellow;};.date, .time, .count{font-family:Tahoma, Helvetica, sans-serif;FONT-SIZE:8pt;color:yellow;};#userTalk .article .time{color:yellow;};#footer p{color:#00FF00;};.shy a{color:#00FF00;font-size:10pt;font-family:Tahoma, Helvetica, sans-serif;text-decoration:none;}</style>
7.通过绝对定位在页面任意位置贴图的代码
<div style=”FILTER: alpha(opacity=100 Style=3 FinishOpacity=0)black();position:absolute;top:640px;left:550px;width:154px;height:231px;”><img width=100% src=”要贴的图片”></div>
————————其中,“FILTER: alpha(opacity=100 Style=3 FinishOpacity=0)black();”这段是用滤镜让贴出的图片半透明,有朦胧感,不需要的可以把这句删除,而且像滤镜这种东西会相当影响页面的浏览速度,能不用最好不用;“z-index:-1;”设定图片处于页面分层的最底层,其作用是让贴图不会遮挡住连接文字等;“position:absolute;top:640px;left:550px;width:154px;height:231px;”这段依次是定位图片在网页中的绝对位置及图片自身的宽度和高度
【注意】:为了让图片可以定位到群页面的任意位置,必须先确保每个框体是否都允许超出部分的显示,没明白什么意思没关系,直接加入以下代码即可。如果你已经用了我给出的群页面全透明代码中的任意一个则无须再加入此代码:)★★★
<style type=text/css>#container{overflow:visible;};#content{overflow:visible;};#groupFirstly{overflow:visible;};#groupSecondary{overflow:visible;};#groupBulletin{overflow:visible;};</style>
|