让滚动条变色

网页制作 2004-11-15 14:28

这个很简单啦,只要在<head>和</head>间插入：

<style>
BODY{
scrollbar-base-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#aecde7;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;}
</style>

背景图象重复与否：[/b]

background-repeat:
repeat | repeat-x | repeat-y | no-repeat

注：
以上设置标签的意义
repeat　　　图象水平垂直方向都重复。
repeat-x　　图象水平方向重复。
repeat-y　　图象垂直方向重复。
no-repeat　图象不重复。

说：
定义图象重复方向是对于一些独特的图象定位而言。

例:
background-repeat: repeat(设定背景图为重复,如果重复一般不必设置,这个是浏览器默认的。)

背景图的地址最好写全，就是 ~~因为据说，NETSCAPE4.0以下好象支持的不是很好。

背景图象是否随滚动条移动：

background-attachment:
scroll | fixed
scroll属于浏览器默认的，也就是随滚动条移动，fixed为不动。

[b]给背景图定位：

---就是设置它显示在哪里.最上面top,还是左边left

background-position:
| [percentage | length]{1,2}
|[top | center | bottom]
| [left | center | right]

background-position:[percentage | length]是用X(横坐标)y(纵坐标)定义,如background-position: 20px 40px;

background-position:[top | center | bottom] 和[left | center | right] 是一样的意思了,三个任意两个搭配可以产生不同的效果.
可以是background-position:top center;center bottom;top bottom;left,right.....

bottom:下,top:上,left:左,right:右,center:中.

下为像素与英文的对照：
top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%

全部的设定：

{ background: background-color || background-image || background-repeat || background-attachment || background-position }

例:
body{ background: #ffffff; background-image: url( user.7host.com/bluemm/img/1bg.gif); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom }

关于背景图就说到这里啦，适当的应用可以让页子变得美美的，同时也可以加快下载速度哦：）

1．在主页中加入背景音乐

---- 首先要准备一首MIDI音乐，将其命名为test.mid。在HTML中使用背景音乐的标记是< EMBED SRC="test.mid">，这个标记可以根据泥的需求，放置在< BODY>和< /BODY>之间的任何地方。这个标记放置的位置会出现一个类似媒体播放器的图案，利用它可以控制音乐播放或暂停。例如下面一条语句：

---- < EMBED SRC="test.mid" WIDTH=120 HEIGHT=60>

---- 就会出现一个控制面版让泥播放音乐，我们可以选择控制面版的大小。

---- 如果泥希望一进入页面就播放背景音乐，而且不显示播放控制面板，并且可以重复播放，那么可以通过以下语句实现：

---- < EMBED SRC="test.mid" HIDDEN="TRUE" AUTOSTART="TRUE" LOOP="TRUE">

---- 泥还可以通过以下语句插入背景音乐：

---- < bgsound SRC="URL">

---- 如果需要循环播放，可以通过以下语句实现：

---- < bgsound SRC="URL" loop="-1">

---- 按设定次数播放可以通过以下语句实现：

---- < bgsound SRC="URL" LOOP="次数">

2．< EMBED>的属性

---- < EMBED>可以放在< BODY>和< /BODY>之间的任何地方，在这个标记放置的位置会出现一个控制面板的图案，您可以视自己的需求把它放在适当的位置，也可以使用HIDDEN="TRUE"将面板隐藏起来，配合AUTOSTART="TRUE"作为背景音乐使用。

（注意喔，<bgsound>的语句是加在<head>与</head>之间的,而<EMBED>则是加在< BODY>和< /BODY>之间的任何地方)

阴影文字：

是不是好想去美化自己的站站，呵呵，其实很简单啦，只要以下代码：

<table style="FILTER: glow(color=#6699FF,direction=2)">
<font color=#ffffff size=2>你要的文字</font>
</table>

其中color 是阴影的颜色，可以配合网页色调改变，direction 是设置阴影的强度。font color是原字体的颜色。

呵呵，发挥自己的想象力让字体变得更漂漂吧^_^

浮雕文字：

大家看到这些文字和普通的文字有什么区別吗？
是不是有一种刻在网页上的感觉？
这种效果做在叶面上也是挺漂亮的。
其实很简单，這是利用了CSS做出的。

首先，在<head>~</head>之間加入：

<style type="text/css">

</style>

然后，在<body>~</body>之間加入：

<a class="font" href=#>是不是有点浮雕的效果呢？</a>


<p class="font">是漂亮的顔色呢~！p^^q</p>


#发挥一下你的想象，利用背景色的搭配，一定可以做出不错的效果的。

半透明表格

SAMPLE:

嘿，不让你看清我！

实现这个效果很简单啦，请将以下代码拷贝至 <TABLE> 里面

style="FILTER: alpha(opacity=50)"

例如：
<table style="FILTER: alpha(opacity=50)" width="200" border="0" cellspacing="0" cellpadding="2" bgcolor="#CCFFFF"></table>

设置文本域的字体

请将以下代码拷贝至页面合适位置：

<TEXTAREA STYLE="font:12px;font-family:Verdana;color:#666666">
输入内容

注:字体(font-family)还可以选用Arial,Tahoma等等；color可自行设定

设置文本域的背景色

请将以下代码拷贝至页面合适位置：

<TEXTAREA STYLE="background-color:#ffffff">
输入内容

注:background-color可自行设定，如设为 transparent ，则背景透明

设置文本域的边框

实线：
<TEXTAREA STYLE="border:1px solid #51bfe0">
输入内容

虚线：
<TEXTAREA STYLE="border:1px dashed #51bfe0">
输入内容

点线：
<TEXTAREA STYLE="border:2px dotted #51bfe0">
输入内容

设置文本域的背景图

请将以下代码拷贝至页面合适位置：

<TEXTAREA STYLE="background-attachment: fixed; background-image: url(背景图所处位置)">
输入内容

注: fixed可以固定背景图，如不需要可不用。

给鼠标定义个性图片

活活，很多人问我主页的那个跟在鼠标后的小图是怎样实现的？嘿，其实简单的不得了，偶不喜欢太复杂的东西，活活，先看演示啦：

SAMPLE:鼠标放上来，是不是很可爱^_^

hoho,是不是很想把它用来装扮你的叶子？EASY啦，只要：

在<head>与</head>之间插入：

<style type=text/css>
a:hover {cursor:url('**.ani')}
BODY {cursor:url('**.ani')}
</style>

标签集:TAGS:

回复Comments() 点击Count()

回复Comments

{commentauthor}

{commenttime}

{commentnum}

{commentcontent}

作者:

{commentrecontent}