小女生论坛

标题: 校内CSS涂鸦板代码修改之头像修改篇 [打印本页]

作者: Hellokity 时间: 2008-11-7 17:35
标题: 校内CSS涂鸦板代码修改之头像修改篇
首先我们要知道校内CSS涂鸦板代码校内CSS涂鸦版代码校内CSS代码头像归哪部分通过研究代码我们可以知道头像图片[id=userPicture] 下面的几个按钮[id=userActions] 而他们俩包含在一个id=userInfo的层里面，最外面还有一个id=userRelations的层这就好办了我们把PS好的图片设成最外层的背景[代码缩进都没显示，郁闷~~大家凑或看] #userRelations { position:relative; left:9px; float:left; width:233px; padding-bottom:10px; background:url(<a href="http://img.xiaonei.com/photos/20060816/1150/orig49432.jpg">http://img.xiaonei.com/photos/20060816/1150/orig49432.jpg</a>) 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;}

欢迎光临小女生论坛 (http://bbs.xiaonvsheng.net/)