个人主页设计教程

个人主页设计教程简单版这个教程比较简单，适合对主页进行少量修改。如果觉得改的东西太少，请参看本群组其他置顶贴。 由于CSS代码的无序性，想要添加的代码直接放于自己原来的代码后面就可以了。 代码使用方法：将写好的代码复制，点击进入页面右上角的“设置”-主页风格-自定义风格-将代码粘贴在滚动栏里-保存修改即可。在自己或者别人的主页空白出，点击鼠标右键，在弹出的菜单里选择“查看源文件”，即可查看主页的源文件代码。 由于选择符讲起来麻烦，看着麻烦，干脆就不讲了。这个教程里就直接对重要的选择符进行处理。 自己查看源文件代码，你会发现在第14行：import url(template/blue/style.css);下面显示的是自己或者别人的CSS代码。你可以这样借鉴别人的CSS代码。再继续看代码，发现个人主页是有几大模块组成的，大模块又由小模块组成，各模块又由很多小元素构成。主要模块有：(只列举简单修改的那部分)一#append_parent（置顶图片，默认情况是未使用的。可不用。） #append_parent height:100px;-图像占据的高度，数值100应该改为和你的图片宽度一致。数值自己调整。 background:url(图片地址) no-repeat center; -表示图片不平铺（不重复），居中显示。zoom:0.8; -图片大小，0.8表示显示图片是使用图片的0.8倍。数值自己调整。可不用。二#header .headerwrap(头部菜单，“首页”“个人主页”等，包含一背景。) .log （头部LOGO，一背景图片。） .headerwarp background: none; -背景颜色条去除。 padding-top:10px;-头部菜单与页面顶部的距离。数值自己调整。 font-size:16px; -头部菜单字体大小。已经调整适当。 #header .logo a background:url(); -去除南山站LOGO，如果你想用自己的LOGO替代，则使用下面代码。 #header .logo a background:url(LOGO地址); -图片地址为你自己的LOGO地址。 zoom:0.1; -大小自己调整。三 body .tabs_header（页面主题顶部菜单）.tabs_header display :none ; -不太好看，直接去掉。#space_feed display :none ; -我觉得不好看，直接去掉。想留下的这段代码不要即可。 body background:#000A2D url(个人主页页面背景图片地址) no-repeat; -带#号的表示图片外的背景颜色，自己调整，选择与图片搭配的。noi-repeat表示图片不重复，如果图片太小则换为 repeat-x或者repeat-y分别表示在X轴方向和Y轴方向重复。background-position: center 0px; -背景在页面居中 padding-top: 0px; -背景与头部菜单的距离。数值自己调整。可不调。 background-attachment:fixed; -表示背景图片固定。若想图片与其他部分一起滚动，把fixed改为scroll即可。四 #footer（脚部。就是页面底部那根最长的线以下部分。） #footer display:none; -不太好看，直接去掉。如果想在上面加图片，见我主页，可用下面代码。 #footer width:1000px; -图片暂用页面宽度，自己按照图片大小调整。 height:151px; -高度。 background: transparent url(图片地址) no-repeat center bottom; 并且在#footer后加上下面代码，去除底部文字。 #footer p,#footer a display :none ;五 页面标题栏背景颜色条。 .header .headerwarp .menu li background:url(); .tabs_header ul.tabs li a background:url();.tabs_header ul.tabs li a span background:url(); 等等。 -全部直接去掉。如果如果想把这些背景颜色调改为自己喜欢的样式，请询问断羽晓月同学。六 字体颜色 这是简单版的，只简单修改下。 a:link color:aqua; -颜色选你喜欢的，具体是是哪一部分的字体颜色，自己看。如果想进行详尽的修改，参看字体改颜色代码对照表。 a:visited color:Aqua; a:hover color:Fuchsia;附上代码简单版成品，其中所有的数值，地址，颜色值都需要你自己修改。#append_parentheight:400px;background:url(/attachment/15/153_d3ac.jpg) no-repeat center bottom;zoom:0.8;.headerwarp background: none;padding-top:10px;font-size:16px;#header .logo abackground:url();.tabs_header display :none ;#space_feeddisplay :none ;#space_threaddisplay :none ;.composer imgdisplay :none ;#space_photo imgzoom:2bodybackground:#000A2D url(/attachment/15/153_WW11.jpg) no-repeat;background-position: center 0px;padding-top: 0px;background-attachment:fixed;#footer width:1000px;height:151px; background: transparent url(/attachment/24/228_0d4.gif) no-repeat center bottom; #footer p,#footer adisplay :none ;.header .headerwarp .menu li background:url();.tabs_header ul.tabs li a background:url();.tabs_header ul.tabs li a span background:url();.tabs_header ul.tabs li a:hover background:url();.tabs_header ul.tabs li a:hover span background:url();.tabs_header ul.tabs li.active a background:url();.tabs_header ul.tabs li.active a spanbackground:url();#space_page