校内网代码站 >> 校内网代码教程 >> 校内网涂鸦板透明代码的设置

校内网涂鸦板透明代码的设置

[ 校内网代码站 来源: 作者:不详 2008-8-4 15:10:33 ]

 

 

 

常有同学问如何将整体页面变得透明，使得背景可以显示出来。

我个人不推荐这样做，因为那样会使页面上的字体难以阅读；

下面我一步步教大家如何让整个页面透明。

好了，先把不用的隐藏起来

CSS代码

/*隐藏版块*/

#logo, #tagline, #copyrightlink, .announcement, #userBlog .more, #utility, #permalink, #sidebar, #reportlink,#footer p{

display:none}

再给背景加个颜色或者图片

CSS代码

body {

padding:0;

margin:0;

background: url(http://fm121.img.xiaonei.com/blog/20070807/14/56/A976139616894RHI.gif) repeat-y center;}

好了，经过上面两步骤下面开始做让页面透明：

整个内容部分

#widebar{background:transparent;}

为什么是#widebar呢？大家还记得那个校内网完整结构图么？不记得再回头看去。新手必读:最新CSS美化教程

现在大部分都已经透明，除了个人状态，h3标题，日记标题，礼物标题，留言标题。

个人状态

#userStatus {background:transparent;}

h3标题

#content h3 {background:transparent;}

日记标题

#userBlog .info {background:transparent;}

礼物标题

#giftBox .sub-h3 {background:transparent;}

留言标题

#talk .info {background:transparent;}

我们把上面代码优化一下：

#widebar, #userStatus, #content h3, #userBlog .info, #giftBox .sub-h3 ,#talk .info {background:transparent;}

现在保存下再看看自己的页面，除顶部的导航背景外，还有就是那些边框颜色了。

导航很重要，所以你不会也打算让它透明吧？

那些边边框框的，只要将border设置成0就成。

#widebar, #userStatus, #content h3, #userBlog .info, #giftBox .sub-h3 , #talk .info,#content {border:0;}

此篇教程只是教大家如何让页面透明化，是校内网最新CSS美化教程子篇。

最后你的涂鸦板里应该有这些内容

CSS代码

/*页面整体设置*/

body {

padding:0;

margin:0;

background: url(http://fm121.img.xiaonei.com/blog/20070807/14/56/A976139616894RHI.gif) repeat-y center;}

/*隐藏版块*/

#logo, #tagline, #copyrightlink, .announcement, #userBlog .more, #utility, #permalink, #sidebar, #reportlink,#footer p{

display:none}

/*使透明*/

#widebar, #userStatus, #content h3, #userBlog .info, #giftBox .sub-h3 , #talk .info{background:transparent;}

/*去边框*/

#widebar, #userStatus, #content h3, #userBlog .info, #giftBox .sub-h3 , #talk .info,#content {border:0;}

责任编辑: 晨冬雪