首先我们要知道校内网涂鸦板代码 校内网涂鸦版代码 校内网代码 头像归哪部分
通过研究代码我们可以知道
头像图片[id=userPicture] 下面的几个按钮[id=userActions]
而他们俩包含在一个id=userInfo的层里面,最外面还有一个id=userRelations的层
这就好办了
我们把PS好的图片设成最外层的背景[代码缩进都没显示,郁闷~~大家凑或看]
#userRelations {
position:relative;
left:9px;
float:left;
width:233px;
padding-bottom:10px;
background:url(http://img.xiaonei.com/photos/20060816/1150/orig49432.jpg) no-repeat fixed;
}
上面的代码,我来解释一下,前两个是让整个层右移9像素,让背景也别紧挨着左侧导航栏,第四行设置宽度[其实就是整个左列的宽度],最后那句就是设置背景图了
因为我们要创造一个边框的假象,所以内容不能遮挡到做好的背景边框,怎么办呢?
聪明的你应该想到移动头像图片和下面的按钮
#userInfo {
position:relative;
top:15px;
left:15px;
}
上面我们说到,头像和按钮时包含在userInfo里面的,上面的代码就是将userInfo这个层相对于自己的父标签[也就是最外层的userRelations]下移并右移各15像素,OK,完成
把这个文件保存,上传,然后用如下代码引用
<style>@import url(文件地址);</style>
下面写出头像部分更细致的一些设置[是我页面的设置,不要纯copy啊~~]
#userPicture { margin-bottom:10px;}
#userPicture a img { border:1px solid #d8dfea;} /*头像边框颜色*/
#userPicture a:hover img { border:1px solid #b1ff0b;}
/*鼠标在头像上时的边框颜色*/
#userActions { list-style-type:none; font-family:Tahoma, Helvetica, sans-serif;}
#userActions li a { display:block; width:192px; padding:0 5px; border-bottom:1px solid #d8dfea; text-decoration:none; font-size:12px; line-height:20px;} /*上面是个按钮之间分割线的颜色*/
#userActions li a:hover { text-decoration:none; font-size:12px; line-height:20px; background:#111;}