简单的说,就是对网页各个部分的一些命令,只要您找到对应的部分,给它下命令,你的空间就能根据你的所需要而千变万化!
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
在my多玩这个玩家的个人空间里,只要你将各部分的命令写好,放进我的设置--修改我的模板【见图】。您的空间就会按照你下达的指令显示。
那各部分的命令又是如何写的呢?下面我会一一列出,你搞好,添进去,刷新后,马上主页就变化了。
点击这个颜色代码查阅器就可以取得你要的颜色的代码,放在合适的位置,你的空间就变色了。
颜色定义代码查阅器
多玩个人空间各部分详细说明
●背景图片:body {background:颜色代码 url(图片地址)}
●顶部中间的大图:
.wrap-h {width:900px;height:337px; background: url(图片地址)}
可以定义宽和高:width:900px;height:337px;
显示效果,图示如下---
●中间内容的背景图:
.wrap{ background: url(图片地址,太大的图片打开会慢哦) }
显示效果,图示如下---
●我的故事部分:
#about {background: #FF8C69; width: 560px;}/* 背景 */
#about h2 { font-size:16px; color: #FFFFF0;border-bottom: 1px solid #444;}/* 标题文字 */
#about .content { color: #FFFFF0;}/* 内容文字 */
显示效果,图示如下---
background:#FEE4CD(背景颜色) url(图片地址)
font-size: 20px 字体大小
color:#555555 字体颜色
border: 3px 边框宽
solid #FF8800 边框颜色
width:400px 宽
●我的随笔部分:
/*随笔*/
#jottings {background: #222;width: 560px; overflow: hidden;}/* 随笔部分的背景 */
#jottings img { width: 555px;}/* 规定随笔里的图片宽 */
#jottings h2 {font-size:16px; color: #A79960; border-bottom: 1px solid #444;}/* 随笔的标题文字 */
#jottings .j-content {color: #BAAF82;}/* 随笔内容文字 */
#jottings .time{ color:#A88F00; font-size:10px; }/* 发表时间 */
#jottings .jotting { border-bottom: 1px solid #444; }/* 间隔 */
#jottings .jotting a,#jottings .jotting1 a{ color:#DBBB00; }/* 文章标题颜色 */
#jottings .jotting a:hover,#jottings .jotting1 a:hover{ color:#FFD700; }/* 标题鼠标移入变化颜色的定义 */
●我的连环闪部分:
/*连环闪*/
#mylhh {background: #222; overflow: hidden; }/* 背景 */
#mylhh h2 {font-size:16px; color: #A79960; border-bottom: 1px solid #444;}/* 我的连环闪字体定义 */
●我的朋友部分:
/* 我的朋友 */
#friends {background: #222; overflow: hidden;}/* 背景 */
#friends h2 {font-size:16px; color: #A79960; border-bottom: 1px solid #444;}/* 标题文字 */
#friends .content { color: #BAAF82;}/* 内容 */
#friends ul a{ color: #DBBB00; text-decoration: none;}/* 好友名称 */
#friends li img { border: 2px solid #666; padding: 1px}/* 好友图片边框 */
●我的留言部分:
/* comment */
#comment { background: #222; overflow: hidden;}/* 背景 */
#comment h2 {font-size:16px; color: #A79960; border-bottom: 1px solid #444;}/*标题
文字 */
#comment .content {color: #A88F00;}/* 留言top */
#comment table,#comment td { border: 1px solid #444; }/* 边框 */
#comment table .f-name img { border: 1px solid #666; padding: 1px;}/* 图片边框 */
#comment table .f-comment { width: 420px ; color: #BAAF82; }/* 内容 */
●个人形象部分
/* 个人信息 */
.my-info-h {background: Blue url(图片地址 宽290 高17); width: 290px; height: 17px;
}/* 个人信息头图-可选择性定义*/
.my-info { background: #222; border: 1px solid #8B743D; color: #BAAF82;}/* 个人形象
主体背景和边框 */
.my-name { background: Black; height: 15px; padding: 8px 10px 5px 10px; font-size:14px; font-weight: bold; color: #fff;}/* 姓名 */
/* .my-profile {margin-left: 5px; width: 90px; float: left;display: inline; }/* 个人说明 */
/* .my-photo { float: right; width: 170px; margin: 10px; display: inline;}/* 形象图
*/.my-photo img { padding: 1px ; border: 1px solid #4D3E19; background: #000; margin:10px; }/* 图片内间距,边框,背景 *//* 个人说明和形象图可左右调换位置,调换位置后设置本行margin:0;
*/.my {border-top: 5px solid #444; }/* 分割线 */
●/* 加我为好友 */
.add-me {border: 1px solid #4D3E19; background: #000 url(小图标地址) no-repeat 8px center; float: left; }
●/* 给我发信 */
.send-me {border: 1px solid #4D3E19; background: #000 url(小图标地址) no-repeat 8px center; float: right;}/* 设置float属性更换左右位置 */
●/* 所在公会的定义*/
#guild { background: #222; border: 1px solid #4D3E19; }/* 背景,边框 */
#guild h2 { font-size:16px; color: #A79960;}/* 标题文字 */
#guild .content {color: #BAAF82; border-top: 1px solid #444; border-bottom:5px solid #444;}/* 说明文字,上下间隔 */
/*#guild .logo { float: right; margin:0; } /* 公会logo */
/*#guild .text { width: 175px; float: left;}/* 公会说明 *//* logo与说明可左右换位 */
●/* 游戏历程 */
#history { background: #222; border: 1px solid #4D3E19; }/* 背景,边框 */
#history h2 { font-size:16px; color: #A79960; }/* 标题文字 */
#history .content { color: #A79960; border-top: 1px solid #444; }/* 说明文字,上间隔 */
#history .text { border-bottom: 5px solid #444;}/* 间隔 */
●/* 个人形象的flash定义 */
.flash-foto { background: #222; }
ok,都写完了,不明白,或者出了问题,请回贴,修改模板的时候请将原来的模板改为“简洁”。
多玩游戏,多找战友





不思进取:但求快乐!

附件1 : 303.jpg (6.25 K) 
