如何制作百度空间模板？

Question

如题所述

Answer 1

现在百度空间新增了可视化编辑器，CSS 代码编辑器也提供了一套基准代码，框架结构非常完整，所以现在 hier 们制作模板可以说是易如反掌啦。先说可视化编辑器。进入你的空间，点“管理中心”——“空间装扮”——“挑选模板”——“我也来设计”，就可以进入可视化编辑器了。第一步，你选择一个基准的色调，然后点击“下一步”。第二步，你可以设置背景图片和模块位置等信息，之后设置好模板的名称、标签，以及色系，就可以保存了。这是最简单的制作模板的方法。下面，就让我再来详细说说用 CSS 代码怎么实现精密的编辑。基准模板已经保存在了你的自定义模板中。你需要调出来。进入空间装扮，然后点击“挑选模板”——“我设计的”，找到刚刚做好的基准模板，点“编辑”——“CSS 编辑器”。你首先要做的是，往下翻页，找到“最新动态模块”下方的/*---==css-edit code here==---*/这一行文字，把其下的所有文字全部删除。下方的这些代码是可视化编辑器多出来的代码，若不删除，那么后面做精密修改时，上方的 CSS 代码会与其下的 CSS 代码发生冲突，这样精密修改就无法实现。1. 设置背景图片和文字颜色找到“大背景颜色及背景图片设置”模块的第一行：#body{background:#f3f3f3;}background: 后面的是颜色代码，简单地说，你可以使用下面的颜色：white：白色silver：银色gray：灰色black：黑色red：红色yellow：黄色green：绿色lime：鲜绿色blue：蓝色skyblue：天蓝色pink：粉色magenta 或 violet 或 purple：紫色cyan：青色orange：橙色brown：棕色当然，可以使用的英文单词远远不只这些，【这里】列出的颜色的英文单词最多，绝大多数都可以使用。在颜色下方添加一行background-image: url(********)可以设置背景图片，括号里的内容就是背景图片的 URL 地址。背景图片默认是横向、纵向均平铺，如果觉得不好看，那么可以在小括号后面添加代码，请你根据需要选择合适的代码：no-repeat 表示横向、纵向均不平铺repeat-x 表示仅横向平铺repeat-y 表示仅纵向平铺接下来是{color:#555b6e}这一行是设置页面的文字颜色的，你可以使用任意一个英文单词直接设置颜色，也可以参考 CSS 帮助，选择你所需要的颜色，然后复制其颜色代码，把原来的替换掉，就可以实现了。如 {color:red} 或者 {color:#ff0000} 就是设置文字颜色为红色。注意行末的分号一定不要丢掉。background-position 是指背景图片的位置。你可以使用如下九中方案：left top：位于左上角center top：位于正上方right top：位于右上角left center：位于左侧的正中央center：位于正中央right center：位于右侧的正中央left bottom：位于左下角center bottom：位于正下方right bottom：位于右下角在使用后六种方案的时候，可能会遇到因为加载出了整个空间页面，而导致图片的位置移动了。比如使用 center 方案的时候，同时你又设置了不平铺，等到整个网页加载出来的时候，你就看不到背景图片了。因为设置的是位于整个网页的正中央，而不是整个屏幕的正中央。包括前三种方案也一样，当网页下移时，图片也就随之滚动了。如果希望图片固定住，也就是实现所谓的“水印”效果，你可以在这行文字下方，添加一行文字：background-attachment:fixed;这样图片就能固定住了。示例代码：body{background:lightblue;/*设置背景颜色为淡蓝色*/color:black;/*设置文字的颜色为黑色*/background-position: center;/*图片位于屏幕的正中央*/ background-attachment:fixed;/*固定图片，不随滚动条滚动*/overflow-x:hidden;}2. 设置文章中的链接样式在“页面链接样式设置”板块中，有三个模块，分别是 #a（普通链接），#a_visited（已访问过的链接），#a_hover（鼠标移到链接地址上）。color 设置的是颜色，可以使用标准英文单词，也可以使用颜色代码，代码可以在 CSS 帮助中获取。font-size 设置的是字号（pt 是磅的单位，），如 12pt 表示 12 号字（等价于 Word 中的小四号字）。font-family 设置的是字体，可以直接使用中文，但是要注意在字体名称的前后加上英文的双引号（正确格式：" "，错误格式：“”）。font-style 设置的是字形（可以使用：normal 正常；bold 加粗；italic 倾斜；underline 下划线，多个样式可以组合，在中间加空格就可以。）示例代码：a{color: blue; /*设置基本链接颜色为蓝色*/font-size: 12px; /*设置字号为 12 磅*/font-family: Arial;/*设置字体为 Arial*/font-weight: italic;/*设置链接字体倾斜*/text-decoration: none; }a:visited{color:magenta; /*设置已点击过的超链接颜色为粉色*/font-size:12px;text-decoration:none}a:hover{color:red; /*当鼠标移动到超链接上时，文字变为红色*/font-size:12px; text-decoration:underline;/*当鼠标移动到超链接上时，加下划线*/}3. 头图设置#header div.tit 设置的是大标题的样式，#header div.tit a.titlink 设置的是大标题的链接样式，#header div.tit a.titlink:visited 设置的是大标题已点击过的链接样式，#header div.tit a.titlink:hover 设置的是鼠标移到大标题上时的链接样式，#header div.desc 设置的是空间简介的文字样式。样式设置可以参考上面的设置链接样式的方式。另外补充一个，top 和 left 设置的是文字的位置，top 是距顶端多少像素，left 是距左端多少像素，请根据需要进行设置。如果觉得标题那一行的背景图片不太适合，可以去色。找到 #header 这一行，把 background 这一行字全部去掉就可以了。如果你想换成别的图片，只需要更改括号里的 url 地址就可以了。示例代码：#header{height:160px;/*设置导航栏下方的正文的显示位置（数字越大越靠下方）*/}#header div.tit{color:green;/*设置主标题的颜色为绿色*/line-height:30px; /*设置主标题的行高（相当于使用 Word 里段落设置的行距固定值，如果字号大则需要加大行距）*/font-size:28px; /设置主标题的字号为 28 磅/font-family:"幼圆"; /*设置主标题的字体为幼圆*/font-style:bold;/*加粗字体*/top:75px; left:370px; /*设置主标题的位置，距屏幕最顶端 75 像素（数字越大越靠下），距屏幕最左端 370 像素（数字越大越靠右）*/}#header div.tit a.titlink{color:green;font-size:28px;font-family:"幼圆"; text-decoration:none}#header div.tit a.titlink:visited{color:green;font-size:28px;text-decoration:none}#header div.tit a.titlink:hover{color:purple;/*当鼠标移动到主标题上时，字体变为紫色*/}#header div.desc{top:115px; left:300px;/*设置小标题的位置为距顶端 115 像素，距左端 300 像素*/color:black;/*设置小标题颜色为黑色*/font-size:20px;/*设置小标题字号为 20 磅*/}4. 导航栏设置#tab 这一块设置的是“主页 博客 相册 个人档案 好友”这一行字的显示样式，设置方法可以参考上面的“设置链接样式”和“头图设置”。外补充一个，#tab span 设置的是两项之间的分隔符的颜色，如果不想要分隔符，只需要在大括号里输入 display:none 就可以实现了。如果觉得背景图片不适合，只需要把对应的 background 那一行字去掉，或者修改 url 地址，就可以实现了。如果希望加大各项目之间的距离，可以将 margin-left 后面的数字加大些示例代码：#tabline{display:none}#tab{top:150px; left:100px; line-height:26px; /*设置导航栏的位置和行高*/background:none;height:26px;padding-top:3px;}#tab a{color:darkblue;/*设置导航条的基本文字颜色为深蓝色*/font-weight:normal;background:none; height:26px;margin-left:60px;/*两项之间的距离为 60 像素*/}#tab span{display:none;/*不显示两项之间的分隔符“|”*/}#tab a:visited{color:darkgreen;/*已点击过的导航条的项目变为深绿色*/font-size:12px;font-weight:normal;text-decoration:none; }#tab a:hover{color:lightgreen;/*当鼠标移动到导航条项目上时，颜色变为浅绿色*/font-size:12px;font-weight:normal;text-decoration:none;}#tab a.on{color:blue;/*当前页面指示为蓝色*/font-size:12px;font-weight:bold;/*当前页面的指示加粗*/}#tab a.on:visited{font-weight:bold;color:pink;/*已点击过的当前页面指示为粉色*/}#tab a.on:hover{color:red;/*当鼠标移动到当前页面指示上时，文字变为红色*/}5. 模块设置.mod 里的 magin-bottom 设置的是行距，数字越大，行距就越大。在这个大括号里，同样可以添加 font-size（字号）font-face（字体）font-style（字型）等参数，也同样可以添加背景图片。.modtit 设置的是模块标题的样式（如“文章列表”、“友情链接”的文字样式），可以参考前面的方法进行设置。.modth 里的 height 设置的是模块标题的行高，应该按照标题的字号大小进行合理设置。.modpt 设置的是模块右侧的操作区（如友情链接右侧的“编辑”，文章列表右侧的“写新文章”等）的文字样式，可以参考前面的方法进行设置如果觉得预览的时候，模块的背景色比较碍眼，挡住了背景图片，那么就需要进行去色处理。找到代码中的#modbox 模块把这三行字去掉：border-left:1px solid #d8d8d8; border-right:1px solid #d8d8d8; background-color:#fff;之后，把下面的 .modtl，.modtc，.modtr，.modbl，.modbc，.modbr 这几个模块也统统去掉，效果就实现啦。示例代码：.mod{margin-bottom:5px;/*模块内的行距为 5 像素*/}.modhandle{cursor:move}.modth{height:26px;/*设置模块标题行高为 26 像素*/}.modhead{padding:2px 4px 0 4px;}.modopt{padding:4px 4px 0 0;color:darkred;/*设置模块右侧的操作按钮颜色为深红色*/}.modtit{color:darkblue;/*设置模块标题为深蓝色*/font-size:18px;/*设置模块标题字号为 18 磅（等价于三号字）*/font-weight:bold;/*设置模块标题加粗*/}.modbox{padding:10px; }.modlabel{color:#000;font-size:12px;font-weight:bold}这样，模板就做好了，你就可以设置模板名称、标签、色系和最佳适用版式啦。 你可以看一下效果图：

参考资料：http://hi.baidu.com/msy0613/blog/item/b0fe25452ab30d3286947323.html