您现在的位置： 星云电脑教程 >> 电脑教程 >> 网页制作 >> FrontPage >> 正文

网页设计中常用的一些技巧

星云电脑教程 文章来源：本站原创 作者：星云整理 更新时间：2004-7-31 16:41:12 点击数 【 有问必答 】


让滚动条变色

这个很简单啦,只要在<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(设定背景图为重复,如果重复一般不必设置,这个是浏览器默认的。) 

背景图的地址最好写全，就是 http://~~因为据说，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(

---- < 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)">
你要的文字 
</table>

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

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


浮 雕 文 字 ：

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

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

<style type="text/css">
<!--
.font{
FILTER: dropshadow(color=#FF9999, offx=1, offy=1, positive=1); FONT-FAMILY: "Verdana"; FONT-SIZE: 10pt; width:100%; COLOR: #66CCFF;}
//-->
</style>


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

<a class="font" href=#>是不是有点浮雕的效果呢？ 
<!--连接中使用 -->

<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>

其中**是你的图标的名称，后缀名还可以是.cur和.ico的图标。

【打印此文】【 有问必答 】【关闭窗口】

>>

  • 上一篇教程：

  • 下一篇教程：
    • 内容搜索
    相关文章
    没有相关教程
    推荐文章
    热点资讯
    专题栏目