当前位置: 首页 > 网络学院 > 网页制作基础教程 > WEB设计综合 > 制作网页中的渐变背景

WEB设计综合
CSS+Javascript实现表格背景变色
网页中小三角的做法与使用(CSS特效)
为不同的浏览器载入不同CSS的二种方法
CSS滑动门教程
CSS hack浏览器兼容一览表
捷足先登学用CSS
英文字符自动换行方法
XSL中实现循环
XHTML第1天:选择什么样的DOCTYPE
XHTML第2天:什么是命名空间
XHTML第3天:定义语言编码
XHTML第4天:调用样式表
XHTML第5天:head区的其他设置
XHTML第6天:XHTML代码规范
Xhtml第7天:css入门知识
Xhtml第8天:CSS布局入门技术
Xhtml第9天:第一个css布局实例
Xhtml第10天:div自适应高度
Xhtml第11天:如何制作不用表格的菜单
Xhtml第12天:校验及常见错误

WEB设计综合 中的 制作网页中的渐变背景


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 1540 ::
收藏到网摘: n/a

方法一:

用图实现

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://www.moontoucher.net";
}
}

// Unhide -->

</SCRIPT>

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

评论 (0) All

登陆 | 还没注册?