校内网代码_校内网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>
熟悉上面的结构，因为布局常用到对应该的id。
附上校内网的完整结构层次图
好了,如果让你来美化,你第一步会想到什么?
加个个性背景图片,对么?
你上网去找到你喜欢的图片,也可以在这里找找http://www.Bo-u.cn/show-15-1.html
我们随便找一个,比如这个图片
找到图片后,怎么写代码呢?
小提示：找到的图片一定要再上传到校内网去，这样可以保证图片的有效性；而且切记只能用在写日记那里的上传图片功能，这样图片不会变形。
body {
padding:0;
margin:0;
background:url(upload/2007_12/071228043573731.gif) repeat;}
把上面代码放到涂鸦板中去,保存一下,看看有没有效果.
分析:
body 为什么是body呢,因为是整体页面的背景,你对比下校内网粗略布局结构就知道.
padding和margin分别是填充距和边距的意思，下面我会讲到，先略过。
background 这句是有格式的background:url(图片地址) repeat; repeat是完全平铺的意思,因为图片比较小张,如果是壁纸,那图片够大了,可以用no-repeat替换,如果背景图片是细长型的,那就水平平铺,用repeat-x替换.细窄的就用垂直平铺repeat-y;
如果替换替换如果你图片只有屏幕那么大,那你还可以固定你的背景,加个fixed就OK,格式是background:url(图片地址) no-repeat fixed;
如果你上面看不懂。你只要明白，我给整个页面加个背景的代码是
CSS代码
body {
padding:0;
margin:0;
background:url(你的图片地址) repeat;}
小节回顾：看到这里你应该要学会这些
了解校内网粗略布局结构
知道找到图片后要在日记那里上传
初步了解CSS的基本格式,如background是设置背景图片用的
能动手给页面加个背景图片(完全平铺,水平\垂直平铺,固定)
发现此教程的规律：代码都是浅绿色的，小提示都是浅灰色的。
--------------------------------------------------------------------------------
加完背景图片后,下一步要做什么?
先把没用的部分去掉,校内网LOGO,头部左边我的同学,我的世界, 隐私设置,帮助,退出,我的页面,我的班级 ...等链接 还有就是底部将如下链接发给朋友...
这里插入CSS基本语法
一个样式的语法由三部分构成：Selector(选择符)，属性(Property)，属性值(Value)
比较你要修改页面整体文字颜色为黑色，你可以使用以下代码
body{
color:#000
}
从上面那个例子你可以看出什么？
body = 选择符
color = 属性
#000 = 属性值
很显示body是整体页面的意思；color是颜色的意思；#000是黑色的意思。
整句翻译下来就是让整体颜色的颜色设置成黑色。
那么美化时要如何查找相应的选择符呢?
这里我举个例:比如找校内网LOGO的选择符
打开我的页面 -> 对空白地方右键 -> 查看源文件 就弹出文本编辑器 (这个方法很常用,偷人代码也是这样弄的)
小提示：如果你弄不明白什么是空白的地方，你可以在浏览器菜单栏上点查看，再点查看源文件就可以了
我们搜索校内网LOGO图片的地址(http://static.xiaonei.com/img/logo.gif)
小提示：校内网LOGO图片的地址知道怎么获取么?对着那个校内网LOGO图片右键 -> 属性 -> 弹出属性框,你就可以在地址(URL)那一栏看到地址了.这个方法可以查看所有图片的地址.弹出文本编辑器用完不要关掉，整个美化过程中都要用到
找到如下代码
<h1 id="logo"><a href="http://home.xiaonei.com/Home.do" title="校内网"><img src="http://static.xiaonei.com/img/logo.gif" alt="校内网(Logo)"/></a></h1>
小提示：搜索是用文本编辑器中编辑-> 查找;弹出来的源文件内容很多，使用查找功能可以很快搜索到我们要找的代码。
那么这个校内网LOGO选择符就是logo,其实很好找,在id或者class后面那个就是,等下我会举个class的例子.
那么隐藏校内网LOGO可以用如下代码
#logo{display:none}
分析:
logo就是那个选择符了,display是显示方式属性,值呢,就是none,显示方式是什么都没有就是不显示,logo前面那个#是用来区分id 和class用的,class是用.(小点)。因为logo是<h1></h1>的ID，所以我们现在设置可以使<h1></h1>内所有元素都隐藏，不管里面有多少元素,如果不明白先略过，下面还会解释到。
下面说个class的例子，好让大家区别一下。
比如我们要隐藏日记内容,日记可以显示三篇，最近发表的可以显示内容，现在我们要隐藏它
如何找日记内容的选择符？如果不知道，先回头看看我刚才是如何找校内网LOGO的选择符的,自己先试一下。
这里简单说一下，在刚才弹出文本编辑器里搜索你日记内容中的字符，你会搜索到如下类似的代码
<div class="content">
<div class="text"><P>我的日记内容</P></div>
<p class="stat"><a target="_blank" href=http://blog.xiaonei.com/GetEntry.do?id=000&owner=000>阅读(0)</a><span class="pipe">|</span><a target="_blank" href="http://blog.xiaonei.com/GetEntry.do?id=000&owner=000#comments">评论(0)</a></p>
</div>
</div>
你现在会自己写隐藏代码么？如果你有写成下面那样就很不错了
#text{display:none}/*这个错误的*/
但是这还不够，因为它是错的，class的要用点号(.)，正确如下：
#userBlog .content{display:none}/*这个是正确的*/
分析：
前面我们说过“因为logo是<h1></h1>的ID，所以我们现在设置可以使<h1></h1>内所有元素都隐藏，不管里面有多少元素”，content是最外面的层的class，对它的设置，它里面包含的同样会继承到，因为是class所以content前面用 . ；
前面的#userBlog 又是做什么用？这里又扯到id和class的区别，id是唯一的，只能使用一次，class是一个类，可以多次使用，简单说就是，id是一对一,class是一对多;可能还有其他元素应用这个样式，所以我们要在前面加个唯一的id,让它唯一。通俗些说，比如张三和张四都有个儿子都叫张五，你说张五指哪个，不确定，你说张三的儿子张五不就清楚了。
#userBlog 怎么来的？你可以往外层找；.content最近的ID是<ol id="blog">, 但是用#userBlog比较好,当然用#blog .content{display:none}也没错。
小提示：上面这一步可能对新手来说有点难，没事，如果不明白就略过吧。你只要懂得这么一种格式选择符+空格+选择符+{属性:值;}
同样大家能不能找到我的同学,我的世界的选择符
方法我教大家了，如果还不会，直接用下面
/*隐藏版块*/
#logo, #tagline, #copyrightlink, .announcement, #userBlog .more, #utility, #permalink, #sidebar, #reportlink{
display:none}
如果你需要隐藏其他版块，看这里http://www.bo-u.cn/show-29-1.html
这样就可以隐藏那些非常不必要的元素了。
这时涂鸦板里有这些代码
/*博友网原创,版权所有,转载注明出处 http://www.Bo-U.cn*/
body {
padding:0;
margin:0;
background:url(upload/2007_12/071228043573731.gif) repeat;}
/*隐藏版块*/
#logo, #tagline, #copyrightlink, .announcement, #userBlog .more, #utility, #permalink, #sidebar, #reportlink{
display:none}
小节回顾：看到这里你应该要学会这些
会查看图片的地址(URL)
会查看源代码并懂得使用搜索
掌握CSS的格式
知道display:none可以隐藏版块
了解查找选择符的方法并明白其含义
知道CSS有个继承的功能
隐藏完后,只剩下骨架了,现在我们要重新布局了
怎么布局,看大家喜欢,自己可以先在纸上画好框架,规化好各部分长度.
校内网那瘦不啦叽的布局,给一种感觉:小气,不过他是为要照顾800X600尺寸的用户,不过大家现在应该没有用那么小的显示器了,我们就做适合1024X768的.
很多同学喜欢在头部放个超大的图片.
我们找这一张图片,原图地址:http://fm151.img.xiaonei.com/blog/20071026/12/13/A203041926697EWE.jpg
用图片处理工具裁减成880X400
小提示,大家不一定都要把图片裁成长880px,宽400px的,完全可以按自己喜欢就好.而且图片太大，文件大小也相应增加，你不希望整个页面都显示完了，顶部图片的影子都没有？如果这里改而900px而下面的长度也要相应的修改.而宽度则不需要更改.
处理后地址:http://fm231.img.xiaonei.com/blog/20071026/12/20/A240169491211OXC.jpg
然后用下面代码来实现
/*头部图片设置*/
#container{
margin:0 auto;
width:880px;
background:url(http://fm231.img.xiaonei.com/blog/20071026/12/20/A240169491211OXC.jpg) no-repeat;}
放到涂鸦板,保存一下,看看效果,是不是错位很严重?
这是因为你#header大小没有设置，再去掉头部背景图片
/*头部设置*/
#header {
height:380px;
background:none;}
这个400px要根据你裁减的图片宽度
搞定头部，内容部分不协调，我们设置设置长宽和背景色
/*内容部分*/
#content {
border:0;
width:840px;
padding:20px 20px;
background:#fff;}
小提示:注意最后一个background:#fff;这个是让你的内容部分背景为白色.你可以先把上面代码放到涂鸦板里保存,看看效果就知道了。有的人希望改成透明的,这样可以看到原先弄的背景图片，你可以将#fff改成transparent，结果是：background:transparent;
加上这个后,我们发现内容部分错位,修改下widebar宽度
#widebar {
width:880px;
padding:0;
border:0;
background:none;}
然后发现账号信息栏宽度太小,感觉很空洞.于是我们加宽它。
/*账号信息列设置*/
#userUpdates{
width:640px;}
小提示:如果你希望头像列和账号信息列左右对调。可以用float；
/*账号信息列设置*/
#userRelations{
float:right;}
/*账号信息列设置*/
#userUpdates{
width:640px;
float:left;}
最后只剩下底部了.
/*底部设置*/
#footer {
width:880px;
background:#9E9986;}
底部也可以用图片来修饰，我没找到合适的，就用颜色代替。
分析:
margin是边距的意思，就像是房子和房子之间的距离。后面带四个数值，分别表示距上，距右，距下，距左的距离，很好记，顺时间的。数据可以用负值。比如上面的-10px,表示head层超出container层10px,如果是正数，就表示表示head层在container层往里10px处;auto表示自动。
padding是填充距的意思,就像是房子里桌子和墙壁的距离,注意是房子里
width和height分别表示长度和宽度。
border是边框设置,我们不要边框,就用none.
最后代码为 ,大家复制到涂鸦板保存看看效果.
CSS代码
/*博友网原创,版权所有,转载注明出处 http://www.Bo-U.cn*/
body {
padding:0;
margin:0;
background:url(upload/2007_12/071228043573731.gif) repeat;}
/*隐藏版块*/
#logo, #tagline, #copyrightlink, .announcement, #userBlog .more, #utility, #permalink, #sidebar, #reportlink{
display:none}
/*头部图片设置*/
#container{
margin:0 auto;
width:880px;
background:url(http://fm231.img.xiaonei.com/blog/20071026/12/20/A240169491211OXC.jpg) no-repeat;}
/*头部设置*/
#header {
height:400px;
background:none;}
/*内容部分*/
#content {
border:0;
width:860px;
padding:20px 20px;
background:#fff;}
#widebar {
width:880px;
padding:0;
border:0;
background:none;}
/*账号信息列设置*/
#userUpdates{
width:640px;}
/*底部设置*/
#footer {
width:880px;
background:#9E9986;}
复制到涂鸦板,到现在为止大体效果已经出来，只要再细节处理就OK
小节回顾：看到这里你应该要学会这些
掌握校内网层次结构
了解美化过程的步骤
知道左右位置对调是用float来控制
--------------------------------------------------------------------------------
细节处理
通过上面的美化好，整个框架已经出来了，但是还不是那么令人满意。
如果你能完全掌握上面所提到的,基本细节部分也可以自己做了.
头像和账号信息列边距太近，我们修改成下面，下划线部分为新增。
/*头像列设置*/
#userRelations{
margin-left:10px;}
/*账号信息列设置*/
#userUpdates{
width:610px;
margin-right:20px;}
设置下有多少人看过那部分，也就是个人状态栏
#userStatus {
margin:0;
padding:10px 0px 10px 10px;}
小提示：如果没有上面的代码，你会发现个人状态那一栏会变得很宽
顶部导航
小提示：这里说明一下，一般我们要先两个颜色，一种浅颜色，一种深颜色。
浅颜色:#9E988C
深颜色:#686357
这两种颜色在下面会反复出现，就是为了区别鼠标在链接上的样式。
先修改下导航那蓝色背景
#navigation {
background: #9E988C;}
发现左边还有个1像素的蓝色边框,你可更换颜色(#600051是颜色代码),也可以去掉.
这是换颜色
border-left:#600051;
这是去掉，建议使用去掉。
border:0;
导航中每个链接中间都有一个分隔竖线,我也可以换成自己喜欢的图片,也可以去掉
这是换图片
#navigation ul li{background-image:url(图片URL)!important;}
这是去掉,建议使用去掉。
#navigation ul li{background-image:none !important;}
保存下，看一下效果，效果还行，鼠标移上去，背景不协调，我们修改一下链接移去的样式。
这里插入CSS伪类--动态链接
概念就不说了，看下面
a:link {} /* 未访问的链接 */
a:visited {} /* 已访问的链接 */
a:hover {} /* 鼠标在链接上 */
a:active {} /* 激活链接 */
一般情况下a:link和a:visited的样式是一样的。
因为只是修改导航部分的链接，所以在前面加上导航的ID。
#navigation a:link, #navigation a:visited{
color:#fff;
background:#9E988C;}
分析:
上面的意思导航条的未访问链接和已访问链接样式是：颜色为#fff,背景为#9E988C
小提示：属性一样的样式可以用逗号（,）隔开。
那么鼠标在链接的代码要怎么写呢，大家自己先动手写一写。
#navigation a:hover {
background:#686357;}
因为我们只要修改背景就行，颜色还是#fff就不能再写了。
我们把鼠标移到学校后面的小倒三角，发现样式还是原先的。这里说明下，这是因为列表嵌套，子列表有他自己的样式，我现在修改子列表的样式
先修改子列表的整体样式
#navigation ul ul{
background:#9E988C;
border: 1px solid #686357;}
分析：
你注意到那两个ul了没，这个就是修改嵌套里面的子列表样式
这里修改到背景颜色和边框
再修改未访问链接和已访问链接样式
#navigation ul ul a, #navigation ul ul a:visited {
color:#fff;
border-bottom: 1px solid #686357;
background:#9E988C;}
小提示: a:link可以略写成a就可以
分析:
上面修改到颜色和底边框和背景
再修改鼠标在链接样式
#navigation ul ul a:hover {
color:#fff;
background: #686357;
导航部分最后代码是
CSS代码
/*导航条样式*/
#navigation {
border-left:0;
background: #9E988C;}
#navigation ul li{
background-image:none !important;}
#navigation a:link,#navigation a:visited {
color:#fff;
background:#9E988C;}
#navigation a:hover {
background:#686357;}
/*导航子列表样式*/
#navigation ul ul{
background:#9E988C;
border: 1px solid #686357;}
#navigation ul ul a {
color:#fff;
border-bottom: 1px solid #686357;
background:#9E988C;}
#navigation ul ul a:hover {
color:#fff;
background: #686357;}
顶部导航做好了,下面做整体页面的文字颜色及链接颜色,还记得整何等用什么选择符么?
注意:文字分有链接文字和无链接文字
这里说明一下,为了保持整体色调一致,一般我们写代码之前就应该要好选配好色的.
为了配合导航色调,我们采用整体颜色为#9E988C
body {
color:#9E988C;
padding:0;
margin:0;
background:url(upload/2007_12/071228043573731.gif) repeat;}
小提示:以后如果需要用到以前用过的选择符,我都会把整个代码复制下面,新增加的会加粗.
将上面代码覆盖到原先的body上,保存一下,看看是不是整个页面上的基本颜色都变,但是有链接部分的还是蓝色的,现在我们要处理这些链接样式.
a:link,a:visited{
color:#9E988C;}
分析:
还记得上面我们是怎么做导航的么,是不是有点像,因为前面没有id,所以表示整体的链接样式.还有就是未访问的链接和已访问的链接一般都是一样的,一样的属性,可以用逗号隔开,使代码简洁,这些我上面都说过了.不懂大家有印象没.
下面做鼠标在链接时的样式
a:hover{
color:#686357;}
整体链接样式的代码
CSS代码
/*整体链接样式*/
/*未访问的链接和已访问的链接*/
a:link,a:visited{
color:#9E988C;}
/*鼠标在链接时的样式*/
a:hover{
color:#686357;}
将上面代码放到涂鸦板保存一下,现在不是大部分颜色都变成我们设置的.
这里提示下,链接样式不单单只有改颜色这一种美化方法,也可以加背景颜色,边框等,有兴趣自己试下,代码上面都出现.
不过底部的链接却不见了,原来我的设置的颜色和背景色混在一起了.现在我们再修改下底部链接的样式.
既然是底部,前面一定得加相应的选择符#footer,前面我们已经用到这过个选择符,我们复制下面,加个文字颜色和链接颜色就行
/*底部设置*/
#footer {
width:880px;
background:#9E9986;}
/*底部文字样式*/
#footer p{
padding:0 10px;
color:#686357;}
/*底部链接样式*/
#footer a:link,#footer a:visited,#footer a:hover{
color:#686357;}
分析:
底部文字样式那边#footer后面为什么要加个p,直接加在底部设置那边不行么?
因为文字部分是在<p></p>里面,校内网已经有设置p样式,所以我们要覆盖他的p样式.padding出现了，大家明白他作用么？不明白？你先去掉padding:0 10px;
保存一下，对比下有和没有的区别就明白了。另有的同学不喜欢#footer那边的文字，你可以在上面隐藏版块那边加个#footer p,这样底下就什么字都没了，你只要加个图片就OK。
CSS代码 到目前为止，你的涂鸦板应该有以下代码
/*整体页面设置*/
body {
color:#9E988C;
padding:0;
margin:0;
background:url(upload/2007_12/071228043573731.gif) repeat;}
/*隐藏版块*/
#logo, #tagline, #copyrightlink, .announcement, #userBlog .more, #utility, #permalink, #sidebar, #reportlink{
display:none}
/*头部图片设置*/
#container{
margin:0 auto;
width:880px;
background:url(http://fm231.img.xiaonei.com/blog/20071026/12/20/A240169491211OXC.jpg) no-repeat;}
/*头部设置*/
#header {
height:400px;
background:none;}
/*内容部分*/
#content {
border:0;
width:860px;
padding:20px 20px;
background:#fff;}
#widebar {
width:880px;
padding:0;
border:0;
background:none;}
/*我的状态样式*/
#userStatus {
margin:0;
padding:10px 0px 10px 10px;}
/*账号信息列设置*/
#userUpdates{
width:640px;}
/*底部设置*/
#footer {
width:880px;
background:#9E9986;}
/*底部文字样式*/
#footer p{
padding:0 10px;
color:#686357;}
/*底部链接样式*/
#footer a:link,#footer a:visited,#footer a:hover{
color:#686357;}
/*整体链接样式*/
/*未访问的链接和已访问的链接*/
a:link,a:visited{
color:#9E988C;}
/*鼠标在链接时的样式*/
a:hover{
color:#686357;}
/*导航条样式*/
#navigation {
border-left:0;
background: #9E988C;}
#navigation ul li{
background-image:none !important;}
#navigation a:link,#navigation a:visited {
color:#fff;
background:#9E988C;}
#navigation a:hover {
background:#686357;}
/*导航子列表样式*/
#navigation ul ul{
background:#9E988C;
border: 1px solid #686357;}
#navigation ul ul a {
color:#fff;
border-bottom: 1px solid #686357;
background:#9E988C;}
#navigation ul ul a:hover {
color:#fff;
background: #686357;}
小节回顾：看到这里你应该要学会这些
知道可以使用margin-left,margin-right调整位置
知道文字美化是分有链接和无链接的
链接有四种状态,而我们常用前三个,第一个和第二个的设置一般是一样的.
--------------------------------------------------------------------------------
因为软考，这几天没更新，今天补上 2007-11-4
通过上面的设置已经有像样轮廓了。下面设置一下h3标题栏，就是最近谁看过余XX的页面、余XX最近登录的好友、余XX的日志。。。这些分左边和右边。
先来美化左边的
/*左边h3样式*/
#userRelations h3{
border:0px;
background:#F4F4F4;}
分析：
到现在为止，上面的应该不用我分析了吧？
再来右边的
/*右边h3样式*/
#userUpdates h3{
border:0px;
background:#F4F4F4;}
分析：
和上面的一样，只是选择符换了，改成右边的。
现在再来看头像下面的链接样式
上面说过的链接有四种状态,大家还记得么,这里再复习下
/*头像下面链接样式*/
#userActions li a:link,#userActions li a:visited{
color:#808080;}
#userActions li a:hover{
color:#808080;
background:#F4F4F4;}
#userActions li{border:0;}
分析：
a:link和a:visited样式是一样的,只设置颜色.
a:hover除了设置颜色外还设置了背景色.
#userActions li{border:0;}是清除边框,大家把上面代码放到涂鸦板上,保存下对比效果就知道了.
现在我们再找找页面还有哪些不协调的地方.
有没有发现日记标题上边框还有蓝色边框痕迹,我们把那边框给去了,顺便改改背景
/*日记标题样式*/
#userBlog .info{
border:0;
background:#F5F5F5; }
再细细查找下,发现"礼物"和"留言栏"那边也有蓝色边框痕迹.同样,一起去掉.
/*礼物标题样式*/
#giftBox .sub-h3{
background:#F4F4F4;
border:0;}
/*留言栏设置*/
#talk .info{
background:#F4F4F4;
border:0;}
/*加宽留言框长度*/
#userTalk #cmtbody{
width:95%;}
/*留言框背景样式*/
#userTalk textarea{
background: url(http://www.bo-u.cn/sc/inputbg.gif) no-repeat;}
/*留言板按钮样式*/
#userTalk .subbutton, #userTalk .inputbutton{
padding:0 5px;
border:0px solid;
background:#0F0F0F}
分析
留言栏相关美化看这里:http://www.bo-u.cn/show-94-1.html
好了,到目前为止,所有颜色都被我们操制了.
下面再做些收尾工作.这篇教程就基本上结束了.
1、好友分布长度限制
/*好友分布长度限制*/
#userFriendUniv .boxcont{
maxheight:1200px;
overflow:hidden; }
分析：
maxheight:1200px;这个是最大宽度有1200px，那超出的部分怎么办？
我们用到overflow; overflow属性值还有auto和scroll。
区别：
auto 如果日记没有超过最大宽度，不显示滚动长，超过就显示；
scroll 不管日记有没有超过最大宽度都显示滚动条；
hidden 就是超过的部分隐藏起来，我们常用这个，因为滚动条会影响美观
这里大家要注意一下，如果限制某个版块的长度和宽度就是用这个代码来实现的。如果你的日记很长，也可以用这个方法来限制你的。代码如下：
/*日记最大宽度控制*/
#userBlog .text{
overflow:auto;
maxheight:500px;
color:#363739;}
还有个小问题就是日记标题的长度。
/*日记标题长度设置*/
#userBlog .info h4{ width:auto;}
好了，如果你能坚持看到这里，对CSS应该有个大致的了解了，我写这篇日记花了4天，分四个小节，最后一节有点赶，如果部分代码看不懂，先把代码放到涂鸦板里保存后刷新自己的页面，前后对比下效果就清楚了。四小节基本上包括了所有美化的步骤了。当然，如果你要做自己有个性的页面，得花一些心思。布局很关键，一个页面的个性基本上就体现在布局，其次是配色。
好了，最后希望大家都能做出自己的个性页面，如果有不明白地方，可以在下面回复。
推荐下本篇文章相关文章
校内网涂鸦美化过程中常见问题汇总 (美化过程中总结的问题)
校内网CSS美化系列:留言板 (留言板相关的详细设置)
校内网CSS美化系列:滚动条 (滚动条相关的详细设置)
校内网涂鸦板-页面全透明代码 (如何让你的内容部分透明,显示出背景)
校内网中如何隐藏不需要的板块 (如果上面的隐藏不方法不明白,直接看这里)
校内网美化过程中常用的工具 (大家常问的颜色代码,可以在这里下载个取色板)
美化过程中常用到的配色图 (配合上面的取色板,就能得想要的颜色代码了)
最后完整的成品代码如下
完整的CSS成品代码 最后完成时间：2007-11-4
/*整体页面设置*/
body {
color:#9E988C;
padding:0;
margin:0;
background:url(upload/2007_12/071228043573731.gif) repeat;}
/*隐藏版块*/
#logo, #tagline, #copyrightlink, .announcement, #userBlog .more, #utility, #permalink, #sidebar, #reportlink{
display:none}
/*头部图片设置*/
#container{
margin:0 auto;
width:880px;
background:url(http://fm231.img.xiaonei.com/blog/20071026/12/20/A240169491211OXC.jpg) no-repeat;}
/*头部设置*/
#header {
height:400px;
background:none;}
/*内容部分*/
#content {
border:0;
width:860px;
padding:20px 20px;
background:#fff;}
#widebar {
width:880px;
padding:0;
border:0;
background:none;}
/*我的状态样式*/
#userStatus {
margin:0;
padding:10px 0px 10px 10px;}
/*账号信息列设置*/
#userUpdates{
width:640px;}
/*底部设置*/
#footer {
width:880px;
background:#9E9986;}
/*底部文字样式*/
#footer p{
padding:0 10px;
color:#686357;}
/*底部链接样式*/
#footer a:link,#footer a:visited,#footer a:hover{
color:#686357;}
/*整体链接样式*/
/*未访问的链接和已访问的链接*/
a:link,a:visited{
color:#9E988C;}
/*鼠标在链接时的样式*/
a:hover{
color:#686357;}
/*导航条样式*/
#navigation {
border-left:0;
background: #9E988C;}
#navigation ul li{
background-image:none !important;}
#navigation a:link,#navigation a:visited {
color:#fff;
background:#9E988C;}
#navigation a:hover {
background:#686357;}
/*导航子列表样式*/
#navigation ul ul{
background:#9E988C;
border: 1px solid #686357;}
#navigation ul ul a {
color:#fff;
border-bottom: 1px solid #686357;
background:#9E988C;}
#navigation ul ul a:hover {
color:#fff;
background: #686357;}
/*左边h3样式*/
#userRelations h3{
border:0px;
background:#F4F4F4;}
/*右边h3样式*/
#userUpdates h3{
border:0px;
background:#F4F4F4;}
/*头像下面链接样式*/
#userActions li a:link,#userActions li a:visited{
color:#808080;}
#userActions li a:hover{
color:#808080;
background:#F4F4F4;}
#userActions li{border:0;}
/*日记标题样式*/
#userBlog .info{
border:0;
background:#F4F4F4;}
/*礼物标题样式*/
#giftBox .sub-h3{
background:#F4F4F4;
border:0;}
/*留言栏设置*/
#talk .info{
background:#F4F4F4;
border:0;}
/*加宽留言框长度*/
#userTalk #cmtbody{
width:97%;}
/*留言框背景样式*/
#userTalk textarea{
background: url(http://www.bo-u.cn/sc/inputbg.gif) no-repeat;}
/*留言板按钮样式*/
#userTalk .subbutton, #userTalk .inputbutton{
padding:0 5px;
border:0px solid;
background:#0F0F0F}
/*好友分布长度限制*/
#userFriendUniv .boxcont{
maxheight:1200px;
overflow:hidden;}
/*日记最大宽度控制*/
#userBlog .text{
overflow:auto;
maxheight:500px;
color:#363739;}
/*日记标题长度设置*/
#userBlog .info h4{ width:auto;}