1.强烈建议把你自己修改的CSS 放在记事本中将其后缀改为css然后上传到藏宝箱之类的指定上传地点用以下代码引用:
<link href="你上传的css文件的网页地址" rel="stylesheet" type="text/css" media="all" />★★★★★★★★
有些人想直接添加到“管理员工具箱”中的“群设置”里可以用这个格式:<style>代码内容</style> (但是某些代码会因为其中含有“form”等禁用字符串而迫使你必须要用第一种方式来让被禁用字符可用,所以建议最好还是做一个CSS文件来管理以下代码更为方便,这样做还有一个好处是可以为你的群公告栏节约更多的可用空间,来进行更多的美化设计)
2.以下是整个群页面中有必要修改的CSS项目,内含群页面全透明,去掉所有广告,在≥1024*768的分辨率下都自动居中显示等项目(此CSS为了方便读者阅读,部分内容没有进行优化,有心的读者请自己做优化):
校内网代码有不懂的地方请参看在线CSS参数查阅表
#grouppage{}
————————这个ID其实没有什么需要修改的,它包括了整个群页面,下面的内容都是它的分支属性
html{scrollbar-face-color:#990099;scrollbar-darkshadow-color:#FFCCFF;scrollbar-highlight-color:#FFCCFF;}
————————给整个群页面加入一个漂亮的滚动条
body{color:#990099;font-weight:bold;font-size:13px;font-family:Tahoma, Helvetica, sans-serif;background:black url(http://img.xiaonei.com/photos/20061016/0930/large82565.jpg);cursor:url('http://img.xiaonei.com/photos/20061023/2250/orig162767.cur');}
————————对页面文本中非连接字的字体属性,背景颜色、背景图片(强烈建议在背景图片里PS上你的名字之类标志以防止“小偷”),鼠标指针进行设置
A:link{color:#990099;font-size:13px;font-family:Tahoma, Helvetica, sans-serif;text-decoration:none;}
A:visited{color:#663366;font-size:13px;font-family:Tahoma, Helvetica, sans-serif;text-decoration:none;}
A:active{color:#FFCCFF;font-size:13px;font-family:Tahoma, Helvetica, sans-serif;text-decoration:none;}
A:hover{color:#FFCCFF;background:transparent;text_decoration:none;cursor:url('http://img.xiaonei.com/photos/2006103/2250/orig162682.cur');}
————————依次对页面中未访问的连接字、已访问的连接字、鼠标点住连接字不放时、鼠标经过连接字时的字体属性进行设置,同时设置鼠标经过连接时不显示默认的蓝色背景并且鼠标指针会变换成另一种样式
#header{overflow:visible;width:740px;height:106px;position:relative;left:52px;}
————————顾名思义它是群页面的顶部区域包含了顶部导航器等部件,这里对其能否允许超出部分显示、宽度、高度以及定义其相对位置进行了设置
#header #logo{display:none;}
————————去掉顶部LOGO(诸如“校内网”和哪个女孩的头像等小广告)
#tagline{display:none;}
#utility{display:none;}
————————这两句是去掉“大学生互动空间”等处于顶部导航器上面的东西。
#header #navigation{background:transparent;position:relative;top:30px;left:51px;}
————————顶部导航器背景设为空,即透明,也可以换成自己的图片,但需注意风格的统一
#navigation a {font-family:Tahoma, Helvetica, sans-serif;font-size:14pt;color:#990099;}
#navigation a:hover {color:#663366;}
————————这两句是设置顶部导航器上连接字的字体属性
#header #navigation li .new{padding-right:10px;background:url();}
————————这句是删除顶部导航器上“学校”这两个连接字后面的“new!”这个小图片,其中“padding-right:10px;”是调整它与“日志”这两个连接字之间的宽度。对于“padding”这个参数我再介绍一点,它是对象的内补丁,与其对应的是margin,对象的外补丁,在他们之间的就是border,这三者间的关系可以参看图例★★★★★★★★★★★★
#sidebar{width:115px;position:relative;top:20px;left:-65px;background:transparent;}
————————这个是左侧导航条,我们可以设置其背景、宽度,也可以将其移动
#mymenu{background:transparent;}
————————将左侧导航条菜单栏背景设为空,即透明,也可以换成自己的图片,但需注意风格的统一
#mymenu a {font-size:12pt;line-height:50px;}
————————对左侧导航条里连接字的字体大小,行高记性设置
#mymenu li {border-bottom:1px solid #d8dfea;}
————————对左侧导航条每个连接下的白色分割线进行粗细和色彩的修改,其中“border”是边框,加个“-bottom”就是改变其底部边框,要改变边框颜色可以这样写“border:1px solid #bdc7d8;”“#bdc7d8”是16进位的颜色代码
#mymenu #myhome a.hasedit {float:left;width:87px;}
————————“我的页面”这个连接那一行我必须说明一下,他是由两部分组成的,左边部分是“我的页面”这几个字,右边部分是“编辑”这两个字。左边的部分就是a.hasedit这里。我们设置它的宽度也是有要求的,比如左侧导航条的总宽度如果为115PX,那么我们把他设为87PX其右边的“编辑”的宽度就要改为28PX,这样才不会形成某些人修改左侧导航条宽度后“我的页面”这个连接占两行情况(影响了整个导航的风格很不妥)★★★★★★★★★★★★
#mymenu #myhome a.edit{float:right;width:28px;font-size:8pt;text-align:center;color:#990099;}
————————这个当然就是右边的“编辑”了除了修改它的宽度,还可以修改其字体属性
#mymenu #myphoto a {background-image:url();}
————————去掉我的相册右边"new!"这个小图片
#sidebar .block image{display:none;}
#sidebar .announcement{background:transparent;background:url();}
#sidebar .announcement image{display:none;}
#sidebar .block h3{display:none;}
.blockcont{display:none;}
.blockcont image{display:none;}
.blockcont text{display:none;}
.blockcont text h4 {display:none;}
.blockcont text p{display:none;}
#sidebar #postannouncement{background:transparent;}
————————这9句是对布告栏的广告一并删除(赞助费都没给,还想我们给他们打广告,门儿都没有),只保留“张贴我的布告”这一连接★★★★★★★★★★★
#container {overflow:visible;width:730px;position:absolute;top:0;left:50((50.body.clientWidth-this.offsetWidth)/2);}
————————对页面主体的总宽度和能否允许超出部分显示(想让你的绝对定位图片在任意位置的话就用visible吧否则就hidden)以及移动其位置使你的页面在≥1024*768的任意分辨率下都居中显示进行设置,这个取值方式要特别感谢李响同学的鼎立赞助!★★★★★★★★★★★
#content{border-right:0px;border-left:0px;border-bottom:0px;position:relative;top:-548px;left:50px;}
————————除了顶部、左侧导航以及底部FOOTER区(给管理员留言之类的)这三个部分外的区域都属于#content。这里我删除了左右两边的白色分割线,毕竟是全透明嘛,呵呵。
#groupSecondary{overflow:visible;width:600px;}
————————#content的左边,你可以设置其宽度和能否允许超出部分显示之类的以及移动其位置(群页面专有的属性,想让你的绝对定位图片在任意位置的话就用visible吧否则就hidden)★★★★★★★★★★★★
#groupFirstly{overflow:visible;width:130px;position:relative;left:10px;}
————————#content的右边,你可以设置其宽度和能否允许超出部分显示之类的以及移动其位置(想让你的绝对定位图片在任意位置的话就用visible吧否则就hidden)★★★★★★★★★★★★
#content .box h3{color:#990099;font-family:Tahoma, Helvetica, sans-serif;font-size:11pt;background-color:transparent;border-top:solid 0px;}
————————诸如“群名称”“群公告栏”“群论坛”“最近访客”等字体属性设置,框体背景色设置以及其上面的普蓝色分割线的粗细、颜色设置★★★★★★★★★★★★
#groupBulletin{overflow:visible;}
————————允许“群公告栏”超出部分显示(想让你的绝对定位图片在任意位置的话就用visible吧否则就hidden)★★★★★★★★★★★★
#tabs {border-bottom:solid 0px;}
————————对“群论坛”下面的各个分区按钮的底部边框的颜色粗细设置
.page{background:transparent;}
.page a{padding:0px 6px; border:solid 0px;background:transparent;}
.page a:hover{border:solid 0px;background:transparent;}
————————这三句是对“1”“2”“下一页>”部分背景设置为空,即透明★★★★★★★★★★★★
#groupForum th {background:transparent;font-weight:bolder;color:#990099;line-height:30px;}
————————对“主题”“作者”“回复”“阅读”“最后回复”这几个字的字体属性的设置★★★★★★★★★★★★
.threadlist{background-color:transparent;border-bottom:solid 0px;}
#groupForum tr.odd{background-color:transparent;}
#groupForum tr.even td{background-color:transparent;}
————————这三句是将群页面帖子的背景设置为空,即透明★★★★★★★★★★★★
.threadlist th{padding:0;}
.threadlist td{padding:0;line-height:19px;}
————————这两句是设置每个帖子的行高,不修改的情况下,如果你想把字的大小设置为12PX或者9PT以上的话就会出现字显示不完整的情况,这是一个看似不起眼但是相当重要的参数★★★★★★★★★★★★
.threadlist th.threadTitle{padding-left:0px;}
————————对帖子标题栏与发帖人姓名栏之间的间距的设置
.threadlist th.threadAuthor{width:7em;}
————————对发帖人姓名栏宽度的设置
.threadlist th.threadResponder{width:7em;}
————————对回帖人姓名栏宽度的的设置
.threadlist .time{font-family:Tahoma, Helvetica, sans-serif;color:#990099;}
————————对帖子最后回复时间的字体属性的设置★★★★★★★★★★★★
#groupActions{background:transparent;}
#groupActions a {background:transparent;border-bottom:2px solid #FFCCFF;}
#groupActions a:hover {color: #990099;background:transparent;}
————————这三句是对“管理员工具箱”“邀朋友加入群”“删除本群”“取消订阅”框体的背景色设置为空,即透明,以及对连接字背景色、连接字体属性和连接字下分割线的粗细颜色进行设置
#groupInviter .inputtext{color:#990099;font-weight:bolder;font-family:"Lucida Grande", Arial, Tahoma, Helvetica, sans-serif;background:transparent;border:2px solid #FFCCFF;}
————————这句是对“校内ID”下面那个小文本框的背景设置为空,并对区域中的字体属性和连接字下分割线的粗细颜色进行了设置★★★★★★★★★★★★
#groupForum form {background-color:transparent;border-top:0px;}
.promolink li{background:url()}
————————这两句是将“新主题”的外部框架及其附近相关联区域背景设置为空,即透明,且去掉了其上的分割线★★★★★★★★★★★★
#postForm .inputtext{color:#990099;font-weight:bolder;font-family:"Lucida Grande", Arial, Tahoma, Helvetica, sans-serif;background:transparent;border:2px solid #FFCCFF;}
————————这句是将“新主题”右边的帖子标题区域背景设置为空,即透明,并对帖子标题区域中的字体属性和连接字下分割线的粗细颜色进行了设置★★★★★★★★★★★★
* Form Elements * input, textarea, select {color:#990099;font-weight:bolder;font-family:"Lucida Grande", Arial, Tahoma, Helvetica, sans-serif;background:transparent;}
textarea{border:2px solid #FFCCFF;}
.resizable-textarea{background:transparent;}
.resizable-textarea .grippie{display:none;}
————————这三句是将“新主题”下面的帖子内容区域背景设置为空,即透明,并对帖子内容区域中的字体属性和连接字下分割线的粗细颜色进行了设置,且去掉了其下蛋白色拖动条★★★★★★★★★★★★
* html .inputbutton, * html .inputsubmit {border-left:1px solid #FFCCFF;border-top:1px solid #FFCCFF;border-right:1px solid #FFCCFF;border-bottom:1px solid #FFCCFF;background:#990099;font-size:10pt;color:#FFCCFF;}
*+html .inputbutton, *+html .inputsubmit{border:1px solid;border-color:#FFCCFF #FFCCFF #FFCCFF #FFCCFF;font-family:Tahoma, Helvetica, sans-serif;font-size:9pt;color:#FFCCFF;background:#990099;}
————————这两句是对“邀请朋友加入”下的“发送”这两个字所在的按钮(包括其边框和其背景色)和被激活后的框体及其字体属性进行设置★★★★★★★★★★★★
input.subbutton {border:1px solid;border-color:#FFCCFF #FFCCFF #FFCCFF #FFCCFF;font-family:Tahoma, Helvetica, sans-serif;font-size:9pt;color:#FFCCFF;background:#990099;}
input.canbutton {border:1px solid;border-color:#FFCCFF #FFCCFF #FFCCFF #FFCCFF;font-family:Tahoma, Helvetica, sans-serif;font-size:9pt;color:#FFCCFF;background:#990099;}
————————这两句是对“发表”“取消”这几个字所在的按钮(包括其边框和其背景色)和被激活后的框体及其字体属性进行设置★★★★★★★★★★★★
#footer {position:absolute;top:1380px;left:50((50.body.clientWidth-this.offsetWidth)/2);}
————————底部“给管理员留言”及其附近区域的设置,你可以设置其宽度以及移动其位置
#footer p{color:#990099;}
————————对“© 2006 易寻在线”这几个字的字体属性设置
.shy a{color:#00FF00;font-size:10pt;font-family:Tahoma, Helvetica, sans-serif;text-decoration:none;}
————————对“京ICP证060414号”这几个连接字的字体属性设置
#permalink{display:none;}
————————去掉最下面那个“复制****连接发给好友”的
3.如何参考别人的源代码(希望大家能够尊重原创者的心血,仅仅将其用来参考,以便设计出更美观的网页,而不是完全的克隆):★★★★★★★★★★★★
具体步骤——在浏览器最上面的右边大家可以看到有“文件(F)”“编辑(E)”“查看(V)”等项目,点击“查看”,然后点“源文件(C)”,最后在这个源文件中用热键(Ctrl+F)查找“涂鸦板”这几个字,即可获取别人涂鸦板里的所有源代码。
PS:最近看见很多人想通过禁用右键来避免别人克隆他们的网页,其实这不过是掩耳盗铃,而且也是对访客权限的不尊重(如:不能在新窗口中打开页面等),当然和别人页面完全一样确实不是太好,对于这个问题你可以通过直接和他交谈来解决,相信大家都是讲道理的人他尊重你,别人也会尊重他,但前提是你在他访问你页面的时候先尊重了他:)~~~
4.如何让“初级克隆爱好者”完全克隆你的页面后,其页面中到处都有你的广告,从而逼迫其不得不放弃完全使用你的代码:★★★★★★★★★★★★
为防止“初级克隆爱好者”破解,具体方法不便于直接写出来,有兴趣的朋友可以来M-aple或者我的页面查看源代码,有不明白的地方可以给我发站内信,但是提问前要附带你自己制作的CSS文档以表示你是用心学习了的,绝不会完全克隆别人的页面。

