百度空间 | 百度首页 
 
查看文章
  
CSS全篇代码的释意详细讲解（＋相关技术）
2007年01月11日 22:27

声明：本模板最初采用《落花轩》代码！！

一一本空间打算公开本《百度济源》空间的全部代码，以为以此作为基础，并加以对此段代码给予详细讲解。

一一因本教程涉及繁多，并须详细加以注解，还会外加相关技术（并希望各位提供对其讲解处的不同技术或效果）各处不能为各位一一制作详细教程，只有暂在网上摘录（愿广大网友涌跃提供相关优秀教程）。也非常渴望各大高手们给予帮助！！

本空间代码提供如下：
===============================================================================

/*
=== hi.baidu.com/liujy StyleSheet File ====================================
Style Name: 百度济源-遍荷 
Version: 2.0 
Author: 落花轩（原著） 百度济源（略加修改） 
Last Update: 2006-12-08 19:18:30
==============================================================

/* 代码段开始 */（/* 代码段开始 */可加在自己CSS代码中作为标注以备忘记）

/* 背景设置 */(请参照自定设置背景色的透明度、模版透明效果与搜索模版的改造、在CSS中各处加图片的各种方法对背景进行个性化的设置）
body/* 整个空间页面 */{background-color:#000}

/* 通常状态下的鼠标样式：*/（请参照改变我们的鼠标效果（样式）\把QQ空间里的鼠标弄到百度空间里对鼠标进行个性化的设置，本文并提供了详细的鼠标样表与设置教程）
body{background:#000;CURSOR:url('http://img.xiaonei.com/photos/20060712/1630/orig152413.cur')} 
/* 移到链接上的鼠标样式：*/
a:hover/*在链接上的 */{CURSOR:url('http://img.xiaonei.com/photos/20060713/1430/orig62252.ani')} 

/* 链接按钮式下陷：*/
a:hover/*在链接上的 */ {text-decoration:underline; position:relative; left:1px; top:1px; clip:rect(  );} 

#layout{margin-top:0px;}
#layout td.c3t1{background:#;width:20%;padding-left:40px;border-left:1px solid #99cc00;}

/*首页第一列*/
#layout td.c3t2{width:0px}
#layout td.c3t3{background:#D3E699;width:20%;border-left:1px solid #99cc00;}

/*首页第二列*/
#layout td.c2t1{background:url(http://hiphotos.baidu.com/liujy/pic/item/204f43ed2c3b9ed5b21cb121.jpg) no-repeat bottom;padding-left:50px;width:60%!important;width:70%;border-right:1px solid #99cc00;}
#layout td.c2t2{width:0px}
#layout td.c2t3{width:30%}
#layout td.c3t4{width:0px;}
#layout td.c3t5{background:url(http://hiphotos.baidu.com/liujy/pic/item/204f43ed2c3b9ed5b21cb121.jpg) no-repeat bottom ;right:50px;width:40%;border-left:1px solid #99cc00;border-right:1px solid #99cc00;}

/*首页第3列*/(请参照如何做一个漂亮的导航图标）
#header /*主体部分*/{height:90px;BACKGROUND: url(http://hiphotos.baidu.com/liujy/pic/item/2dd16959cb5abe2b2934f011.jpg) #8DBB00 no-repeat left top ; }
#header DIV.lc/* 左背景图 */ { }/*头部左侧背景*/ 
#header DIV.rc/* 右背景图 */ { }/*头部右侧背景*/ 
#header div.tit/* 空间名称 */{top:20px;left:105px;line-height:30px;font-size:28px;font-family:黑体}/*头部标题文字*/ (请参照更换你空间里的标题栏）
#header div.tit a.titlink/* 空间名称链接 */{color:#FFFFFF;text-decoration:none}
#header div.tit a.titlink:visited/* 访问过的 */{color:#FFFFFF;text-decoration:none}
#header div.desc/* 空间简介 */{top:51px;left:109px;color:#407200;font-size:13px}

#tabline/* TAB菜单下方的横线 */{display:none;top:86px;background-color:#FFFFFF}

/* 导航栏设置 */
#tab/* TAB菜单主体 */{padding-left:0px;top:74px;background:url(http://hiphotos.baidu.com/liujy/abpic/item/49e0b95184741019377abe0f.jpg) repeat-x top left #fff}
#tab a.on, #tab a.on:link, #tab a.on:visited/* TAB选中状态 */{background-color:#FFFFFF;color:#000;font-size:12px;}
#tab span/* TAB与TAB之间的分割符“|”{ */{margin-top:-2px;color:#000;font-size:12px}
#tab a:link/* TAB未选中状态 */{color:#000;text-decoration:none;font-size:12px}
#tab a:hover/* 整个空间页面 */{background:#CFFF88;text-decoration:none;font-size:12px}
#tab a:visited/* 访问过的 */{color:#000;text-decoration:none;font-size:12px}

/*二级导航菜单*/ 
#tab2设置TAB菜单主体{background:#fff}
#tab2 spanTAB选中状态{color:#000000;font-size:12px;font-weight:bold}
#tab2 a未选中状态{font-size:12px}
#tab2 a:link{color:#000}
#tab2 a:visited/* 访问过的 */{color:#000}

/* 导航栏以下的主体部分背景 */
内容区域.stage（TAB菜单与版权信息之间的区域）{margin-top:-5px;background:url() no-repeat bottom right #FFF}
 （请参照模板中其它模块的个性定意、各种日历,时钟和显IP图片来完成此模块的设置，暂只有加入图片、显IP日历）
#comm_info 主体 {color:#333333;font-family:Arial;text-align:left}
#comm_info div.line /* 分界线（插入图片效果） */ {margin-top:5px;line-height:85px;background:url(http://static.flickr.com/99/290467485_1ea4ea0331_m.jpg) no-repeat bottom center; padding-bottom: 40px; margin-bottom:10px}
#comm_info a /*链接*/ {color:#3399CC}
#pvshow/*访问变量字体属性*/{font-family:Georgia;font-size:14pt;color:#FF3333;}

 

/* 模块 其它区域（即访问量等信息） */

页码区域
#page 主体 {height:30px;font-size:14px;font-family:Arial;text-align:center}
#page span 当前页码（不可点击）{padding:3px;color:#000000;font-size:14px;font-weight:bold}
#page a.pc 上一页和下一页 {color:#3399CC;font-size:14px;font-weight:bold}
#page a.pc:visited/* 访问过的 */{color:#3399CC}
#page a.pi 页码（可点击）{padding:3px;color:#3399CC;font-size:14px}
#page a.pi:visited/* 访问过的 */{color:#3399CC}

模块

.mod{background:#;margin-bottom:0px;}
.modhandle{cursor:move}
.modth 模块标题栏主体 {background:url(http://hiphotos.baidu.com/liujy/pic/item/cfd1cf5c430f4642faf2c050.jpg) no-repeat top left #fff;height:22px;border-top:1px solid #99cc00;border-bottom:1px solid #99cc00;padding:5px 0px 5px 2px}
.modhead{padding:4px 4px 0 5px}
.modopt 模块操作区（如写新文章）{padding:4px 4px 0 0}
.modtit 模块标题区（如文章列表）{color:#000;font-size:15px;font-weight:bold}a.modtit{color:#FFFFFF}a.modtit:visited/* 访问过的 */{color:#FFFFFF}
.modtitlink{color:#FFFFFF;font-size:12px;font-weight:bold}a.modtitlink{color:#FFFFFF;text-decoration:none}a.modtitlink:visited/* 访问过的 */{color:#FFFFFF;text-decoration:none}a.modtitlink:hover{color:#FF5100;text-decoration:underline}
.modact 操作文字链接（如文章列表）{color:#FFFFFF;font-size:12px}a.modact:link{color:#FFFFFF}a.modact:visited/* 访问过的 */{color:#FFFFFF}

/** 模块 主体内容 **/
.modbox 模块内容区 {padding:5px 5px 0 7px;background:#}

/** 模块 标题栏目 **/
.modtl 模块左上角背景 {}
.modtc 模块中上背景 {}
.modtr 模块右上角背景 {}
.modbl 模块左下角背景{}
.modbc 模块中下背景 {}
.modbr 模块右下角背景 {}
.modlabel{}

/** 模块 文章区域 **/
#m_blog{background:url() no-repeat bottom right;}

#m_blog div.tit 文章标题 {text-indent:25px;background:url(http://hiphotos.baidu.com/liujy/pic/item/3ca719380774eef3b311c750.jpg) no-repeat center left;font-size:12px;font-weight:bold}
#m_blog div.tit a 文章标题链接 {color:#378822;font-size:12px;font-weight:bold}
#m_blog div.tit a:visited/* 访问过的 */{color:#378822}
#m_blog div.date/* 文章发表日期 */{font-family:Georgia;text-align:right;color:#666666}
#m_blog div.cnt 文章内容 {color:#333333;line-height:20px;font-size:14px}
#m_blog div.more{margin:5px 0 5px 0}
#m_blog div.more a 阅读全文链接 {color:#6F6F6F;font-size:14px;text-decoration:none;}
#m_blog div.more a:visited/* 访问过的 */{color:#6F6F6F;text-decoration:none;}
#m_blog div.opt 文章操作区（如编辑、评论等） {margin-top:-18px;color:#666666;font-size:12px;text-decoration:none;}
#m_blog div.opt a 文章操作链接 {color:#3399CC;font-size:12px;text-decoration:none;}
#m_blog div.opt a:visited/* 访问过的 */{color:#3399CC;text-decoration:none;}
#m_blog div.line 分界线 {margin-top:5px;line-height:10px;border-top:1px dotted #99cc00}
#m_blog div.none 无文章提示信息 {padding:100px 0 100px 0;color:#333333;font-size:14px}

/** 模块 个人档案 **/
#m_pro a 链接 {color:#3399CC}
#m_pro a:visited/* 访问过的 */{color:#3399CC}
#m_pro div.image 个人头像 {text-align:center}
#m_pro div.act 操作区（如加为好友、发送消息） {margin-top:10px}
#m_pro div.user 用户名 {margin-top:10px;color:#333333;font-size:12px;font-weight:bold}
#m_pro div.desc 用户简介 {color:#333333;font-size:12px}
#m_pro div.line 分界线 {margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}
#m_pro td{color:#333333;line-height:24px;font-size:14px}

/** 模块 相册 **/
#m_album div.image 照片 {text-align:center}
#m_album div.page{color:#000;font-size:12px;text-align:center}
#m_album div.page a{color:#000;font-size:12px}
#m_album div.page a:visited/* 访问过的 */{color:#000}
#m_album .phpage{margin-top:10px;padding-bottom:5px;text-align:center}

/** 模块 友情链接 **/（请参照各模块添加滚动条实例 + 参数详解 + 百度官方"颜色选择器"其它模块皆可）
#m_links{
scrollbar-face-color: #D3E699; 
scrollbar-shadow-color: #fff; 
scrollbar-highlight-color: ; 
scrollbar-3dlight-color: #D3E699; 
scrollbar-darkshadow-color:#D3E699; 
scrollbar-arrow-color:#D3E699; 
scrollbar-base-color: #D3E699; 
scrollbar-track-color: #D3E699; 
overflow-y:auto;height:280px; /* 淡绿色区为滚动条 */

#m_links div.item 子项 {color:#333333;font-size:12px}
#m_links div.item a 名称（链接） {color:#378822;font-size:12px;}
#m_links div.item a:visited/* 访问过的 */{color:#378822}
#m_links div.line 分界线 {margin-top:2px;line-height:5px;border-top:0px solid #D2E9F4}

/* 空间教程，自定模块1 */
#m_mylink1{
scrollbar-face-color: #D3E699; 
scrollbar-shadow-color: #fff; 
scrollbar-highlight-color: ; 
scrollbar-3dlight-color: #D3E699; /* 底色 */
scrollbar-darkshadow-color:#D3E699; 
scrollbar-arrow-color:#D3E699; 
scrollbar-base-color: #D3E699; 
scrollbar-track-color: #D3E699; 
overflow-y:auto;height:280px; 
} /* 淡绿色区为滚动条 */
#m_mylink1 div.item{text-indent:30px;background:url(http://hiphotos.baidu.com/liujy/pic/item/967a890a87eca93fb0351d55.jpg) no-repeat top left;color:#6F6F6F;font-size:12px}
#m_mylink1 div.item a{color:#378822;font-size:12px;text-decoration:none}
#m_mylink1 div.item a:visited/* 访问过的 */{color:#378822}
#m_mylink1 div.line{margin-top:5px;line-height:8px;border-top:0px solid #3E8F3E}

/* My Favorites，自定模块2 */
#m_mylink2{
scrollbar-face-color: #fff; 
scrollbar-shadow-color: #D3E699; 
scrollbar-highlight-color: ; 
scrollbar-3dlight-color: #D3E699; 
scrollbar-darkshadow-color:#D3E699; 
scrollbar-arrow-color:#D3E699; 
scrollbar-base-color: #D3E699; 
scrollbar-track-color: #fff; 
overflow-y:auto;height:200px; 
} /* 淡绿色区为滚动条 */
#m_mylink2 div.item{background:url(http://hiphotos.baidu.com/liujy/pic/item/7af110d8230aa43432fa1c55.jpg) no-repeat top left;color:#6F6F6F;font-size:12px}
#m_mylink2 div.item a{text-indent:18px;color:#378822;font-size:12px;text-decoration:none;}
#m_mylink2 div.item a:hover/*在链接上的 */{color:#3399CC;text-decoration:underline;}
#m_mylink2 div.item a:visited/* 访问过的 */{color:#378822}
#m_mylink2 div.line{margin-top:2px;line-height:6px;border-top:0px solid #D2E9F4}

/* Notice!，自定模块3 */
#m_mylink3 div.item{background:url(http://hiphotos.baidu.com/liujy/pic/item/e323b53e110126fb838b1355.jpg) no-repeat top left;color:#6F6F6F;font-size:12px}
#m_mylink3 div.item a{text-indent:18px;color:#FF0000;font-size:12px;text-decoration:none;}
#m_mylink3 div.item a:hover/*在链接上的 */{color:#3399CC;text-decoration:underline;}
#m_mylink3 div.item a:visited/* 访问过的 */{color:#FF0000}
#m_mylink3 div.line{margin-top:2px;line-height:6px;border-top:0px dotted #999999}

/* 素材工具，自定模块4 */
#m_mylink4{
scrollbar-face-color: #fff; 
scrollbar-shadow-color: #D3E699; 
scrollbar-highlight-color: ; 
scrollbar-3dlight-color: #D3E699; 
scrollbar-darkshadow-color:#D3E699; 
scrollbar-arrow-color:#D3E699; 
scrollbar-base-color: #D3E699; 
scrollbar-track-color: #fff; 
overflow-y:auto;height:200px; 
} /* 淡绿色区为滚动条 */

#m_mylink4 div.item{color:#6F6F6F;font-size:12px}
#m_mylink4 div.item a{color:#378822;font-size:12px;text-decoration:none}
#m_mylink4 div.item a:visited/* 访问过的 */{color:#3399CC}
#m_mylink4 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

/* 文章分类 */
#m_artclg div.item 子项 {left:30px;color:#666666;font-size:10px}
#m_artclg div.item a 分类名称（链接）{ color:#333;font-size:10px}
#m_artclg div.item a:hover/*在链接上的 */{color:#ff3333;}
#m_artclg div.item a:visited/* 访问过的 */{}
#m_artclg div.line 分界线 {margin-top:2px;line-height:5px;border-top:0px solid #D2E9F4}

/** 模块 文章存档 **/
#m_filed div.item{color:#666666;font-size:12px}
#m_filed div.item a{color:#555555;font-size:12px}
#m_filed div.item a:visited/* 访问过的 */{color:#555555}
#m_filed div.line{margin-top:2px;line-height:6px;border-top:0px solid #D2E9F4}

/** 模块 最新评论 **/
#m_comment{
scrollbar-face-color: #fff; 
scrollbar-shadow-color: #D3E699; 
scrollbar-highlight-color: ; 
scrollbar-3dlight-color: #D3E699; 
scrollbar-darkshadow-color:#D3E699; 
scrollbar-arrow-color:#D3E699; 
scrollbar-base-color: #D3E699; 
scrollbar-track-color: #fff; 
overflow-y:auto;height:200px; 
} 
#m_comment div.item 子项 {text-indent:20px;background:url(http://hiphotos.baidu.com/liujy/pic/item/88704e100324ddfdc2ce7957.jpg) no-repeat top left;color:#333333;font-size:12px}
#m_comment div.item a 发表人（链接） {color:#3399CC;font-size:12px}
#m_comment div.item a:visited/* 访问过的 */{color:#3399CC}
#m_comment div.item a.cnt 评论摘要（链接） {color:#333333;font-size:12px;text-decoration:none}
#m_comment div.item a.cnt:visited/* 访问过的 */{color:#333333;text-decoration:none}
#m_comment div.item a.cnt:hover/*在链接上的 */{color:#333333;text-decoration:underline}
#m_comment div.line 分界线 {margin-top:5px;line-height:10px;border-top:1px dotted #99cc00}

/* 相册列表  */
#m_albumlist div.note{color:#333333;font-size:14px}
#m_albumlist div.desc 简介 {margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:14px}
#m_albumlist div.none 无照片提示信息 {padding:100px 0 100px 0;color:#333333;font-size:14px}
#m_albumlist div.line 分界线 {margin-top:10px;line-height:16px;border-top:1px solid #D2E9F4}
#m_albumlist div.tit 照片标题 {margin:6px 0 7px 0;color:#333333;font-size:14px}
#m_albumlist div.tit a 照片标题链接 {color:#3399CC;font-size:14px}
#m_albumlist div.tit a:visited/* 访问过的 */{color:#3399CC}
#m_albumlist span.count 照片数量 {color:#666666;font-size:12px;font-weight:bold}
#m_albumlist span.size 照片尺寸 {color:#999999;font-size:12px;font-family:Arial}
#m_albumlist a.act 操作区链接（如编辑、删除） {color:#3399CC;font-size:12px}
#m_albumlist a.act:visited/* 访问过的 */{color:#3399CC}
#m_albumlist a.page 页码链接 {color:#0000CC;font-size:14px}
#m_albumlist a.page:visited/* 访问过的 */{color:#0000CC}
#m_albumlist td.image{padding:5px;border:1px solid #999999;background:#FFFFFF}

好友列表
#m_albumlist .phbox{margin-top:15px;margin-left:15px}
#m_albumlist .phbox .phpage{color:#636363;font-size:14px}
#m_albumlist .phbox .phinfo{margin:6px 0 2px 0;color:#636363;font-size:12px}
#m_albumlist .phbox .phimg{margin-bottom:10px}

/* 好友列表 */
#m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px}
#m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#F2F2F2;font-size:14px}
#m_friend div.user{margin-top:4px;color:#333333;font-size:12px}
#m_friend div.user a{color:#3399CC;font-size:12px}
#m_friend div.user a:visited/* 访问过的 */{color:#3399CC}
#m_friend div.line{margin-top:10px;line-height:16px;border-top:1px solid #D2E9F4}

/*设置访问统计、模板设置*/
#m_setting a 链接 {color:#3399CC}
#m_setting a:visited/* 访问过的 */{color:#3399CC}
#m_setting 主体 {line-height:22px;color:#333333;font-size:14px}
#m_setting img.sel 模板预览图（选中状态） {border:4px solid #FFDB7B}
#m_setting img.unsel 模板预览图（未选中状态） {border:1px solid #D2D2D2}
#m_setting span.tit 模板标题名称 {font-size:14px}
#m_setting span.usr 作者名 {color:#666666}
#m_setting div.sel “当前模板”文字 {padding-top:6px;font-size:14px;font-weight:bold}
#m_setting div.line 分界线 {margin-top:20px;line-height:16px;border-top:1px solid #D2E9F4}

/*系统公告*/
#m_sysinfo a 链接 {color:#3399CC}
#m_sysinfo a:visited/* 访问过的 */{color:#3399CC}
#m_sysinfo 主体 {line-height:22px;color:#333333;font-size:14px}
#m_sysinfo span.new 最新 {color:#FF0000;font-size:10px;font-family:Arial}
#m_sysinfo span.date 发布时间 {color:#666666;font-size:14px}

/** 基本选项 **/
#m_setbase 主体 {color:#333333;font-size:14px}
#m_setbase td{color:#333333;font-size:14px}
#m_setbase div.line 分界线 {margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

/** 网友评论 **/(请参照网友评论区的详细设置)
#in_comment 主体 {width:710px}
#in_comment div.tit 标题 {margin-bottom:12px;color:#333333;font-size:14px;font-weight:bold}
#in_comment div.user 发表人名 {margin-bottom:6px;color:#333333;font-size:12px}
#in_comment div.user a 发表人名（链接） {color:#3399CC;font-size:12px}
#in_comment div.user a:visited/* 访问过的 */{color:#3399CC}
#in_comment div.user span.date 发表时间 {color:#666666;font-size:12px}
#in_comment div.desc 评论内容 {color:#333333;font-size:12px}
#in_comment div.line 分界线 {margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}
#in_send div.tit 发表评论（标题） {margin:10px 0 10px 0;color:#333333;font-size:14px;font-weight:bold} 

/* DIY播放器控制条：*/（请参照无需上传—在线编辑歌曲播放列表的网站为音乐加播放列表）
#phx{FILTER:Alpha(Opacity=30,FinishOpacity=36,Style=0,StartX=20,StartY=40,FinishX=0,FinishY=0)gray(red);WIDTH: 448px;HEIGHT:60px}

/* 在评论区加背景 */
#spBlogCmtText {
border: 1px solid #4A9358;
background:url(http://aycu35.webshots.com/image/7114/2001505337324723619_rs.jpg) no-repeat top center;
background-attachment: fixed;
}
#spBlogCmtURL {
border: 1px solid #4A9358;
}
#spBlogCmtor {
border: 1px solid #4A9358; 
} 

/* 代码段结束 */

===============================================================================
暂没作完，刚刚开始，正在完善中……


类别：⑧ 空间教学 | 添加到搜藏 | 浏览() | 评论 (3)
 
最近读者：
 
网友评论：
1
2007年01月11日 23:13 | 回复
☆．∴★∵★ * ☆
 
2
2007年01月12日 18:18 | 回复
很好
 
3
2007年01月12日 21:51 | 回复
我本善良,播下善良的种子,一定会有美好的收获! 很高兴和您做朋友,无论到任何时候人心都应该向善.都该保持真诚.
 
发表评论：
姓　名：
网址或邮箱： (选填)
内　容：
验证码： 请点击后输入四位验证码，字母不区分大小写
      

     

©2009 Baidu