首 页 ┆ 校内网CSS代码 ┆  涂鸦版代码 ┆  校内网背景代码 ┆  音乐代码 ┆  校内网成品代码 ┆  校内网教程 ┆  校内网刷人气 ┆  校内网文
您当前的位置:笨熊网校内网教程 → 简单的涂鸦板css代码教程

简单的涂鸦板css代码教程

作者:未知  来源:校内网  更新时间:2007-12-3 15:44:54



要美化自己的页面,你需要学习的知识很简单。我是学java的,我就用java的思想来举个例子。
对象与属性

一个长方形是一个对象,你需要给它取一个名字,例如object1。它有很多属性,比如,长,宽,边框粗细,颜色,等等。在css中,你页面上的各个部分就是你的对象。比如你页面最顶端那个蓝色的条,它的名字叫header,它的属性有:height长度,width宽度,background背景,等等。如果你想自己画一个图放在最顶端,应该怎么办呢? 首先画一个长条状的图,保存为jpg格式,然后上传,最好传到校内。

在置顶的帖子里有个资源上传帖,进去随便传。

上传后,在图片上点击右键,复制快捷方式,就可以获得这个图片在校内的地址。

然后,你要改变head的高度和宽度,单位是像素(px),根据你的图片的大小,用下面的语句改变head的属性:-----------------------我是分割线--------------------------

#header{height:38px;width:800px;background:url(括号内ctrl+v粘贴图片地址) no-repeat center}

------------------------我是分割线--------------------------

这句话就是说,把header的高度改为38像素,宽度800像素,然后把图片放进去,no-repeat是说图片显示方式为显示一次(就是不会一个挨着一个填满整个区域),center指图片位于header正中。

是不是很简单?

------------------------我是分割线--------------------------

其它部分基本就是一样的道理,下面给出页面各部分的名字:

#sidebar 左边菜单

#userStatus 用户状态

#userRelations 用户关系,就是中间那一大堆东西,最近登陆的好友、分享、好友分布等等那竖着的一整栏

#userBlog 日志

#userAlbum 相册

#navigation 顶部菜单栏

#AccountInfo 帐号信息

#userProfile 用户资料

#userTalk 留言板

#giftBox 礼品

------------------------我是分割线--------------------------

下面是经常用的属性

display 设置为none时,不显示,这是最有用的,让你的页面很整洁;

width 宽度;

height 高度;

font-size 字体大小,单位同样为px;

color 字体颜色,后面可以跟white,black,green等基本的颜色,也可以用#09ff33这样的代码;

background url() 背景图片,括号内为图片url地址;

float 改变位置,例如#sidebar{float:right} 就是把左边菜单栏移到右边;

------------------------我是分割线--------------------------

其它的代码大家可以去搜索引擎搜索“校内网css代码 教程”,可以看到更加详细的说明。

------------------------我是分割线--------------------------

下面是我的页面css代码,调试了一下午(自己汗一下,太笨了),war3暗夜精灵风格,简洁到极限,其中去掉了我的头像的一句,大家可以到我页面看下效果。

------------------------我是分割线--------------------------

#userBlog .text{height:400px;overflow-y:auto;}

.blockimage.block h3{display:none;}

.blocktext{display:none;}

#userRelations{display:none;}

#AccountInfo{display:none;}

#navigation a {font-family:Tahoma, Helvetica, sans-serif;font-size:14pt;color:#990099;}
#navigation a:hover {color:#663366;}

#userProfile{width:690px;position:relative; left:-295px}
#userProfile h3{font-size:16px;height:38px;color:white;background:url(http://fm192.img.xiaonei.com/tribe/20071126/11/01/A607955445300OXC.jpg) no-repeat center}

#userTalk{width:690px;position:relative; left:-295px}
#userTalk h3{font-size:16px;height:38px;color:white;background:url(http://fm192.img.xiaonei.com/tribe/20071126/11/01/A607955445300OXC.jpg) no-repeat center}

#userAlbum{width:690px;position:relative; left:-295px}
#userAlbum h3{font-size:16px;height:38px;color:white;background:url(http://fm192.img.xiaonei.com/tribe/20071126/11/01/A607955445300OXC.jpg) no-repeat center} 
/* 你可以在 www.benxiong.com 获取最新的校内网涂鸦板代码 */

#userBlog{width:690px;position:relative; left:-295px;}
#userBlog h3{font-size:16px;height:38px;color:white;background:url(http://fm192.img.xiaonei.com/tribe/20071126/11/01/A607955445300OXC.jpg) no-repeat center}

#giftBox .boxcont{height:0px}
#giftBox h3,#giftBox .sub-h3 {display:none;}
#container{width:860px}#widebar{width:714px;float:left;margin:auto}

#sidebar{float:right;margin:auto}

#header{height:38px;background:url(http://fm192.img.xiaonei.com/tribe/20071126/11/01/A607955445300OXC.jpg) no-repeat center}

#navigation{height:38px;background:url(http://fm192.img.xiaonei.com/tribe/20071126/11/01/A607955445300OXC.jpg) no-repeat center}

#userStatus h2{font-size:32px;position:relative;left:-125px}
#userStatus .boxcont{font-size:16px;position:relative;left:-125px}#userStatus{height:160px;position:relative;left:-70px;}