首页 校内网技巧 校内网涂鸦版代码 校内网美文 校内网教程 校内网背景代码 校内网皮肤 校内网视频代码 校内网CSS 校内网之星
  您现在的位置： 续缘校内网 >> 续缘校内 >> 校内网教程 >> 缘正文
教程:校内网最新CSS美化教程
作者：admin    缘来源：本站原创    点击数：    更新时间：2008-1-1    

这次校内网关闭涂鸦板的html代码,导致很多朋友的涂鸦代码失效.

这里简单说下关闭html标签有哪些影响.

除了<style type="text/css"></style>包围起来的代码外,其他的都会被转义掉.

所以不能添加背景音乐,不能插入新图片挂件,不能使用透明特效的FLASH,不能添加公告栏及所有JS代码...

另,部分同学问能原先的HTML代码能不能转成CSS,我只能很抱歉对大家说"不能"

不过不要泄气,会CSS的话,同样能做出来精彩效果.

下面我会详细的说明，并一步步教大家如何美化。如果不明白处，请在下面留言。
注意此教程我写得很详细,主要是照顾那些刚接触CSS有同学，所以内容相当多，劳你耐心看下来，对你是帮助的。

另本人也没系统学过CSS，也是慢慢积累的，如有错误欢迎大家指导更正。

校内网粗略布局结构如下:(颜色相同为同一层次)

<body id="profilePage">
  <div id="container">
    <div id="header"></div>
    <div id="sidebar"></div>
    <div id="widebar">
      <div id="content">
        <div id="userRelations"></div>
        <div id="userStatus"></div>
      </div>
    <div id="footer"></div>
  </div>
</body>

校内网我们可以简单的分成5部分,常用美化的部分

#head

#content

 #footer

#userRelations

#userUpdates

头部

内容部分

底部

左栏(头像那一列)

右栏(账号信息那一列)

 

 

好了,如果让你来美化,你第一步会想到什么?

 

加个个性背景图片,对么?

我们随便找一个,比如这个图片(url:/upimg/allimg/071026/2218010.gif)

大小: 4.17 K 尺寸: 143 x 143 浏览: 9 次 点击打开新窗口浏览全图

找到图片后,怎么写代码呢?

小提示：找到的图片一定要再上传到校内网去，这样可以保证图片的有效性；而且切记只能用在写日记那里的上传图片功能，这样图片不会变形。

 

 

把上面代码放到涂鸦板中去,保存一下,看看有没有效果.

分析:

body 为什么是body呢,因为是整体页面的背景,你对比下校内网粗略布局结构就知道.
background 这句是有格式的background:url(图片地址) repeat;  repeat是完全平铺的意思,因为图片比较小张,如果是壁纸,那图片够大了,可以用no-repeat替换,如果背景图片是细长型的,那就水平平铺,用repeat-x替换.细窄的就用垂直平铺repeat-y;
如果替换替换如果你图片只有屏幕那么大,那你还可以固定你的背景,加个fixed就OK,格式是background:url(图片地址) no-repeat fixed;

小节回顾：看到这里你应该要学会这些

  1. 了解校内网粗略布局结构
  2. 知道找到图片后要在日记那里上传
  3. 初步了解CSS的基本格式,如background是设置背景图片用的
  4. 能动手给页面加个背景图片(完全平铺,水平垂直平铺,固定)

 

加完背景图片后,下一步要做什么? 

先把没用的部分去掉,校内网LOGO,头部左边我的同学,我的世界, 隐私设置,帮助,退出,我的页面,我的班级 ...等链接 还有就是底部将如下链接发给朋友...

这里插入CSS基本语法

一个样式的语法由三部分构成：Selector(选择符)，属性(Property)，属性值(Value)

比较你要修改页面整体文字颜色为黑色，你可以使用以下代码

body{
color:#000
}

从上面那个例子你可以看出什么？

body = 选择符
color = 属性
#000 = 属性值

很显示body是整体页面的意思；color是颜色的意思；#000是黑色的意思。
整句翻译下来就是让整体颜色的颜色设置成黑色。

那么美化时要如何查找相应的选择符呢?

这里我举个例:比如找校内网LOGO的选择符

打开我的页面 -> 对空白地方右键 -> 查看源文件 就弹出文本编辑器 (这个方法很常用,偷人代码也是这样弄的)

我们搜索校内网LOGO图片的地址(/yuan/UploadFiles_7498/200801/20080101203943722.gif)

校内网LOGO图片的地址知道怎么获取么?对着那个校内网LOGO图片右键 -> 属性 -> 弹出属性框,你就可以在地址(URL)那一栏看到地址了.这个方法可以查看所有图片的地址.弹出文本编辑器用完不要关掉，整个美化过程中都要用到

找到如下代码

<h1 id="logo"><a href="http://home.xiaonei.com/Home.do" title="校内网"><img src="/yuan/UploadFiles_7498/200801/20080101203943722.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}/*这个错误的*/

但是这还不够，因为它是错的，正确如下

#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}

这样就可以隐藏那些非常不必要的元素了。 

这时涂鸦板里有这些代码
  1. /*博友网原创,版权所有,转载注明出处 http://www.Bo-U.cn*/  
  2. body { 
  3. padding:0;
  4. margin:0; 
  5. background:url(/upimg/allimg/071026/2218010.gif) repeat;}   
  6.   
  7. /*隐藏版块*/    
  8. #logo, #tagline, #copyrightlink, .announcement, #userBlog .more,  #utility, #permalink, #sidebar, #reportlink{
    display:none}

 

小节回顾：看到这里你应该要学会这些

  1. 会查看图片的地址(URL)
  2. 会查看源代码并懂得使用搜索
  3. 掌握CSS的格式
  4. 知道display:none可以隐藏版块
  5. 了解查找选择符的方法并明白其含义
  6. 知道CSS有个继承的功能

隐藏完后,只剩下骨架了,现在我们要重新布局了

怎么布局,看大家喜欢,自己可以先在纸上画好框架,规化好各部分长度.

校内网那瘦不啦叽的布局,给一种感觉:小气,不过他是为要照顾800X600尺寸的用户,不过大家现在应该没有用那么小的显示器了,我们就做适合1024X768的.

很多同学喜欢在头部放个超大的图片.

我们找这一张图片/yuan/UploadFiles_7498/200801/20080101203944382.jpg

用图片处理工具裁减成880X400

/yuan/UploadFiles_7498/200801/20080101212745796.jpg

然后用下面代码来实现

/*头部图片设置*/
#container{
margin:0 auto;
width:880px;
background:url(/yuan/UploadFiles_7498/200801/20080101212745796.jpg) no-repeat;} 

放到涂鸦板,保存一下,看看效果,是不是错位很严重?

这是因为你#header大小没有设置，再去掉头部背景图片

/*头部设置*/
#header {
height:380px;
background:none;}

这个400px要根据你裁减的图片宽度

搞定头部，内容部分不协调，我们设置设置长宽和背景色

/*内容部分*/
#content {
border:0;
width:840px;
padding:20px 20px;
background:#fff;}

加上这个后,我们发现内容部分错位,修改下widebar宽度

#widebar {
width:880px;
padding:0;
border:0;
background:none;}

然后发现账号信息栏宽度太小,感觉很空洞.于是我们加宽它。

/*账号信息列设置*/
#userUpdates{
width:640px;}

小提示:如果你希望头像列和账号信息列左右对调。可以用float；
/*账号信息列设置*/
#userRelations{
float:right;}

/*账号信息列设置*/
#userUpdates{
width:640px;
float:left;}

最后只剩下底部了.

/*底部设置*/
#container #footer {
width:880px;
background:#9E9986;}

底部也可以用图片来修饰，我没找到合适的，就用颜色代替。

 

 

最后代码为 ,大家复制到涂鸦板保存看看效果.

CSS代码
  1. /*博友网原创,版权所有,转载注明出处 http://www.Bo-U.cn*/      
  2. body {    
  3. padding:0;   
  4. margin:0;     
  5. background:url(/upimg/allimg/071026/2218010.gif) repeat;}       
  6.       
  7. /*隐藏版块*/        
  8. #logo, #tagline, #copyrightlink, .announcement, #userBlog .more,  #utility, #permalink, #sidebar, #reportlink{    
  9.  display:none}   
  10.   
  11. /*头部图片设置*/    
  12. #container{    
  13. margin:0 auto;   
  14. width:880px;   
  15. background:url(/yuan/UploadFiles_7498/200801/20080101212745796.jpg) no-repeat;}    
  16.     
  17. /*头部设置*/  
  18. #header {   
  19. height:400px;   
  20. background:none;}   
  21.   
  22. /*内容部分*/  
  23. #content {   
  24. border:0;   
  25. width:860px;   
  26. padding:20px 20px;   
  27. background:#fff;}   
  28.   
  29. #widebar {    
  30. width:880px;    
  31. padding:0;    
  32. border:0;    
  33. background:none;}    
  34.   
  35. /*账号信息列设置*/    
  36. #userUpdates{   
  37. width:640px;}   
  38.   
  39. /*底部设置*/  
  40. #container #footer {   
  41. width:880px;   
  42. background:#9E9986;}  

 

复制到涂鸦板,到现在为止大体效果已经出来，只要再细节处理就OK

小节回顾：看到这里你应该要学会这些

  1. 掌握校内网层次结构
  2. 了解美化过程的步骤
  3. 知道左右位置对调是用float来控制

细节处理 

通过上面的美化好，整个框架已经出来了，但是还不是那么令人满意。

头像和账号信息列边距太近，我们修改成下面，下划线部分为新增。

/*头像列设置*/
#userRelations{
margin-left:10px;}

/*账号信息列设置*/
#userUpdates{
width:610px;
margin-right:20px;}

设置下有多少人看过那部分

#userStatus {
margin:0;
padding:10px 0px 10px 10px;}

顶部导航

/*导航链接样式*/
#navigation {
width:auto;
background: transparent; 
border:0;
margin: 0px;   
padding: 0px 0px 0px 0px;
width:80px; } 

#navigation ul, #navigation li{   
margin: 0;   
padding: 0;   
display: inline;   
list-style-type: none;
background-image:none !important;} 
  
#navigation a:link, #navigation a:visited{   
float: left;   
line-height: 14px;   
font-weight: bold;   
margin: 3px 3px 3px 3px;   
text-decoration: none;   
color: #636363;   
border-bottom: 4px solid transparent;   
padding-bottom: 2px;}  

#navigation a:link#current, #navigation a:visited#current, #navigation a:hover{   
border-bottom: 4px solid #ff8600;   
padding-bottom: 2px;   
background: transparent;   
color: #252525;}
#navigation a:hover{   
color: #232D37;}

更新中....

 

分析:

margin是边距的意思，就像是房子和房子之间的距离。后面带四个数值，分别表示距上，距右，距下，距左的距离，很好记，顺时间的。数据可以用负值。比如上面的-10px,表示head层超出container层10px,如果是正数，就表示表示head层在container层往里10px处;auto表示自动。
padding是填充距的意思,就像是房子里桌子和墙壁的距离,注意是房子里 
width和height分别表示长度和宽度。
大家是否发现background后面多了个top的值？这个表示位置用的，大家了解一下就行。
border是边框设置,我们不要边框,就用none.
至于#footer前面为什么要加#container ,我也不懂,谁来帮忙解释下.
缘录入：admin    责任编辑：admin 
  • 上一个缘：

  • 下一个缘：
    • 热门校内网代码
     
    关于续缘校内网 | 广告联系 | 续缘免责声明 | 站长统计
    Copyright 2007-2008 All Rights Reserved Powered by
    续缘校内网-校内网代码交流站
    续缘校内网：校内网代码，校内网涂鸦板代码，校内网教程等校内网相关产品集中地