空间模版

时间:2024-07-17 13:02:40编辑:揭秘君

怎么做百度空间的模板?

登录空间后:上面有我的空间(点击下拉按钮)-模板-我制作的模板-创建新模板,这时就会跳出一个窗口,出现可编辑的CSS代码文件。但是,这并不是你自己当前使用的模板的代码,而是一个百度默认模板的代码,这个是无法选择的,百度目前只能提供这一种模板供编辑。

如果你想在某个比较喜欢的模板的基础上进行编辑,就需要先把这个模板的CSS代码复制出来,然后把“自定义模板”里出现的那个代码完全替换掉,接下来就可以对想修改的部分进行编辑啦。

在编辑CSS文件的窗口下方有四个选项:“保存”“保存并应用”“取消”“预览”,一定要搞清楚这几个选项的区别,在每次修改之后最好先点一下“预览”看看有没有错误,之后再“保存”,最好不要在编辑状态下直接点“保存并应用”,而是先保存,然后再次预览确定每个页面都没问题之后再选择“应用此模板”。

3.一般我们对选择的模板不需要经过大的修改,只要修改些细节就好了,比如背景图片的更换,最上面横幅的更换。

4.

空间背景颜色/鼠标设置区域

如果要设置特殊风格的鼠标,需要在代码文件的第一行加上:
a:hover {cursor:url('http://imgcache.qq.com/qzone/space_item/orig/11/187.ani')}
body {cursor:url('http://imgcache.qq.com/qzone/space_item/orig/11/1547.ani')}{background-color:#FFFFFF}

第一行括号内的链接是点到链接时的鼠标状态,第二行括号内的链接是正常的鼠标状态,第二行后边的background-color后边的颜色代码是指整个空间的背景颜色。六位颜色代码可以在这里找到。

如果不需要设置特殊鼠标,那么这一部分只保留“body {background-color:#颜色代码}”就可以了。

空间名称/标题图片设置区域

#header{height:300px;background:url(……)}
这是空间标题栏的主体部分,{}内的文字解释如下:
“height”指标题栏的高度,这个要与你放在标题栏的图片高度相同;后边的括号内是你要做标题的图片的链接,宽度为1024px的图片比较合适,图片高度可以根据自己的喜好决定。

#header div.lc{}
#header div.rc{}
如果想在标题的左右两边放置不同的图片,就在第一行的{}内加上左边的图片链接,格式为{background:url(……) no-repeat left}。第二行的{}内加上右边图片的链接,格式为{background:url(……) no-repeat right}。否则{}内留空就可以。

#header div.tit{top:30px;left:20px;line-height:22px;font-size:30px;font-family:隶书}
这里要设置的是空间名称的位置(top后边的数字是文字离空间标题栏上边界的距离,left后边的数字是离左边界的距离);大小(font-size后边的数字);字体(font-family后边的文字)。

#header div.tit a.titlink{color:#......;text-decoration:none}
#header div.tit a.titlink:visited{color:#......;text-decoration:none}
这两行应该是设置空间名称文字的颜色,但是我搞不清楚2行有什么区别,所以索性都设成一样的好了。如果想要把文字设成设成黑体或下划线,就把text-decoration:后边的none相应地改成bold或underline。

#header div.desc{top:60px;left:20px;color:#......;font-size:13px}
这行是设置空间简介(空间名称下边那行小标题)的位置、大小和字体的,设置方法同空间名称的设置。

#tabline{top:415px;background-color:#......}
这个是指TAB菜单栏(主页/博客/相册/好友/设置那一行)下边的分隔线的位置和颜色,top后边的数字是指分割线离空间标题栏上边界的距离,这个数字要根据标题栏的高度和菜单的位置(是与图片重叠或位于图片下方)来决定。

#tab{top:390px}
这个是指TAB菜单栏的位置,top后边的数字是指距空间标题栏上边界的距离。

#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:2px;line-height:20px;background-color:#......;color: #……;font-size:14px;font-weight:bold;}
这一行是指TAB菜单被选中后的状态,文字的位置,文字后边背景的颜色,文字颜色,字号等等。

#tab span{color:#F93A60;font-size:14px}
这个是指TAB菜单中间的分隔符(就是那条竖线)的颜色和大小。

#tab a:link{color:#......;text-decoration:none;font-size:14px}
这一行是指TAB菜单未被选中时的状态,文字颜色,其它定义,字号。

#tab2部分是TAB菜单下方的第二TAB菜单栏(比如“设置”下方的“基本选项”“模板设置”这一栏)的设置,设置方法同上。

.stage{background-color:#......}
这个是空间内容区域(TAB菜单栏以下直到空间底部)的背景颜色/图片设置,不想设置也可以把{ }留空。

博客文章标题/文字设置区域

#m_blog div.tit{font-size:14px;font-weight:bold;line-height:50px;text-indent:60px}
博客文章标题栏的设置,line-height后边的数字是用来定义标题栏高度的,text-indent后边的数字是指标题文字向右缩进的距离,如不需要缩进可设为0。如果想在每篇文章的标题前加上图片,可以在{}内的结尾处加上“background:url(图片链接) no-repeat”,然后按照加入的图片尺寸相应调整标题栏高度和文字缩进处的数值。QQ里的那些可爱的动画表情图标都可以拿来用,另存后上传到百度空间的相册就可以啦。

#m_blog div.tit a{color:#......;font-size:14px;font-weight:bold}
博客文章标题链接的状态设置。

#m_blog div.tit a:visited{color:#047304}
博客文章标题被选中后的状态设置。

#m_blog div.date{margin:5px 0 8px 0;color:#666666;text-align:right}
博客文章日期的设置,margin指距标题栏的距离,text-align指日期的位置(居左居右或居中)。

#m_blog div.cnt{color:#666666;line-height:20px;font-size:14px}
博客文章内容设置:文字颜色,行距,字号。

#m_blog div.more a{color:#047304;font-size:14px}
“阅读全文”链接状态设置。

#m_blog div.more a:visited{color:#047304}
博客文章标题链接被选中后的的状态设置。

#m_blog div.opt{color:#047304;font-size:12px}
文章操作区(如编辑、评论等)的设置。

#m_blog div.opt a{color:#047304;font-size:12px}
文章操作区链接状态设置。

#m_blog div.opt a:visited{color:#047304}
文章操作区链接被选中后的状态。

#m_blog div.line{margin-top:10px;line-height:60px;background:url(图片链接) no-repeat center}
文章和文章之间的分隔线设置,margin-top指分隔线与上一篇文章之间的距离,line-height指分隔线区域的高度,结尾处可定义分隔线的位置(no-repeat center指不重复,居中,repeat-x指横向重复)。

音乐播放器的设置

如果觉得空间默认的音乐播放器不好看,可以在空间最后加上这段代码来改变播放器的大小和颜色:

#phx{FILTER:Alpha(Opacity=60,FinishOpacity=36,Style=0,StartX=20,StartY =40,FinishX=0,FinishY=0)gray;WIDTH:500px;HEIGHT:45px}(这个是我的播放器代码)

这段代码有点复杂,捡能看懂的部分介绍一下吧,其他的还没摸索出来呢:

Opacity=透明度,可以用0-100之间的数值,数值越低透明度越高;FinishOpacity=过度透明度,即边缘的透明度(这个我还没搞懂怎么玩);gray=颜色/风格,可以设为默认、gray、xray、invert等,可以自己尝试;WIDTH后边的数字表示播放器的宽度, HEIGHT后边的数字表示播放条的高度


如何制作百度空间模板?

现在百度空间新增了可视化编辑器,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}这样,模板就做好了,你就可以设置模板名称、标签、色系和最佳适用版式啦。 你可以看一下效果图:

qq空间的模板怎么设置

  你想知道qq空间模板怎么设置吗?本网我介绍一下怎样对QQ空间模块进行设置。   设置QQ空间模块的步骤   打开并登陆QQ空间,进入设置板块   在设置模块中,我们找到“添加和删除主页板块”,并进入设置   页面的最上方出现下图窗口,可在里选择你想要出现在主页的模块,也可添加自定义模块   选择一个自定义的模块类型   在弹出的窗口中输入图片地址、模块标题等内容后确认   这样该模块就会出现在首页了   选中该模块进行拖拽,可以对该模块在首页的位置进行移动


怎样制作qq空间模板

你先找个皮肤之后在用用photoshop制作空间大图模块


Photoshop最大的优势就是强大的图片处理功能。因此我们利用它处理主页的皮肤,通过在皮肤上融图和添加个性图像,来制作浑然一体的个性空间。
下面,我根据自己做的一幅空间大图来详细讲解制作步骤。没有安装photoshop的朋友可以先下载。

一、截取背景图片:通过装扮空间设置好你的空间皮肤以后,就可以截取空间背景图片了。 没有抓图软件也没有关系,可以用QQ截图,效果也不错。
按住Ctrl+Alt+A,截取空间皮肤,截图宽度在700—720之间,高度自定。图截好后保存为JPEG文件,为了讲解方便,我们给这个文件命名为空间大图。
二、制图:
1熟悉photoshop工具栏 2 2、打开photoshop,点文件—打开,找到空间大图,打开。双击背景,把背景转化为图层。
3、打开已经选好的素材图片。用鼠标点住素材图,点工具栏中的选择工具,把它拉到背景图片上。(下面就把这张被拉进来的图片所在层称为图层2)。也可以把素材图片全选,复制。回到背景图片,再粘贴,图片就进去了。
4、CTRL+T,自由变换,按住shift键,拖动素材图片的边角,把图片调整到合适的大小。
5、在工具栏选择套索工具,使用多边形套索。选中图层2,沿着人物外缘勾画出形状。形状不要求特别精确。当然如果勾画得细致一些效果会更好。 6、点鼠标右键——“羽化” ,羽化数值设为15,可以依据图片状况和个人喜好所设。再点鼠标右键——选择反向,按“Delete”,删除。Ctrl+D,取消选择。如果边缘还太明显,可以“选择”——“重新选择”,“选择”——“羽化”,将羽化值调大,再次“Delete”。
7、用选择工具把图层2中的图片移动到合适的位置,如果大小不合适,可以用CTRL+T,自由变换,按住shift键,拖动素材图片的边角,重新调整图片大小。
8、选中图层2,在图层面板将混合模式改为“正片叠底”,混合模式可以设成其他,如:柔光、叠加等等,背景图片的颜色不同,设置的效果也是不一样的。透明度可以根据你的喜好进行设置。
、如果觉得梦幻效果还不是很好,那么再来点高斯模糊。选中图层2,再在菜单栏点“滤镜”——“模糊”——“高斯模糊” ,数值设为1

10、最后一步,用工具栏的自定义形状,添加上心形或其他什么东西。只要背景图片与Qzone的背景一致,那么,所添加的图片就仿佛融合在了Qzone的背景之上了。这一步我就不再做了,大家自由发挥吧


如何能自己设计QQ空间模板

QQ空间模板是基于QQ空间而诞生的一种新型DIY方法,可以把QQ空间首页部份的内容替换成自己喜欢的背景,然后再加上自己需要的功能模块,就做成了个性化的QQ空间了。
  QQ空间模板分为两种:大图模板和FLASH模块.他们的使用方法基本都是大同小异.
  以下是QQ空间Flash模块和大图模块的基本使用方法和步骤
  1:进入空间 点击自定义
  2:点击右侧的新建模块→选择图片模块(大图,格式为jpg或gif)或者Flash动画模块(Flash,格式为swf)
  3:模块名称随便取一个,用一个空格也行(就相当于没有名称了),输入图片地址或Flash的地址
  4:点击《更多设置》可以设置如:又无边框.FLASH是否透明.是否循环播放音乐等.
  5:调整好模块大小,点模块管理→把自带的模块前面的√去掉,然后再把需要显示的模块打√,这样可以将“日志”、“留言”、“形象”或“音乐”等小板块放到大图模块的上面,一般制作大图的时候都预留了这些小板块的位置的。
  完成之后保存就可以看到自己的自定义模块了
  通过大图模板和Flash模板的结合使用,QQ空间主页就会变得个性时尚了。


如何设置空间模板

空间模板一共分为4种
自定义模块的详细步骤:
①.图文模块:自定义—模块—右边的新建模块--选图文模块--可添加图片进去的--描述那里输入的字在首页可显示--标题里输入的字点一下如果你有粘贴连接地址可关跳转到你粘贴的地址里—此模块可用来做友情链接—在更多设置里可设置无边框。
②.图片模块:复制你想要添加进入的图片的地址(可右击图片选属性,那里就有地址,如果是添加电脑里的图就先把图片上传到相册里)--自定义—模块—右边的新建模块--选图片模块--把地址粘贴进图片地址里--在更多设置里面设置无边框--确定后调大小及位置后保存。
③.FLASH模块:把找到的FLASH地址复制后—自定义—模块—右边的新建模块--选FLASH模块—把地址粘贴进FLASH地址里--在更多设置里可设透明及无边框—确定后调大小及位置后保存(4.0可以忽律透明边框)
④.视频模块:找到自己喜欢的视频,然后点播放,在播放的那个框的右边有两排地址,(一般有注明是视频地址的),你复制地址后—进入空间—自定义—模块—右边的新建模块--选视频—把地址粘贴在视频地址那里也就可以了--也可设置为无边框--确定后可调大小最后再保存~


怎样自己设计空间模版啊

QQ空间大图模板使用方法1:点击自定义。2:点击右侧的新建模块→点击图片模块。3:模块名称随便,用一个空格最好,图片地址上输入图片的地址(右击下面图片,点属性查看图片地址,也可以右击图片,点另存为下载了再自己上传到博客或象册),再点击“更多设置”,背景、边框选择无,确定保存。4:用鼠标调整一下图片的大小,让整个图片完全显示。(这一步有时候是不需要的)

什么是满堂模板和共享空间模板?

满堂模板
是满滩基础脚手架就是在河面河滩直接搭建脚手架,区别于悬臂施工等
满堂脚手架主要用于单层厂房、展览大厅、体育馆等层高、开间较大的建筑顶部的装饰施工。由立杆、横杆、斜撑、剪刀撑等组成.
满堂独立基础是指在独立基础的下面是个”整浇层”不同与以往的单个基础开挖.多用于地质情况较差,建筑占地面积较小的工程


qq空间自定义模板怎么弄啊

编辑QQ空间主页请按照下面的步骤来:1.首先,需要我们打开个人的QQ空间页面,然后按照图片上的操作提示,点击“设置”按钮。  2.在设置按钮选项下面,我们点击“空间设置”,然后进入空间设置界面选项。  3.进入空间设置选项界面之后,我们点击“通知和提醒”设置选项,然后我们可以看到有一个空间登陆默认选项的设置。  4.在空间登陆默认选项设置里面,我们点击“个人主页”,并点击“保存设置”,这样我们在下次登录QQ空间的时候即可以自动加载个人主页页面,而不是个人中心的页面。

谁会做百度空间的模板。自己做的。

快速制作 CSS 模板
现在百度空间新增了可视化编辑器,CSS 代码编辑器也提供了一套基准代码,框架结构非常完整,所以现在 hier 们制作模板可以说是易如反掌啦。
先说可视化编辑器。进入你的空间,点“管理中心”——“空间装扮”——“挑选模板”——“我也来设计”,就可以进入可视化编辑器了。
第一步,你选择一个基准的色调,然后点击“下一步”。
第二步,你可以设置背景图片和模块位置等信息,之后设置好模板的名称、标签,以及色系,就可以保存了。
再简单说说用 CSS 代码怎样实现较为精密的编辑吧。
首先,还是同样,进入可视化编辑器页面。然后点击右上角的“切换到 CSS 编辑器”链接(不用保存当前的基准模板)。你就可以看到基准代码的框架结构了。
然后,参考下面的内容,对模板进行编辑。

1. 设置背景图片和文字颜色
找到“大背景颜色及背景图片设置”模块的第一行:
#body{background:#f3f3f3;}
在 background: 后面添加 url(******) 字样,括号里输入所嵌入背景图片的 URL 地址,就可以设置背景图片了。
背景图片默认是横向、纵向均平铺,如果觉得不好看,那么可以在小括号后面添加代码,请你根据需要选择合适的代码:
no-repeat 表示横向、纵向均不平铺
repeat-x 表示仅横向平铺
repeat-y 表示仅纵向平铺
然后第二行是{color:#555b6e}这一行是设置页面的文字颜色的,你可以参考 CSS 帮助,选择你所需要的颜色,然后复制其颜色代码,把原来的替换掉,就可以实现了。如 {color:#ff0000} 就是设置文字颜色为红色。注意行末的分号一定不要丢掉。

2. 设置文章中的链接样式
在“页面链接样式设置”板块中,有三个模块,分别是 #a(普通链接),#a_visited(已访问过的链接),#a_hover(鼠标移到链接地址上)。color 设置的是颜色,font-size 设置的是字号(pt 是磅的单位,),font-family 设置的是字体,font-style 设置的是字形(可以使用:normal 正常;bold 加粗;italic 倾斜;underline 下划线,多个样式可以组合,在中间加空格就可以。)

3. 头图设置
#header div.tit 设置的是大标题的样式,#header div.tit a.titlink 设置的是大标题的链接样式,#header div.tit a.titlink:visited 设置的是大标题已点击过的链接样式,#header div.tit a.titlin:hover 设置的是鼠标移到大标题上时的链接样式,#header div.desc 设置的是空间简介的文字样式。样式设置可以参考上面的设置链接样式的方式。另外补充一个,top 和 left 设置的是文字的位置,top 是距顶端多少像素,left 是距左端多少像素,请根据需要进行设置。
如果觉得标题那一行的背景图片不太适合,可以去色。找到 #header 这一行,把 background 这一行字全部去掉就可以了。如果你想换成别的图片,只需要更改括号里的 url 地址就可以了。

4. 导航栏设置
#tab 这一块设置的是“主页 博客 相册 个人档案 好友”这一行字的显示样式,设置方法可以参考上面的“设置链接样式”和“头图设置”。外补充一个,#tab span 设置的是两项之间的分隔符的颜色,如果不想要分隔符,只需要在大括号里输入 display:none 就可以实现了。如果觉得背景图片不适合,只需要把对应的 background 那一行字去掉,或者修改 url 地址,就可以实现了。

5. 模块设置
.modth 设置的是模块标题栏的行高,里面的数字是模块标题有多少像素高。
.modpt 设置的是模块右侧的操作区(如友情链接右侧的“编辑”,文章列表右侧的“写新文章”等,)文字样式,可以参考前面的方法进行设置
.modtit 设置的是模块标题的样式(如“文章列表”、“友情链接”的文字样式),可以参考前面的方法进行设置。
如果觉得预览的时候,模块的背景色比较碍眼,挡住了背景图片,那么就需要进行去色处理。
找到代码中的
#modbox 模块
把这三行字去掉:
border-left:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
background-color:#fff;
之后,把下面的 .modtl,.modtc,.modtr,.modbl,.modbc,.modbr 这几个模块也统统去掉,效果就实现啦。

这样,模板就做好了,你就可以设置模板名称、标签、色系和最佳适用版式啦。

我会做,如需帮助请联系我。


上一篇:北方论坛

下一篇:巴士广告