制作网页中的渐变背景方法

方法一:
用图实现
1切一张1*760的渐变背景图
2在dw中添加做背景

方法二:
用css实现,代码如下:
<html>
<body style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000)">
<center>
<font size="+3"><strong>网页背景色渐变<br>
(从白色到黑色) </strong></font> <br>
<br>
</center>
</body>
</html>

下面这个是斜角渐变啊
<html>
<body style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= 100,startY=50,finishY=100); background-color: skyblue">
<h1>背景渐变(左上至右下)</h1>
</body>
</html>
很COOL的哦!

方法三:
用javascript实现
<SCRIPT LANGUAGE="javascript">

<!-- Hide from old browsers
var Color= new Array(9);
Color[1] = "ff";
Color[2] = "ee";
Color[3] = "dd";
Color[4] = "cc";
Color[5] = "bb";
Color[6] = "aa";
Color[7] = "99";
Color[8] = "88";
Color[9] = "77";
Color[10] = "66";
Color[11] = "55";
Color[12] = "44";
Color[13] = "33";
Color[14] = "22";
Color[15] = "11";
Color[16] = "00";
/* Do not display text on a fading background. Instead, let it
fade in and out once or twice, then load a new page. */
function fadeIn(where) {
if (where >= 1) {
document.bgColor="#" + Color[where] +"0000";
where -= 1;
setTimeout("fadeIn("+where+")", 15);
} else {
setTimeout('fadeOut(1)', 15);
}
}
function fadeOut(where) {
if (where <=16) {
document.bgColor="#" + Color[where] +"0000";
where += 1;
setTimeout("fadeOut("+where+")", 15)
} else {
setTimeout("fadeIn(16)", 15);
// window.location.href="http://";
}
}
// Unhide -->
</SCRIPT>

<body bgcolor="#fef4d9" onLoad="fadeIn(16)">

时间: 2024-11-20 18:37:43

制作网页中的渐变背景方法的相关文章

Illustrator结合photoshop制作网页中的超漂亮的3D立体文字教程

给各位Illustrator软件的使用者们来详细的解析分享一下结合photoshop制作网页中的超漂亮的3D立体文字的教程. 教程分享: 先来看看最终的效果图!吧:   好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的结合photoshop制作网页中的超漂亮的3D立体文字的教程解析分享的全部内容了,各位看到这里的使用者们相信各位现在是很清楚了制作方法了吧,那么各位就快去按照小编的教程去制作下自己想要的3D立体字吧.

JavaScript返回网页中超链接数量的方法_javascript技巧

本文实例讲述了JavaScript返回网页中超链接数量的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获取网页中的所有超级链接,从而获得超链接的数量 <!DOCTYPE html> <html> <body> <img src ="planets.gif" width="145" height="126" alt="Planets" usemap

JavaScript返回网页中锚点数目的方法_javascript技巧

本文实例讲述了JavaScript返回网页中锚点数目的方法.分享给大家供大家参考.具体如下: JavaScript返回网页中锚点的数目,下面的JS代码获取页面中的anchor数量 <!DOCTYPE html> <html> <body> <a name="html">HTML Tutorial</a><br> <a name="css">CSS Tutorial</a>

用CSS简单制作网页中的翻转菜单

css|菜单|网页 如果用传统的方法制作这个翻转菜单,至少需要把图片切成10块,还要加上JS代码,在图片按钮上再加行为,现在完全用CSS来实现,图片只要一张,见下图: CSS代码:#imgmenu{width: 450px;height: 25px; /*高度是背景图片的一半*/background: url(../images/navbg.gif);list-style-type: none;padding: 0px;margin: 0px;} #imgmenu li{float: left;

网页字体在Frontpage2000制作网页中的讲解

运用Html,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到css.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力.考虑到用frontpage制作网页的人较多,同时它对其他网页编辑器的使用者也有一定的借鉴作用, 因此,我就讲解一下如何在frontpage2000中运用css设置网页字体. 我们可以用css设置出无数种网页字体,但万变不离其宗,任何的变化都要遵循css的基本语法.因此我们先来了解一下css的基本语法

网页中嵌入 Flash 的方法讨论

网页 Flash 嵌入的问题论坛中有人问了好多次,到底应该怎么用,为什么通不过验证,要通过验证怎么办等等等.讨论中也出现了不少的误解,所以我单开一个帖总结一下我所知道的东西,不想看我罗嗦的直接跳到最后看结论就可以了. 一.传统的方法.<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"    codebase="http://fpdownload.macromedia.com/pub/shockwave

详解用Dreamweaver制作网页中的表格

dreamweaver|网页|详解 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.虽然现在都提倡WEB标准建立网站,但是有时在网页中还是会应用到表格的. 这个教程我们给大家讲解表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实

技巧文章:网页中嵌入Flash的方法讨论

技巧|网页 Flash 嵌入的问题论坛中有人问了好多次,到底应该怎么用,为什么通不过验证,要通过验证怎么办等等等.讨论中也出现了不少的误解,所以我单开一个帖总结一下我所知道的东西,不想看我罗嗦的直接跳到最后看结论就可以了. 一.传统的方法 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"     codebase="http://fpdownload.macromedia.com/pub/shock

用Dreamweaver制作网页中的表格详解

表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.虽然现在都提倡WEB标准建立网站,但是有时在网页中还是会应用到表格的. 这个教程我们给大家讲解表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面的排版格式,如果用以前我