本站近期更新内容
2008.05.23新增颜色代码生成器
2008.05.22新增校内音乐库
2008.05.21新增校内代码过滤器
2008.05.20准备升级可视编辑器
2008.05.20准备整理素材
校内美化相关
css使用方法
简单来说css所要美化常用的对象有三种:id、class、标签名称。
使用方法:
id名称前加"#" class名称前加点"." 标签直接写名称
后面为大括号{},大括号里为属性名及其属性值,属性与其属性值之间用冒号":"链接,多个属性之间用分号";"隔开。
改变多个对象的用同一批属性时,各对象名称之间可以用逗号","隔开,然后后跟大括号。
定义某特定对象下的对象,两对象之间用空格隔开。
注意:所有符号均为半角字符即通常所说的英文状态下输入的字符
例如:
修改id为userFeed的属性的时候(就是个人新鲜事部分的属性)写法为:
#userFeed{background:#000000;color:#ffffff;border-left:5px solid red;}
修改class为userProfileItem的属性的时候(就是帐号信息的文本部分的属性)写法为:
.userProfileItem{background:#000000;color:#ffffff;border-left:5px solid red;}
修改标签a的属性的时候(就是整个页面的链接的属性)写法为:
a{color:red;}
修改id为userFeed下的a标签的属性(这里设置其链接的字体属性颜色为红色)写法为:
#userFeed a{color:red;}
修改id为userFeed和class为userProfileItem的属性的时候(注意写法中的#逗号和点)写法为:
#userFeed,.userProfileItem{background:#000000;color:#ffffff;border-left:5px solid red;}
具体使用方法和css属性,可以参考css手册
校内css
校内css结构图
<body id="profilePage">
<div id="container">
<div id="header"></div>
<div id="sidebar"></div>
<div id="widebar">
<div id="navigation"></div>
<div id="content">
<div id="userRelations"></div>
<div id="userStatus"></div>
</div>
<div id="footer"></div>
</div>
</body>
css美化之如何隐藏各模块
属性及值:
display:none;
例如(隐藏个人新鲜事):
#userFeed{display:none;}
css美化之如何添加局部背景
属性及值:
background:url(背景地址);
例如(个人新鲜事模块加背景):
#userFeed{background:url(http://fm181.img.xiaonei.com/tribe/20070818/11/33/A800102538686GAZ.jpg) #ffffff left top no-repeat;}
css美化之如何改变字体属性
例如(改变日志文本部分字体属性):
#userBlog{color:red;font-weight:bold;letter-spacing:3px;line-height:30px;font-size:15px;}
css美化之如何添加鼠标样式
属性及值:
cursor:url(鼠标样式地址)
例如(整个页面的鼠标样式):
平常状态下鼠标样式:
body{cursor:url('http://img.xiaonei.com/photos/43/864/orig74385.cur')}
鼠标划过链接时鼠标样式
a:hover{cursor:url(http://baidu.com/favicon.ico)}
css美化之模块定位
绝对定位,例如:
#header,#sidebar{ position: absolute; left: -150px; top: 10px; }
相对定位,例如:
#userBlog{ position: relative; left: -7in;}
css美化之模块边框
属性及值:
border:1px solid #DDD;
例如(设置个人新鲜事边框为红色):
#userFeed{border:2px solid red;}