您所在位置：主题：网页模板CSS代码的解析
lovemengzhe [专家分：0] 发布于 2008-12-01 09:24:00
[font=宋体]第一，如何查看的模板源代码？
[size=3][color=black] 在浏览的网页上，鼠标右键点击“查看源代码”，即出现一个文本代码——但是，这并不是这个“[url=http://www.mobanku.com/][color=black]网站模板[/color][/url]”的源代码。[/color][/size][/font]
[font=宋体][size=3][color=black] 要查看这个[url=http://www.mobanku.com/][color=black]网页模板[/color][/url](为叙述方便，先以本网页为例吧)的源代码，首先要找到代码中的“href="/guoguo6688/css/item/75f3853e7efa77fa828b139f.css">”这一行。然后，将/css/item/75f3853e7efa77fa828b139f.css复制到该网页的地址栏之后，点击Enter键——就会出现一片乱码：这，就是这个网页的“模板源代码”。[/color][/size][/font]
[font=宋体][size=3][color=black]第二，如何在自己的空间创建一个新模板？[/color][/size][/font]
[font=宋体][size=3][color=black] 登陆自己的空间后，点击设置/模板设置/创建新模板，即跳出一个源代码文本——这是百度空间“默认模板”的CSS代码。[/color][/size][/font]
[color=black][/color]
[font=宋体][size=3][color=black][/color]
[color=black][/color]
[color=black][/color]
[color=black]动手打造个性化“空间主页”（1）——移花接木[/color]
[color=black][/color]
[table][tr][td][color=black] [font=宋体][size=3]自开博以来，曾经使用过六个原创者的“空间主页”作品。应当说他们各有千秋、各具特色，但又“白璧微瑕”总觉存在一些美中不足——需要自己动手在局部加以调整和改进。[/size][/font][/color]
[font=宋体][size=3][color=black] 目前使用的“空间主页”，就是在两个原创者作品的基础上，自己动手进行“移花接木”的“衍生品”。在此，谨对两个原创者付出的劳动致以真诚的谢意！[/color][/size][/font]
[font=黑体][size=4][color=black]1===“移花接木”的方法步骤——[/color][/size][/font]
[font=宋体][size=3][color=black] 第一，从网友的博客或“百度”推荐的模板中，筛选一个符合自己意愿的主页(主要是主体设计部分，页头可以暂不考虑)，作为自己动手打造个性化“空间主页”的“母本”。[/color][/size][/font]
[font=宋体][size=3][color=black] 第二，在这个主页上，鼠标右键点选“查看源代码”，即出现源代码文本(为说得明白一些，先以本博客为例，下同)。将其中/css/item/5a51e3b47b9f6d738bd4b2fa.css复制到该网址之后，按回车键即出现该模板的源代码。[/color][/size][/font]
[font=宋体][size=3][color=black] 第三，登陆进入自己的主页，点选设置/模板设置/创建新模板，将上述源代码拷贝覆盖(一定要全部删除原来的默认源代码)到新模板选框中。从而，生成自定义模板A.[/color][/size][/font]
[font=宋体][size=3][color=black] 第四，再从网友的博客或“百度”推荐的模板中，筛选一个符合自己意愿的主页(主要是着眼于页头设计得尽如人意，并与自定义模板A珠联璧合)，作为动手打造个性化“空间主页”的第二个“母本”。[/color][/size][/font]
[font=宋体][size=3][color=black] 第五，按照上述有关方法，将第二个“母本”中的CSS“页头”链接（在 #header 之后）——[/color][/size][/font][color=black]，[font=宋体][size=3]拷贝覆盖到自定义模板A中的相应位置。[/size][/font][/color]
[font=宋体][size=3][color=black] 第六，按照操作提示，对修改过CSS的自定义模板A点按“确定”，即生成一个新的自定义模板B——即经过“移花接木”的个性化“空间主页”。试试看，是不是一切都按照自己意愿OK了？[/color][/size][/font]
[/td][/tr][/table]
[font=宋体][size=3][color=black] 首先，要把默认的CSS代码全部清空；然后，将上述“乱码”全部复制粘贴到此处，点击“预览”即出现了以此模板为框架的自己空间内容；最后，点击“保存修改”即生成了一个新模板，以后自己可随时调用。[/color][/size][/font]
[font=宋体][size=3][color=black]第三，如何调用“页头”合成一个自己满意的新模板？[/color][/size][/font]
[font=宋体][size=3][color=black] 合成一个自己满意的模板，前提有两个：首先，对自己已经创建的模板，除“页头”之外的主体设计是满意的；其次，准备调用的另一网页“页头”不仅要自己满意，而且预计会与已经创建的模板主体相得益彰、珠联璧合。[/color][/size][/font]
[color=black][font=宋体][size=3] 合成方法其实很简单：按照第一、第二所述，找到准备调用页头的网页模板CSS中的[/size][/font][font=宋体][size=3]#header{height:205px;background:#000 url[/size][/font][/color][color=black][font=宋体][size=3] no-repeat top right}，
并将其中的图片链接（黄色部分）[/size][/font][font=宋体][size=3]拷贝覆盖到已创建的模板中的相应位置，点击“预览”即出现了以此模板为框架的自己空间内容，点击“保存修改”即生成了又一个新模板，以后自己可随时调用。[/size][/font][/color]
[font=宋体][size=3][color=black]第四，如何调整空间主页的“[b]空间名称[/b]”设置？[/color][/size][/font]
[font=宋体][size=3][color=black]CSS中的“空间名称”项—— #header div.tit[/color][/size][/font]
[font=宋体][size=3][color=black] #header div.tit a.titlink [/color][/size][/font]
[font=宋体][size=3][color=black]其中——[/color][/size][/font]
[font=宋体][size=3][color=black]字体大小设置项——FONT-SIZE[/color][/size][/font]
[font=宋体][size=3][color=black]左边距设置项—— LEFT[/color][/size][/font]
[font=宋体][size=3][color=black]排列高度设置项——LINE-HEIGHT[/color][/size][/font]
[font=宋体][size=3][color=black]字体设置项—— FONT-FAMILY[/color][/size][/font]
[font=宋体][size=3][color=black]顶距设置项——TOP[/color][/size][/font]
[size=3][font=宋体][color=black]颜色设置项——color (颜色选择器[/color][url=http://www.baidu.com/search/hi/hi_css.html][color=black]http://www.baidu.com/search/hi/hi_css.html[/color][/url][color=black])[/color][/font][/size]
[font=宋体][size=3][color=black]——按照自己意愿，设置以上选项后面的数字，直到满意为止。[/color][/size][/font]
[font=黑体][size=3][color=black]附注：在以下的设置中，凡是与已经解析的CSS，均不再赘复。[/color][/size][/font]
[font=宋体][size=3][color=black]第五，如何调整空间主页的“[b]空间简介[/b]”设置？[/color][/size][/font]
[font=宋体][size=3][color=black]CSS中的“空间简介”项—— #header div.desc[/color][/size][/font]
[font=宋体][size=3][color=black]第六，如何调整空间主页的“个人档案”设置？[/color][/size][/font]
[font=宋体][size=3][color=black]CSS中的“个人档案”项——[/color][/size][/font]
[font=宋体][size=3][color=black]#m_pro div.act ——操作区（如加为好友、发送消息）
#m_pro div.user ——用户名
#m_pro div.desc ——用户简介[/color][/size][/font]
[font=宋体][size=3][color=black]第七，如何调整空间主页的“文章区域”设置？[/color][/size][/font]
[font=宋体][size=3][color=black]CSS中的“文章区域”项——[/color][/size][/font]
[font=宋体][size=3][font=宋体][size=3][color=black]#m_blog div.tit a ——文章标题链接[/color][/size][/font][/size][/font][font=宋体][size=3][font=宋体][size=3]
[color=black]#m_blog div.date ——文章发表日期
#m_blog div.opt ——文章操作区（如编辑、评论等）
[/color][/size][/font][color=black]第八，如何调整空间主页的“日历”设置？[/color][/size][/font]
[font=宋体][size=3][font=宋体][size=3][color=black] 可把以下一段代码放到CSS最后，并根据自己爱好进行修改——[/color][/size][/font][/size][/font]
[font=宋体][size=3][color=black]*日历模块*/
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}/*下一月箭头(鼠标悬停)*/[/color][/size][/font]
[font=宋体][size=3][color=black]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:#179AC4;text-decoration:underline}/*有更新的日期鼠标移上效果*/
div#cals .yr_normal{border:none;line-height:14px;}
div#cals .mth_normal{border:none;line-height:14px;}/*年,月选择器普通状态*/[/color][/size][/font]
[font=宋体][size=3][color=black]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([/color][/size][/font][url=http://img.baidu.com/hi/img/date/popbg.gif);}/][font=宋体][size=3][color=black]http://img.baidu.com/hi/img/date/popbg.gif);}/[/color][/size][/font][/url][font=宋体][size=3][color=black]*有更新的日期的tip提示层*/[/color][/size][/font]
[/size][/font]
[size=3][color=black] 在浏览的网页上，鼠标右键点击“查看源代码”，即出现一个文本代码——但是，这并不是这个“[url=http://www.mobanku.com/][color=black]网站模板[/color][/url]”的源代码。[/color][/size][/font]
[font=宋体][size=3][color=black] 要查看这个[url=http://www.mobanku.com/][color=black]网页模板[/color][/url](为叙述方便，先以本网页为例吧)的源代码，首先要找到代码中的“href="/guoguo6688/css/item/75f3853e7efa77fa828b139f.css">”这一行。然后，将/css/item/75f3853e7efa77fa828b139f.css复制到该网页的地址栏之后，点击Enter键——就会出现一片乱码：这，就是这个网页的“模板源代码”。[/color][/size][/font]
[font=宋体][size=3][color=black]第二，如何在自己的空间创建一个新模板？[/color][/size][/font]
[font=宋体][size=3][color=black] 登陆自己的空间后，点击设置/模板设置/创建新模板，即跳出一个源代码文本——这是百度空间“默认模板”的CSS代码。[/color][/size][/font]
[color=black][/color]
[font=宋体][size=3][color=black][/color]
[color=black][/color]
[color=black][/color]
[color=black]动手打造个性化“空间主页”（1）——移花接木[/color]
[color=black][/color]
[table][tr][td][color=black] [font=宋体][size=3]自开博以来，曾经使用过六个原创者的“空间主页”作品。应当说他们各有千秋、各具特色，但又“白璧微瑕”总觉存在一些美中不足——需要自己动手在局部加以调整和改进。[/size][/font][/color]
[font=宋体][size=3][color=black] 目前使用的“空间主页”，就是在两个原创者作品的基础上，自己动手进行“移花接木”的“衍生品”。在此，谨对两个原创者付出的劳动致以真诚的谢意！[/color][/size][/font]
[font=黑体][size=4][color=black]1===“移花接木”的方法步骤——[/color][/size][/font]
[font=宋体][size=3][color=black] 第一，从网友的博客或“百度”推荐的模板中，筛选一个符合自己意愿的主页(主要是主体设计部分，页头可以暂不考虑)，作为自己动手打造个性化“空间主页”的“母本”。[/color][/size][/font]
[font=宋体][size=3][color=black] 第二，在这个主页上，鼠标右键点选“查看源代码”，即出现源代码文本(为说得明白一些，先以本博客为例，下同)。将其中/css/item/5a51e3b47b9f6d738bd4b2fa.css复制到该网址之后，按回车键即出现该模板的源代码。[/color][/size][/font]
[font=宋体][size=3][color=black] 第三，登陆进入自己的主页，点选设置/模板设置/创建新模板，将上述源代码拷贝覆盖(一定要全部删除原来的默认源代码)到新模板选框中。从而，生成自定义模板A.[/color][/size][/font]
[font=宋体][size=3][color=black] 第四，再从网友的博客或“百度”推荐的模板中，筛选一个符合自己意愿的主页(主要是着眼于页头设计得尽如人意，并与自定义模板A珠联璧合)，作为动手打造个性化“空间主页”的第二个“母本”。[/color][/size][/font]
[font=宋体][size=3][color=black] 第五，按照上述有关方法，将第二个“母本”中的CSS“页头”链接（在 #header 之后）——[/color][/size][/font][color=black]，[font=宋体][size=3]拷贝覆盖到自定义模板A中的相应位置。[/size][/font][/color]
[font=宋体][size=3][color=black] 第六，按照操作提示，对修改过CSS的自定义模板A点按“确定”，即生成一个新的自定义模板B——即经过“移花接木”的个性化“空间主页”。试试看，是不是一切都按照自己意愿OK了？[/color][/size][/font]
[/td][/tr][/table]
[font=宋体][size=3][color=black] 首先，要把默认的CSS代码全部清空；然后，将上述“乱码”全部复制粘贴到此处，点击“预览”即出现了以此模板为框架的自己空间内容；最后，点击“保存修改”即生成了一个新模板，以后自己可随时调用。[/color][/size][/font]
[font=宋体][size=3][color=black]第三，如何调用“页头”合成一个自己满意的新模板？[/color][/size][/font]
[font=宋体][size=3][color=black] 合成一个自己满意的模板，前提有两个：首先，对自己已经创建的模板，除“页头”之外的主体设计是满意的；其次，准备调用的另一网页“页头”不仅要自己满意，而且预计会与已经创建的模板主体相得益彰、珠联璧合。[/color][/size][/font]
[color=black][font=宋体][size=3] 合成方法其实很简单：按照第一、第二所述，找到准备调用页头的网页模板CSS中的[/size][/font][font=宋体][size=3]#header{height:205px;background:#000 url[/size][/font][/color][color=black][font=宋体][size=3] no-repeat top right}，
并将其中的图片链接（黄色部分）[/size][/font][font=宋体][size=3]拷贝覆盖到已创建的模板中的相应位置，点击“预览”即出现了以此模板为框架的自己空间内容，点击“保存修改”即生成了又一个新模板，以后自己可随时调用。[/size][/font][/color]
[font=宋体][size=3][color=black]第四，如何调整空间主页的“[b]空间名称[/b]”设置？[/color][/size][/font]
[font=宋体][size=3][color=black]CSS中的“空间名称”项—— #header div.tit[/color][/size][/font]
[font=宋体][size=3][color=black] #header div.tit a.titlink [/color][/size][/font]
[font=宋体][size=3][color=black]其中——[/color][/size][/font]
[font=宋体][size=3][color=black]字体大小设置项——FONT-SIZE[/color][/size][/font]
[font=宋体][size=3][color=black]左边距设置项—— LEFT[/color][/size][/font]
[font=宋体][size=3][color=black]排列高度设置项——LINE-HEIGHT[/color][/size][/font]
[font=宋体][size=3][color=black]字体设置项—— FONT-FAMILY[/color][/size][/font]
[font=宋体][size=3][color=black]顶距设置项——TOP[/color][/size][/font]
[size=3][font=宋体][color=black]颜色设置项——color (颜色选择器[/color][url=http://www.baidu.com/search/hi/hi_css.html][color=black]http://www.baidu.com/search/hi/hi_css.html[/color][/url][color=black])[/color][/font][/size]
[font=宋体][size=3][color=black]——按照自己意愿，设置以上选项后面的数字，直到满意为止。[/color][/size][/font]
[font=黑体][size=3][color=black]附注：在以下的设置中，凡是与已经解析的CSS，均不再赘复。[/color][/size][/font]
[font=宋体][size=3][color=black]第五，如何调整空间主页的“[b]空间简介[/b]”设置？[/color][/size][/font]
[font=宋体][size=3][color=black]CSS中的“空间简介”项—— #header div.desc[/color][/size][/font]
[font=宋体][size=3][color=black]第六，如何调整空间主页的“个人档案”设置？[/color][/size][/font]
[font=宋体][size=3][color=black]CSS中的“个人档案”项——[/color][/size][/font]
[font=宋体][size=3][color=black]#m_pro div.act ——操作区（如加为好友、发送消息）
#m_pro div.user ——用户名
#m_pro div.desc ——用户简介[/color][/size][/font]
[font=宋体][size=3][color=black]第七，如何调整空间主页的“文章区域”设置？[/color][/size][/font]
[font=宋体][size=3][color=black]CSS中的“文章区域”项——[/color][/size][/font]
[font=宋体][size=3][font=宋体][size=3][color=black]#m_blog div.tit a ——文章标题链接[/color][/size][/font][/size][/font][font=宋体][size=3][font=宋体][size=3]
[color=black]#m_blog div.date ——文章发表日期
#m_blog div.opt ——文章操作区（如编辑、评论等）
[/color][/size][/font][color=black]第八，如何调整空间主页的“日历”设置？[/color][/size][/font]
[font=宋体][size=3][font=宋体][size=3][color=black] 可把以下一段代码放到CSS最后，并根据自己爱好进行修改——[/color][/size][/font][/size][/font]
[font=宋体][size=3][color=black]*日历模块*/
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}/*下一月箭头(鼠标悬停)*/[/color][/size][/font]
[font=宋体][size=3][color=black]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:#179AC4;text-decoration:underline}/*有更新的日期鼠标移上效果*/
div#cals .yr_normal{border:none;line-height:14px;}
div#cals .mth_normal{border:none;line-height:14px;}/*年,月选择器普通状态*/[/color][/size][/font]
[font=宋体][size=3][color=black]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([/color][/size][/font][url=http://img.baidu.com/hi/img/date/popbg.gif);}/][font=宋体][size=3][color=black]http://img.baidu.com/hi/img/date/popbg.gif);}/[/color][/size][/font][/url][font=宋体][size=3][color=black]*有更新的日期的tip提示层*/[/color][/size][/font]
[/size][/font]