楼 主
index »
HTML/JS/CSS技术专区 » [原创]发两个html页面看看。
发表:2005-05-10 18:01:33 阅读 2368 次 回复 6 次 得分2 |
字号
10px
12px
14px
16px
18px
20px
24px
字色
▅▅▅▅▅
▅▅▅▅▅
▅▅▅▅▅
▅▅▅▅▅
▅▅▅▅▅
▅▅▅▅▅
[原创]发两个html页面看看。
以下效果均没用一张图片,保存为htm或html即可看到效果。
第一个:
<html xmlns:v>
<style>
v\:* {behavior: url(#default#VML);}
</style>
<body bgcolor=#efefef>
<v:RoundRect
style="position:relative;width:460;height:170px">
<v:shadow on="T" type="single" color="#b3b3b3"
offset="5px,5px"/>
<v:textbox style="font-size:12px">
感谢您注册使用一起PHP技术论坛。 本论坛由17PHP网站站长完
全自主研发,最早版本于2003年10月份启用。经过一段时
间的使用,发现原来的论坛有许多不足之处。于是我在原来的
1.8.8的基础上,经过较大改动,升级为17PHPBBS3.0,在此我向
您对 一起PHP网站的一贯支持表示衷心的感谢。希望您一如既往
的支持和关注一起PHP技术论坛。<br><br>
论坛的升级可能给您的使用带来一定的不便,为使
用户尽快适应新的论坛,我们编写了这份“使用指南”,帮助您
迅速了解和掌握新论坛的新功能,以便更好的使用论坛,更好的
参与到PHP学习的大家庭中来,让我们共同进步,一起走进PHP的
精彩世界!
祝您一切顺利。
</v:textbox>
</v:RoundRect>
</body>
第二个,关于按钮的。
<style>
.btn {
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
</style>
<button class=btn title="这是CSDN的官方按钮"> 好看的CSDN Button</button><P></p>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
> 好看的Green Button</button>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED
> 好看的Green Button</button>
<P>
<button class=btn2 title="这是e商2003的官方按钮"> 好看的 e商2003 Button</button>
<P>
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
> 好看的QQ Button</button>
<P>
<button class=btn_2k3> 好看的 2k3 Button</button>
1#楼
回复人:一起PHP
注册时间:2004-02-27
主题/回复:247/1521
积分:4649
等级:★★★★★☆(十一级)
称号:论坛圣人
1#楼 发表于2005-05-10 19:59:14
评分:1
非常不错!
效果很好!
尤其是第一个效果,简直神了!
有没有字体效果的?比如让某些文字实现投影或者描边的?我现在正需要!
2#楼
回复人:海天旭日
注册时间:2004-04-06
主题/回复:69/145
积分:1508
等级:★★★★(八级)
称号:论坛才子
2#楼 发表于2005-05-10 22:17:07
评分:×
文字投影的更简单:
据个例子:
<table>
<tr>
<td style="filter:shadow (color=#333333,
direction=225,strength=5)"><font
size=8>大家好,欢迎来到17php的世界!</font></td>
</tr>
</table>
根据参数名很简单可以判断direction=225为阴影方向,strength为强度,color=#222222就是阴影颜色了。
以上配合如:a hover onmouseover background等还可实现很多链接效果。
3#楼
回复人:海天旭日
注册时间:2004-04-06
主题/回复:69/145
积分:1508
等级:★★★★(八级)
称号:论坛才子
3#楼 发表于2005-05-10 22:33:03
评分:×
还漏掉了一个参数 glow 补充后如下:
<table>
<tr>
<td style="filter:shadow (color=#333333, direction=225,strength=5) glow(color=#ff3300,strength=3)">
<font size=8>大家好,欢迎来到17php的世界!</font></td>
</tr>
</table>
就是发光的意思,当然也可以说成描边了,同样strength可以设置发光强度。
以上css属性均可在DW中做到。当然也可以将style写到样式表文件如nqp.css 里,调用更加方便。
利用上述同样也可以给图片增加阴影和发光效果(记得好像某些参数单独使用时只对透明gif有效,具体使用时试验一下就可以了)
上述代码在IE6.0下测试无误!
4#楼
回复人:一起PHP
注册时间:2004-02-27
主题/回复:247/1521
积分:4649
等级:★★★★★☆(十一级)
称号:论坛圣人
4#楼 发表于2005-05-11 02:12:58
评分:♂
5#楼
回复人:feilang
注册时间:2004-10-13
主题/回复:4/34
积分:463
等级:★★☆(五级)
称号:略有小成
5#楼 发表于2005-05-12 17:48:08
评分:1
请问 海天旭日
你贴出来的代码和Dreamweaver中的CSS代码有什么异同么?
6#楼
回复人:海天旭日
注册时间:2004-04-06
主题/回复:69/145
积分:1508
等级:★★★★(八级)
称号:论坛才子
6#楼 发表于2005-05-12 18:37:55
评分:×
你试一下不就知道了,以上所有效果不看代码,不手工编辑
看看能不能用Dw做出来?如果做出来就是一样了......