打造个性化 空间主页 主页模板CSS代码解析

打造个性化 空间主页 主页模板CSS代码解析 打造个性化 空间主页 主页模板CSS 代码解析 打造个性化"空间主页"--主页模板CSS代码解析2010-04-26 04:17 P.M.面对一大片陌生的网页源代码，起初也感到犯憷--不知从何下手。后来亲自动手改过几个，慢慢也就熟悉了。事情往往都是这样--万事开头难。但到熟悉的时候，一切又都变得得心应手了。 下面，根据本人实践经验，简要介绍打造个性化的"空间主页"时，经常会遇到的8个问题。这些全系个人实践心得，企盼与大家共同探讨。 第一，如何查看网页的模板源代码? 在浏览的网页上，鼠标右键点击"查看源文件"，即出现一个文本代码--但是，这并不是这个网页"模板"的源代码。 要查看这个网页模板(为叙述方便，先以本网页为例吧)的源代码，首先要找到代码中的 "href="/guoguo6688/css/item/75f3853e7efa77fa828b139f.css""这一行。然后，将/css/item/75f3853e7efa77fa828b139f.css复制到该网页的地址栏之后，点击Enter键--就会出现一片乱码:这，就是这个网页的"模板源代码"。 第二，如何在自己的空间创建一个新模板? 登陆自己的空间后，点击设置/模板设置/创建新模板，即跳出一个源代码文本--这是百度空间"默认模板"的CSS代码。 首先，要把默认的CSS代码全部清空;然后，将上述"乱码"全部复制粘贴到此处，点击"预览"即出现了以此模板为框架的自己空间;最后，点击"保存修改"即生成了一个新模板，以后自己可随时调用。 第三，如何调用"页头"合成一个自己满意的新模板? 合成一个自己满意的模板，前提有两个:首先，对自己已经创建的模板，除"页头"之外的主体是满意的;其次，准备调用的另一网页"页头"不仅要自己满意，而且预计会与已经创建的模板主体相得益彰、珠联璧合。 合成方法其实很简单:按照第一、第二所述，找到准备调用页头的网页模板CSS中的#header{height:205px;background:#000 url(no-repeat top right}，并将其中的图片链接(黄色部分)拷贝覆盖到已创建的模板中的相应位置，点击"预览"即出现了以此模板为框架的自己空间内容，点击"保存修改"即生成了又一个新模板，以后自己可随时调用。 第四，如何调整空间主页的"空间名称"设置? CSS中的"空间名称"项--#header div.tit #header div.tit a.titlink 其中-- 字体大小设置项--FONT-SIZE 左边距设置项--LEFT 排列高度设置项--LINE-HEIGHT 字体设置项--FONT-FAMILY 顶距设置项--TOP --按照自己意愿，设置以上选项后面的数字，直到满意为止。 附注:在以下的设置中，凡是与已经解析的CSS，均不再赘复。 第五，如何调整空间主页的"空间简介"设置? CSS中的"空间简介"项--#header div.desc 第六，如何调整空间主页的"个人档案"设置? CSS中的"个人档案"项-- #m_pro div.act--操作区(如加为好友、发送消息)#m_pro div.user--用户名#m_pro div.desc--用户简介 第七，如何调整空间主页的"文章区域"设置? CSS中的"文章区域"项-- #m_blog div.tit a--文章标题链接#m_blog div.date--文章发表日期#m_blog div.opt--文章操作区(如编辑、评论等) 第八，如何调整空间主页的"日历"设置? 可把以下一段代码放到CSS最后，并根据自己爱好进行修改-- *日历模块*/div#cals{background:none;border:none;text-align:center;width:70%;padding:2px}/*日历主体背景,边框 */div#cals.cal_body,#cals.cal_mth{font-family:Arial;font-size:12px;width:100%;}/*除年月控制器外的日期部分,包括周和一般日期 */div#cals.cal_yr table{width:30px}/*年,月表格*/div#cals.cal_yr td{font-size:12px;color:#6B1AE6;background:none;padding:1px;white-space:nowrap;line-height:15px;text-align:center}/*年,月单元格*/div#cals.cal_yr.cal_pre{font-size:8px;background:url()no-repeat center center;padding-left:10px}/*上一月箭头(正 常)*/div#cals.cal_yr.cal_nxt{font-size:8px;background:url()no-repeat center center;padding-left:10px}/*下一月箭头(正 常)*/div#cals.cal_yr.cal_pre_ovr{font-size:8px;background:url()no-repeat center center;padding-left:10px;cursor:pointer}/*上一月箭头(鼠标悬停)*/div#cals.cal_yr.cal_nxt_ovr{font-size:8px;background:url()no-repeat center center;padding-left:10px;cursor:pointer}/*下一月箭头(鼠标悬停)*/ div#cals tr{}div#cals td{text-align:center;font-family:Arial;font-size:12px;padding:3px;line-height:14px;white-space: nowrap}/*日期*/div#cals.today{color:#FF0033;padding:2px;border:1px solid#E5E3DB;background:none;font-weight:bold;}/*今日*/div#cals.cal_week td{color:#FCCE00;font-weight:bold;font-size:12px;font-family:Tahoma}/*周*/div#cals.cal_date{color:#33FF00}/*普通日期*/div#cals.cal_sa{color:#FCCE00}/*周六标题样式 */div#cals.cal_su{color:#FCCE00}/*周日标题样式 */div#cals.not_come{color:#FCCE00}/*今日之后的日期 */div#cals.cal_before,#cals.cal_after{visibility:hidden}/*除当前月之外的日期*/div#cals*.cal_active{color#F70909;text-decoration:none;font-weight:bold;}/*有更新的日期效果*/div#cals*.cal_select{padding:2px;border:1px solid#d6d6d6;background-color:#eeeeee;color: text-decoration:underline}/*有更新的日期鼠标移上效果#179AC4; */div#cals.yr_normal{border:none;line-height: 14px;}div#cals.mth_normal{border:none;line-height:14px;}/*年,月选择器普通状态*/ div#cals.yr_sel,#cals.mth_sel{border:1px solid#ffad42;background:#ffec93;padding:0;line-height:14px;cursor:pointer}/*年,月选择器鼠标移上状态*/div#cals.cal_roll{border:1px solid#ff9000;background:#fef3c1;position:absolute;display:none;font-size:12px;font-family:Arial;line-height:18px}/*年月选择列表*/div#cals.cal_roll.normal{background:none;}/*年月选择列表选择项目普通状态*/div#cals.cal_roll.msover{background:#f5e182;cursor:pointer;}/*年月选择列表选择项目鼠标移上效果 */div#cals.cal_pp_cnt{padding:3px;margin-right:20px;font-size:12px;font-family:Arial;white-space:nowrap;border:1px solid#E5E3DB;background:url(有更新的日期的tip提示层*/ 文章摘至:《翱翔》