首 页   · 站长博客 · 用户注册 · 会员登陆  · 会员排行  ·最新主题  ·最近回复  精华区  版权声明  ·论坛管理
  当前登录身份:游客,请先登录。  笔名: 口令: 验证码:   
楼 主  index »  HTML/JS/CSS技术专区 » [原创]发两个html页面看看。  


  作者:海天旭日
  注册时间:2004-04-06
  主题/回复:69/145
  积分:1508
  等级:★★★★(八级)
  称号:论坛才子

  xiaopb@163.com
  11843938
  www.xpb.cn

 

 发表:2005-05-10 18:01:33 阅读 2368 次 回复 6 次 得分2  |   字号 字色
[原创]发两个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做出来?如果做出来就是一样了......
  页数1/1首页 « 1 » 末页
  发表回复:您还没有登陆,无法发表回复。请先[登陆]

一起PHP技术联盟 主办:一起PHP 联系方式:站长QQ:4304410 QQ群:8423742 20159565 站长博客 E-mail: nqp@nqp.me 执行时间:0.008sec
SimsmaBBS 2008 (v6.0) Developed by 17php.com,Copyright(C)2003-2010 All rights reserved. 副本授权:一起PHP官方专用版