个人主页设计教程

个人主页设计教程简单版这个教程比较简单，适合对主页进行少量修改。如果觉得改的东西太少，请参看本群组其他置顶贴。

由于CSS代码的无序性，想要添加的代码直接放于自己原来的代码后面就可以了。

代码使用方法：将写好的代码复制，点击进入页面右上角的“设置”主页风格自定义风格将代码粘贴在滚动栏里保存修改即可。

在自己或者别人的主页空白出，点击鼠标右键，在弹出的菜单里选择“查看源文件”，即可查看主页的源文件代码。

由于选择符讲起来麻烦，看着麻烦，干脆就不讲了。这个教程里就直接对重要的选择符进行处理。

自己查看源文件代码，你会发现在第14行：@importurl(template/blue/style.css);下面显示的是自己或者别人的CSS代码。你可以这样借鉴别人的CSS代码。

再继续看代码，发现个人主页是有几大模块组成的，大模块又由小模块组成，各模块又由很多小元素构成。主要模块有：(只列举简单修改的那部分)

一

#append_parent

（置顶图片，默认情况是未使用的。可不用。）

#append_parent

{

height:100px;

图像占据的高度，数值100应该改为和你的图片宽度一致。数值自己调整。

background:url(图片地址)no-repeatcenter;

表示图片不平铺（不重复），居中显示。

zoom:0.8;

图片大小，0.8表示显示图片是使用图片的0.8倍。数值自己调整。可不用。

}二

#header

.headerwrap

(头部菜单，“首页”“个人主页”等，包含一背景。)

.log

（头部LOGO，一背景图片。）

.headerwarp

{

background:none;

背景颜色条去除。

padding-top:10px;

头部菜单与页面顶部的距离。数值自己调整。

font-size:16px;

头部菜单字体大小。已经调整适当。

}

#header.logoa

{

background:url();

去除南山站LOGO，如果你想用自己的LOGO替代，则使用下面代码。

}

#header.logoa

{

background:url(LOGO地址);

图片地址为你自己的LOGO地址。

zoom:0.1;

大小自己调整。

}

三body

.tabs_header

（页面主题顶部菜单）

.tabs_header

{

display:none;

不太好看，直接去掉。

}

#space_feed

{

display:none;

我觉得不好看，直接去掉。想留下的这段代码不要即可。

}

body

{

background:#000A2Durl(个人主页页面背景图片地址)no-repeat;

带#号的表示图片外的背景颜色，自己调整，选择与图片搭配的。noi-repeat表示图片不重复，如果图片太小则换为repeat-x或者repeat-y分别表示在X轴方向和Y轴方向重复。

background-position:center0px;

背景在页面居中

padding-top:0px;

背景与头部菜单的距离。数值自己调整。可不调。

background-attachment:fixed;

表示背景图片固定。若想图片与其他部分一起滚动，把fixed改为scroll即可。

}

四#footer

（脚部。就是页面底部那根最长的线以下部分。）

#footer

{

display:none;

不太好看，直接去掉。如果想在上面加图片，见我主页，可用下面代码。

}

#footer

{

width:1000px;

图片暂用页面宽度，自己按照图片大小调整。

height:151px;

高度。

background:transparenturl(图片地址)no-repeatcenterbottom;

}

并且在#footer后加上下面代码，去除底部文字。

#footerp,#footera

{

display:none;

}

五页面标题栏背景颜色条。

.header.headerwarp.menuli

{background:url();}

.tabs_headerul.tabslia

{background:url();}

.tabs_headerul.tabsliaspan

{background:url();}

等等。。。。

全部直接去掉。如果如果想把这些背景颜色调改为自己喜欢的样式，请询问断羽·晓月同学。

六字体颜色

这是简单版的，只简单修改下。

a:link

{color:aqua;}

颜色选你喜欢的，具体是是哪一部分的字体颜色，自己看。如果想进行详尽的修改，参看字体改颜色代码对照表。

a:visited

{color:Aqua;}

a:hover

{color:Fuchsia;}

附上代码简单版成品，其中所有的数值，地址，颜色值都需要你自己修改。#append_parent

{

height:400px;

background:url(/attachment/200905/15/153_1242403473d3ac.jpg)no-repeatcenterbottom;

zoom:0.8;

}

.headerwarp

{

background:none;

padding-top:10px;

font-size:16px;

}

#header.logoa

{

background:url();

}

.tabs_header

{

display:none;

}

#space_feed

{

display:none;

}

#space_thread

{

display:none;

}

.composerimg

{

display:none;

}

#space_photoimg

{

zoom:2

}

body

{

background:#000A2Durl(/attachment/200905/15/153_1242403471WW11.jpg)no-repeat;

background-position:center0px;

padding-top:0px;

background-attachment:fixed;

}

#footer

{

width:1000px;

height:151px;

background:transparenturl(/attachment/200905/24/228_124316014040d4.gif)no-repeatcenterbottom;

}

#footerp,#footera

{

display:none;

}

.header.headerwarp.menuli

{background:url();}

.tabs_headerul.tabslia

{background:url();}

.tabs_headerul.tabsliaspan

{background:url();}

.tabs_headerul.tabslia:hover

{background:url();}

.tabs_headerul.tabslia:hover

span

{background:url();}

.tabs_headerul.tabsli.activea

{background:url();}

.tabs_headerul.tab