发表于2007-03-14 19:48:36      [ 楼主 ]
CSS是啥东西,我怎么样用它来定义我的空间?

简单的说,就是对网页各个部分的一些命令,只要您找到对应的部分,给它下命令,你的空间就能根据你的所需要而千变万化!

在主页制作时采用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,都写完了,不明白,或者出了问题,请回贴,修改模板的时候请将原来的模板改为“简洁”。




 
多玩游戏,多找战友
↑[ top ]
发表于2007-04-03 02:01:43      [ 1 楼 ]
Re: CSS是啥东西,我怎么样用它来定义我的空间?

= =```好复杂哦~




有一种精神叫开荒,有一种命运叫付出,有一种荣誉叫牺牲,还有一种感觉叫自由
您的IP地址:256.257.258.259
您来自:火星


↑[ top ]
发表于2007-04-03 14:03:53      [ 2 楼 ]


称谓:
公会:起航
Re: CSS是啥东西,我怎么样用它来定义我的空间?

很复杂 有空学学




我的DUOWAN空间

共同建设 起航!
 
↑[ top ]
发表于2007-04-26 21:44:00      [ 3 楼 ]


称谓:
公会:
Re: CSS是啥东西,我怎么样用它来定义我的空间?

罐水无罪....




↑[ top ]
发表于2007-04-27 06:15:06      [ 4 楼 ]
Re: CSS是啥东西,我怎么样用它来定义我的空间?

  没时间!有时间了!自己搞!搞好了!不怎么的!也有成就感!呵呵!开荒塞!




不思进取:但求快乐!
↑[ top ]
发表于2007-04-30 22:52:52      [ 5 楼 ]
Re: CSS是啥东西,我怎么样用它来定义我的空间?

[font=楷体_GB2312]文字[/font]请教下~~如果想把模板的位置整体移动到屏幕的左边是用什么指令呢?我看有些人的模板是那样做的,就可以在屏幕的右面留比较多的地方来露出底版的图画。




如果我们否定了给予我们的爱,如果我们因为害怕失去而不肯施予,我们的生命将是一片空虚,我们失去的将会更多 
↑[ top ]
发表于2007-05-10 00:58:18      [ 6 楼 ]


称谓:很想养头猪
公会:神迹
Re: CSS是啥东西,我怎么样用它来定义我的空间?

看了头就疼





什么都不说,什么都不想,什么也不做。
     想好好的睡下!!~~  别打扰我哦......^^
↑[ top ]
发表于2007-05-10 11:48:33      [ 7 楼 ]
Re: CSS是啥东西,我怎么样用它来定义我的空间?

303



附件1 : 303.jpg (6.25 K) 删除


http://lhs.duowan.com/
多玩连环闪,等你来玩!不会作的点这里~
↑[ top ]
发表于2007-05-18 09:18:14      [ 8 楼 ]
Re: CSS是啥东西,我怎么样用它来定义我的空间?

太复杂了,偶还不是很清楚怎么做?





未去管 谁不满 习惯自己的事由我管 
若你走 才不管 自我空间不要你伴 
在我内心中我反我叛 我用不羁杀死困闷
↑[ top ]
发表于2007-05-20 21:36:58      [ 9 楼 ]


称谓:
公会:Crazy Boy
Re: CSS是啥东西,我怎么样用它来定义我的空间?

还是高科技也!




↑[ top ]