模板修改

最新推荐文章于 2024-11-08 08:53:11 发布

原创最新推荐文章于 2024-11-08 08:53:11 发布 · 611 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scroll #url #flash #日历 #behavior #公告

本文详细介绍如何使用HTML和CSS自定义博客界面，包括更换背景图片、题图、日历面板等，以及添加滚动公告和动态元素的方法。

一、关于题图，背景图，日历面板等处图片的更换

1 登录到BLOG，然后进入“控制面板”，点“个人首页维护”

2 进入“自定义空白面板”，点“新增”，注意，在新增面板过程中，标题可以任意，但最好取与你博适合内容，其中奥秘稍后你就知道了。例如我用“水色”做标题。然后把下面的简介框的“显示源代码”挑勾。在出现的<DIV></DIV>中间加入任何文字。例如：<DIV>水色的淡然</DIV>。然后保存。

3 在出现的“自定义空白面板栏”里，你会发现刚新建的“水色”。双击打开。选中“显示源代码”。然后在原有的代码后面加入

＇<STYLE type=text/css>

body
{background:url(页面背景图片地址) repeat
scroll!important;}
</STYLE>＇ (注意!要去掉前后的引号)

这里地址要用你喜欢的图片的链接地址（记得上传，咳这是废话吧），repeat表示图片平铺，不平铺改为no-repeat；scroll表示图片随鼠标滚动，不滚动改为fixed，!important表示设置优先，尽量不要将它去掉，否则有可能会引起冲突。

4 写好后点保存，会提示“更新成功”。但不要着急，这时还没有完，回到“控制面板”，在左侧点“定制我的首页”。会出现一个工具条，点击“添加模块”，在出现的列表右侧的空白面板下选中你刚创建的那个，如我的“水色”，然后点页面最下面的“选取”

5 最后点下刚才工具条上的“保存设置”。OK，现在出来刷新看看，是不是你的首页背景已经变成你想要的图了呢。

同理，你可以运用空白面板修改任意你想改的地方的图，只要换下代码就成。
.logo
{background:url(题图logo图片) no
repeat no scroll!mportant;}

标题图

＇<center><img style="left: 117px; position:absolute;
top:55px" height=135
src=(题图大图) width=770 align=right></center>＇(注意!要去掉前后的引号)

.menu{
background:url("题图下的菜单图片") no-
repeat center;}

.photo .mid{
background:url(形象照片处的背景图片);}

.calendar .mid{
background:url("日历面板背景");}

.callboard .mid{
background:url("公告栏背景图片");}

.bodyBg{
background:url("正文背景图片");}

.bodyBottom{
background:url("正文背景图片");}

注意：这里各部分的图片最好选取用与原方案一样的尺寸，比如题图用770*135，不然有可能造成显示的错误。（这里如果你懂一点HTML或CSS语言的话，也可以修改整个框架的结构，宽度之类就随意了）

二、添加滚动公告字幕

1 步骤和上面的完全一样，只是在建立好空白面板后在里加入

＇<MARQUEE scrollAmount=1 scrollDelay=77 direction=up width=270 height=77
onmouseout="this.start()" onmouseover="this.stop()">水色的左岸
<BR>曾经
<BR>有个
<BR>失火的天堂
<BR>……</MARQUEE>＇ (注意!也要去掉前后的引号)

onmouseout="this.start()" onmouseover="this.stop()">水色的左岸

曾经

有个

失火的天堂

……

注意：这里scrollAmount表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。direction表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up表示↑，down表示↓。scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动) 。
为换行符。

三、添加动态FLASH，修改鼠标

完全相同，只是换代码
透明flash代码：

＇<CENTER><EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src=链接FLASH的网址 width=700 height=400 type=application/x-shockwave-flash wmode="transparent" quality="high" ;></CENTER>＇

鼠标：
＇<STYLE type=text/css>
a:hover {cursor:url('*.ani'这里是鼠标地址)}
BODY {cursor:url('*.ani鼠标地址
')}
</STYLE> ＇ (注意!也要去掉前后的引号)