个人主页设计教程简单版.docVIP

个人主页设计教程简单版这个教程比较简单，适合对主页进行少量修改。如果觉得改的东西太少，请参看本群组其他置顶贴。 ? 由于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即可。?????????} ? 四 #fo