渐变菜单

<script>if( self == top ){top.location = "/myjs/?u=/hw/asp/jsview.asp?id=344";}</script>
<style>
/* 先把这个 xmenu 的样式放到css里 */
.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}
</style>

<script>
/* 这是把事件动作绑定到菜单上的函数 */
function attachXMenu(objid){
 var tds=objid.getElementsByTagName('td');
 for(var i=0;i<tds.length;i++){
  with(tds[i]){
   οnmοuseοver=function(){
    with(this){
     filters[0].apply();
     style.background='#66CCFF'; //这是鼠标移上去时的背景颜色
     style.border='1px solid #ffffff'; //边框
     style.color='black'; //文字颜色
     filters[0].play();
    }
   }
   οnmοuseοut=function(){
    with(this){
     filters[0].apply();
     style.background='#336699'; //这是鼠标离开时的背景颜色
     style.border='1px solid #336699'; //边框
     style.color='#ffffff'; //文字颜色
     filters[0].play();
    }
   }
  }
 }
}
</script>

<!--菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id-->
<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
<td>My
<td>Name
<td>Is
<td οnclick="location.href='http://lexrus.blueidea.com'">LeX <!--这是按下以后打开一个网页-->
<td>Rus
<td>!!!
</table>

<script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script>

<!--下面这个是竖排的-->

<br/>
<table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
<tr><td>My
<tr><td>Name
<tr><td>Is
<tr><td οnclick="location.href='http://lexrus.blueidea.com'">LeX
<tr><td>Rus
<tr><td>!!!
</table>

<script>attachXMenu(xmenu1);</script>
<div style="position: absolute; bottom: 10; right: 0; width: 150; height: 18;cursor:hand;z-index:100000;font:menu;background:infobackground;border:1 solid #999999;padding:4px;">
 <input type="button" name="Button" value="源代码" onClick= 'window.location = "view-source:" + window.location.href'></div>

 


 

基于STM32设计的数字示波器全套资料(原理图、PCB图、源代码) 硬件平台: 主控器:STM32F103ZET6 64K RAM 512K ROM 屏幕器:SSD1963 分辨率:480*272 16位色 触摸屏:TSC2046 模拟电路: OP-TL084 OP-U741 SW-CD4051 CMP-LM311 PWR-LM7805 -LM7905 -MC34063 -AMS1117-3.3 DRT-ULN2003 6.继电器:信号继电器 7.电源:DC +12V 软件平台: 开发环境:RealView MDK-ARM uVision4.10 C编译器:ARMCC ASM编译器:ARMASM 连机器:ARMLINK 实时内核:UC/OS-II 2.9实时操作系统 GUI内核:uC/GUI 3.9图形用户接口 底层驱动:各个外设驱动程序 数字示波器功能: 波形发生器:使用STM32一路DA实现正弦,三角波,方波,白噪声输出。 任意一种波形幅值在0-3.3V任意可调、频率在一定范围任意可调、方波占空比可调。调节选项可以通过触摸屏完成设置。 SD卡存储: SD卡波形存储输出,能够对当前屏幕截屏,以JPG格式存储在SD卡上。能够存储1S内的波形数据,可以随时调用查看。 数据传输:用C#编写上位机,通过串口完成对下位机的控制。(1)实现STOP/RUN功能(2)输出波形电压、时间参数(3)控制截屏(4)控制波形发生器(5)控制完成FFT(6)波形的存储和显示 图形接口: UCGUI 水平扫速: 250 ns*、500ns、1μs、5 μs、10μs、50μs、500 μs、5ms 、50ms 垂直电压灵敏度:10mV/div, 20mV/div, 50mV/div, 0.1V/div, 0,2V/div, 0.5V/div, 1V/div,2V/
### 使用CSS创建颜色渐变菜单效果 为了实现具有颜色渐变效果的菜单,可以利用 `linear-gradient` 函数来定义背景图像。此函数允许指定两个或多个颜色停止点之间的线性过渡[^1]。 下面是一个简单的例子,展示如何应用 CSS 创建带有渐变背景色的水平导航菜单: #### HTML结构 ```html <nav class="gradient-menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">服务</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> ``` #### CSS样式表 ```css .gradient-menu ul { list-style-type: none; padding: 0; margin: 0; display: flex; } .gradient-menu li { position: relative; /* 添加相对定位 */ } .gradient-menu a { text-decoration: none; color: white; font-weight: bold; padding: 15px 30px; transition: all .3s ease-in-out; background-image: linear-gradient(to right, #ff7e5f, #feb47b); /* 定义从左至右的颜色变化 */ } ``` 当鼠标悬停在链接上时,可以通过改变 `background-image` 属性值的方式使背景发生动态变换,从而增强用户体验。这里给出一个额外的状态处理方式作为补充说明: ```css .gradient-menu a:hover, .gradient-menu a:focus { background-image: linear-gradient(to bottom, #6dd5ed, #2193b0); } ``` 上述代码片段展示了通过调整方向参数 (`to right`, `to bottom`) 和不同色彩组合来自定义渐变的方向与视觉感受。 对于更复杂的场景,比如希望基于特定比例混合两种颜色,则可借助于 `color-mix()` 函数。例如,在某些情况下可能需要精确控制一种颜色向另一种颜色转变的程度;此时就可以采用如下形式设置背景属性[^2]: ```css .background-with-color-mix { background: color-mix(in srgb, rgba(255, 255, 255, 0.8), rgb(0, 0, 255)); } ``` 这种做法同样适用于构建更加细腻和平滑的交互反馈机制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值