经典的导航二级式导航菜单增强版
作者:lshdic http://blog.csdn.net/lshdic/
<!--
呵呵我发的上一版相信大家都看过了吧,想一想上一版的确是不怎么华丽,而且上一版是针对表格内的连接A而定位的
而这一版的优点显然比上一版要华丽,速度一样快,而且是针对表格TD来定位的,TIMEOUT设置的也必要合理
以下代码完整范例请登陆 http://www.lshdic.com 查看,或到 http://www.lshdic.com/editdhtml.asp 自行编辑测试
-->
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; Charset=gb2312">
<META name="GENERATOR" content="网络程序员伴侣-Lshdic 2002">
<META NAME ="KEYWORDS" CONTENT="lshdic,蓝丽网,html,css,javascript,vbscript,asp,sql,dhtml,vml,php,jsp,xml,vrml,vb,vc,delphi,开发,电脑,网络,编程,程序员,下载,软件,网页,编辑器,技术论坛">
<STYLE>
a{text-Decoration:none;}
a:hover{color:blue}
td{font-size:12px;color:555555}
.menu{border-right:0;border-top:0;border-bottom:0;border-left:1 solid white;color:666666}
</STYLE>
</HEAD>
<BODY vlink=#6772CD link='#6772CD'>
<!--导航栏正式制作开始-->
<script>
function window.onerror(){
return true //防止浏览器未下载完毕用户触发函数时出现错误提示
}
</script>
<!--整个导航栏HTML制作开始,其中并调用MOVESE函数构造一级菜单-->
<TABLE cellspacing=0 cellpadding=1 width=770 align=center style='border-width:0' bgcolor='BBE2F5'
frame=below rules=none bordercolordark=white bordercolorlight=dddddd id=menutd
οnmοuseοver=over2() οnmοuseοut=out2() οnclick=click2()>
<TR align=center style='cursor:hand;'>
<td height=20 id=menutd1 style='border:1 solid white;border-top:0;border-bottom:1 solid eeeeee;'
goto='index.asp' οnmοuseοver="movese('返回蓝丽网主页|-|娱乐视听-Flash|娱乐视听-经典电影|技术文章库|下载中心|编辑网页|编写程序|Lshdic2002|留言我们|网友中心-网友软件|网友中心-网友网站|网友中心-网友人才|蓝丽网技术论坛','index.asp||happy.asp|happy2.asp|wenzhang.asp|download.asp|editweb.asp|editdhtml.asp|lshdic2002.asp|bbs2.asp|friendsoft.asp|friendweb.asp|friendabout.asp|bbs/')">
回首页
</td>
<td width=150 style='cursor:default;background-color:#BBE2F5;' id=menutd2 goto=''></td>
<Td class=menu οnmοuseοver="movese('FlashMtv 经典音乐|MTV专集 经典电影','happy.asp|happy2.asp')" goto='happy.asp'>娱乐视听</a>
</td>
<!--这个菜单使用了二级菜单,稍微较长,请自行修改-->
<Td class=menu
οnmοuseοver="movese('网络编程语言**Html**Css**JavaScript**VbScript**Dhtml**Vml**ActiveX**Asp**Php**Jsp**Sql+Ado**Xml+*.net**其他网络技术|软件编程语言**Basic+VB**C语言+VC+CB**Java+VJ+J2EE**Delphi**VFP+汇编+Dos+其他|-|其他非编程学术|蓝丽所有网友问题|查找所有技术文章','被屏蔽网址**wenzhang.asp?str=Html<font style=display:none>Dhtml&page=1**wenzhang.asp?str=Css&page=1**wenzhang.asp?str=JavaScript/Js<font style=display:none>Jsp&page=1**wenzhang.asp?str=Vbs&page=1**wenzhang.asp?str=Dhtml&page=1**wenzhang.asp?str=Vml&page=1**wenzhang.asp?str=ActiveX&page=1**wenzhang.asp?str=Asp&page=1**wenzhang.asp?str=Php&page=1**wenzhang.asp?str=Jsp&page=1**wenzhang.asp?str=Sql/Ado&page=1**wenzhang.asp?str=Xml/.Net/Xsl&page=1**wenzhang.asp?str=Fso/Wsh/Htc/正则/Object/iis/pws/Vrml&page=1|被屏蔽网址**wenzhang.asp?str=Basic/VB<font style=display:none>Vbs&page=1**wenzhang.asp?str=C语言/VC/CB&page=1**wenzhang.asp?str=VJ/J2EE/Java<font style=display:none>JavaScript&page=1**wenzhang.asp?str=Delphi&page=1**wenzhang.asp?str=PB/VF/汇编/单片机/苹果机/Dos&page=1||wenzhang.asp?str=英语/注册表:/微软/驱动程序/硬件/黑客/加密/解密/攻击/防御/入侵/红客/外语/业界/理论/趋势/破解/工作/程序员/设计师/新闻/社会/讲座/病毒/转载/原创&page=1|wenzhang.asp?str=请问/问题/难题/请教/帮忙/帮助/帮忙/sos/help/解决/有没有/帮帮/救命/救救/急/教我/愁/谁能/能不/可不可/行不/怎么/提问/怎样/才能/能让/没办法/过来/瞧一&page=1|bbs/instr.asp')"
goto='wenzhang.asp'>技术文章
</td>
<!--具有二级菜单效果的表格制作结束-->
<Td class=menu οnmοuseοver="movese('进入下载中心|编程工具|电子教程|编程素材|Lshdic2002配套工具','download.asp|download.asp?screen=工具软件&page=1|download.asp?screen=电子教程&page=1|download.asp?screen=编程素材&page=1|download.asp?screen=LD配套工具&page=1')"
goto='download.asp'>下载中心
</td>
<Td class=menu οnmοuseοver="movese('进入网页编辑中心|下载编辑网页v2版','editweb.asp|download2.asp?id=48')"
goto='editweb.asp'>编辑网页
</td>
<Td class=menu οnmοuseοver="movese('进入程序编辑中心|下载编写程序v2版','editdhtml.asp|download2.asp?id=92',1000)"
goto='editdhtml.asp'>编写程序
</td>
<Td class=menu align=center title='进行注册,领取Lshdic200X软件序列号的地方' style='font-size:13px'
οnmοuseοver="movese('查看领取Lshdic序列号|注册购买Lshdic序列号|注册购买流程简介','lshdic2002.asp|lshdic2002one.asp|lshdic2002help1.asp')" goto='lshdic2002.asp'>Lshdic
</td>
<Td class=menu οnmοuseοver="movese('查看客户所有留言|签写新留言','bbs2.asp|bbs2fatie.asp')" goto='bbs2.asp'>留言我们
</td>
<Td class=menu
οnmοuseοver="movese('网 友 软 件|网 友 网 站|网 友 文 章|网 友 简 历|-|网 友 发 布 平 台','friendsoft.asp|friendweb.asp|friendword.asp|friendabout.asp||friendftp.asp',1000)"
goto='friendall.asp'>网友中心
</td>
<Td class=menu align=center
οnmοuseοver="movese('进入蓝丽技术论坛|-|网页版面美工设计|网页前台脚本编程|网页后台脚本编程|Xml与Net时代编程|软件开发交流论坛|讨论区及其他学术|-|会员登陆注册入口','bbs/||bbs/page.asp?dex=网页版面美工设计|bbs/page.asp?dex=网页前台脚本编程|bbs/page.asp?dex=网页后台脚本编程|bbs/page.asp?dex=Xml与Net时代编程|bbs/page.asp?dex=软件开发交流论坛|bbs/page.asp?dex=讨论区及其他学术||bbs/olduser.asp')"
goto='bbs/'>技术论坛
</td></tr></TABLE>
<!--基本导航栏HTML构造结束,以下开始着手编写构造MOVESE等等菜单显示,定位,消失的脚本-->
<script>
var cleartime=1
function movese(menustr,menuhref){ //一级菜单的显示函数,menustr=菜单要显示的文本,menuhref=菜单文本对应的网址
happydiv.style.display=''; //首先显示的一级菜单
happydiv2.style.display='none'; //其次将以显示的二级菜单关闭
if(cleartime!=1)clearTimeout(cleartime) //触发此函数通常是在mouseover时,因此取消"定时关闭菜单"的定时器
happydiv.style.posLeft=menutd.offsetLeft+event.srcElement.offsetLeft; //一级菜单绝对位置"左"定位
happydiv.style.posTop=menutd.offsetTop+menutd.offsetHeight //一级菜单绝对位置"上"定位
for(i=0;happydiv.rows.length;i++)happydiv.deleteRow() //清除菜单中以有的TD表格数据
str1=menustr.split('|');str2=menuhref.split('|') //将menustr以"|"号分割为数组
for(i=0;i<str1.length;i++){ //循环显示数据数据开始
tdstr=happydiv.insertRow().insertCell() //首先在一级菜单中查入一个<Tr><Td></Td></Tr>
if(str1[i].indexOf('**')==-1){ //如果是不构成显示二级菜单的数据,以**做判断
if(str1[i]!="-")tdstr.innerHTML="<a href='"+str2[i]+"'>"+str1[i]+"</a>";else tdstr.innerHTML="<hr size=1 color=#8BB4D9>"
}else{ //如果是能构成二级菜单的数据则...
str3=str1[i].split('**') //开始构件二级菜单驱动的显示字符
tdstr.innerHTML="<font οnmοuseοver=movese2('"+str1[i]+"','"+str2[i].replace(/</g,"lshdicstr1").replace(/ /g,"lshdicstr2").replace(/>/g,"lshdicstr3")+"')>"+str3[0]+" →</font>" //MOVEOVER时调用二级菜单显示函数MOVESE2,replace是将指定网址中的特殊字符替换为预定字符
}}
cleartime=setTimeout('happydiv.style.display="none";happydiv2.style.display="none"',2000) //一切完毕后加上定时关闭菜单,可选
}
function movese2(menustr2,menuhref2){ //二级菜单的显示函数,menustr2=菜单要显示的文本,menuhref=菜单文本对应的网址
happydiv2.style.display=''; //第一步自然是先显示二级菜单的容器表格
if(cleartime!=1)clearTimeout(cleartime) //第二步自然是清除定时器关闭的设置
happydiv2.style.posLeft=happydiv.offsetLeft+happydiv.offsetWidth; //二级菜单定位"左"
temptop1=event.srcElement.parentElement.parentElement
happydiv2.style.posTop=happydiv.offsetTop+(temptop1.offsetHeight*temptop1.rowIndex) //二级菜单定位"上",根据一级菜单中单个TD的高度*第几个计算
for(i=0;happydiv2.rows.length;i++)happydiv2.deleteRow() //定位完毕,开始显示数据,首先要清除以显示的TD
str3=menustr2.split('**');str4=menuhref2.split('**') //然后分解构成二级菜单的数据
for(i=1;i<str3.length;i++){ //按照数组的大小循环生成单个TD
tdstr2=happydiv2.insertRow().insertCell() //在二级菜单中插入<Tr><Td></Td></Tr>
tdstr2.innerHTML="<a href='"+str4[i].replace(/lshdicstr1/g,'<').replace(/lshdicstr2/g,' ').replace(/lshdicstr3/g,'>')+"'>"+str3[i]+"</a>" //设定具体显示的数据,replace将预定字符替换过来
}
cleartime=setTimeout('happydiv.style.display="none";happydiv2.style.display="none"',2000) //一切完毕后加上定时关闭菜单,可选
}
function over1(){ //一,二级菜单中MOVEOVER事件时使用本函数定义菜单效果
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor='eeeeee';event.srcElement.style.borderTop='1 solid';
event.srcElement.style.borderBottom='1 solid'}else if(event.srcElement.tagName=="FONT"||event.srcElement.tagName=="A"){
event.srcElement.parentElement.bgColor='eeeeee';event.srcElement.parentElement.style.borderTop='1 solid';
event.srcElement.parentElement.style.borderBottom='1 solid'}
}
function out1(){ //一,二级菜单中MOVEOUT事件时使用本函数定义菜单效果
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor='';event.srcElement.style.borderTop='';
event.srcElement.style.borderBottom=''
}else if(event.srcElement.tagName=="FONT"||event.srcElement.tagName=="A"){event.srcElement.parentElement.bgColor='';
event.srcElement.parentElement.style.borderTop='';event.srcElement.parentElement.style.borderBottom=''}
}
function click1(){ //一,二级菜单时CLICK单击事件时使用本函数转到指定网址
if(event.srcElement.tagName=="TD")location.href=event.srcElement.all.tags('A')(0).href
}
function over2(){ //基本的HTML导航栏在MOUSEOVER时使用本函数,设定背景,并清除定时关闭
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor='white';if(cleartime!=1)clearTimeout(cleartime)}
}
function out2(){ //基本的HTML导航栏在MOUSEOUT时使用本函数,设定背景,并加上定时关闭菜单的效果
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor='';
cleartime=setTimeout('happydiv.style.display="none";happydiv2.style.display="none"',500)}
}
function click2(){ //基本的HTML导航栏在CLICK单击时转到的网址,目标网址使用自定义的HTML属性GOTO做目标
location.href=event.srcElement.goto
}
function document.onclick(){ //页面单击时关闭所有菜单
happydiv.style.display='none';happydiv2.style.display='none'
}
</script>
<table id=happydiv style='position:absolute;z-index:5;display:none;cursor:hand;border-top:0;border-bottom:0'
bgcolor=white cellspacing=0 border=1 rules=none bordercolorlight=black bordercolordark=white
οnmοuseοver="over1();clearTimeout(cleartime)"
οnmοuseοut="out1();temp1='none';cleartime=setTimeout('happydiv.style.display=temp1;happydiv2.style.display=temp1',500)"
οnclick=click1()>
<tr><Td></td></tr>
</table> <!--一级容器菜单显示表格结束-->
<table id=happydiv2 style='position:absolute;z-index:5;display:none;cursor:hand;border-left:0'
bgcolor=white cellspacing=0 border=1 rules=none bordercolorlight=black bordercolordark=white
οnmοuseοver="over1();clearTimeout(cleartime)"
οnmοuseοut="out1();temp1='none';cleartime=setTimeout('happydiv.style.display=temp1;happydiv2.style.display=temp1',500)"
οnclick=click1()>
<tr><Td></td></tr>
</table> <!--二级扩展菜单显示表格结束-->
<!--
整个程序就是这样的,乍看来乱不可言,细看来则条理清晰,非常实用,几乎没有多余代码,由于定义了函数,所以移植性和可塑性很强
其中数据为 - 相当于"WINDOWS菜单中的水平线"
-->
相关文章:

【海洋女神原创】installshield 32位打包和64位打包的注意事项
32/64位问题要把握几点:1. 明确你的产品是否需要区分32/64位2. 明确你的产品中是否有32/64位的服务注册3. 了解InstallShield Build出来的安装包本身是32位应用程序4. 了解Windows 64位系统上的32位路径和64位路径差异以及如何在InstallShield的系统变量中找到对应的…
如何提高模型性能?这四大方法值得尝试 | CSDN 博文精选
作者 | BoCong-Deng编辑 | 屠敏封图 | 自东方 IC出品 | CSDN 博客写在前面在我们进行模型训练时,如果你只是想要让模型具有不错的性能,那么盲目地尝试网络架构足以达到目的。而在本文中, 我们将为你提供一套用于构建最先进深度学习模型的必备…

ORACLE11g 没有控制文件如何通过rman备份恢复数据的详细实战过程
1、副总裁需要裸恢复的严峻现实 集团总部的信息部负责人给我打电话说为了找一年前的记录,所以需要对一年前2015年5月1日的数据进行恢复。而2016年初因为进行迁移,所以有些文件可能丢失,手上只有rman全备文件,希望在一天之内找回&a…

C语言文件等题
1.#include <stdio.h>double fun(int n){ }main(){ int n; double s; printf("\nInput n: "); scanf("%d",&n); sfun(n); printf("\n\ns%f\n\n",s); NONO();}NONO(){/* 请在此函数内打开文件,输入测试数据&…

使用 Vml 制作立体柱状投票统计图的完整程序
作者:lshdic http://blog.csdn.net/lshdic/<!--以下便是完整的 JsVml 制作柱状投票统计图的完整程序,保存为HTM文件运行即可看到效果其中 array数组中的分组可以为6个也可以为2,3,4,5个等,运行以下程序需要您的浏览器支持VML…
Python, C++和Java代码互翻,Facebook开发首个自监督神经编译器
译者 | 刘畅出品 | AI科技大本营(ID:rgznai100)将早期的编程语言(例如COBOL)的代码库迁移到现在的编程语言(例如Java或C)是一项艰巨的任务,它需要源语言和目标语言方面的专业知识。COBOL如今仍在…

pinpoint的id的生成
traceId的生成 public String getTransactionId() {return TransactionIdUtils.formatString(agentId, agentStartTime, transactionSequence);}public static final String TRANSACTION_ID_DELIMITER "^";public static String formatString(String agentId, long …

X@X.X域名转向的实现
www.chinacs.net 中文C#技术站 当你看到csdncsdn.com时,你肯定把这当作电子邮件地址,其实这个不一定是邮件地址,有可能是域名。现在有越来越多的人开始使用这个形式的地址了。初看起来,你不要以为这个是一个什么非常了不起的技术&…
GPT-3 的到来,程序员会被 AI 取代吗?
无需任何训练,AI可用任何语言编程。作者 | Frederik Bussler译者 | 弯月,责编 | 晋兆雨头图 | CSDN 下载自东方 IC来源 | CSDN以下为译文:2017年的时候,曾有研究人员问:到2040年人工智能是否承担起大多数的编程工作&am…

iphone 下拉刷新控件 EGORefreshTableHeaderView 手动显示更新
参考资料:http://blog.csdn.net/ugg/article/details/7283661 在它基础上进行修改 EGORefreshTableHeaderView 绝对是ios开发中的必选插件,其用法就不再赘述. 为了能够手动的显示更新界面而不是要等到用户实际拖动才触发(比如程序刚启动时), 通过阅读它的代码可以发现,只要自己…

Eclipse create git repository failure(egit)
2019独角兽企业重金招聘Python工程师标准>>> 启动和创建的时候会出现这样的异常信息,具体处理办法如下: cd /path/to/yourRepo.git cd .. mkdir yourRepo mv yourRepo.git yourRepo cd yourRepo git config --local --bool core.bare false g…

如何用asp.net向其他服务器post一条信息
www.chinacs.net 中文C#技术站 using System;using System.Web;using System.Net;using System.IO;using System.Text;namespace SendMessage{ public bool SendMsg(MsgInfo msg){//create requesttry{WebRequest req WebRequest.Create("http://your_post_url");…

Directx11教程(11) 增加一个debug宏
现在我们在common.h中增加一个debug的宏,在每个d3d11函数后调用,如果d3d函数出错,它能够给出程序中错误的代码行数。 common.h代码如下: #pragma once #include <d3d11.h> #include <d3dx10math.h> #if defined(DEBUG…
为什么说机器学习是预防欺诈的最佳工具?
作者 | Giorgi Mikhelidze译者 | 天道酬勤,责编 | 晋兆雨头图 | CSDN付费下载自视觉中国随着现代技术的发展和完善,生活变得越来越舒适。虽然以前人们认为同时进行复杂的操作是不可能的,而如今计算机使这一任务变得很容易了。 与此同时&#…

集成支付宝钱包支付iOS SDK的方法与经验
没想到,支付宝的SDK是我目前用过的所有第三方SDK中最难用的一个了。 下载 首先,你要想找到这个SDK,都得费点功夫。现在的SDK改名叫移动支付集成开发包了,下载页面在 这里 的 “请点此下载集成开发包” Baidu和Googlep排在前面的支…

系统设计与架构笔记:ETL工具开发和设计的建议
好久没写博客了,不是自己偷懒,的确是没有时间哦。 最近项目组里想做一个ETL数据抽取工具,这是一个研发项目,但是感觉公司并不是特别重视,不重视不是代表它不重要,而是可能不会对这个项目要求太高,能满足我们…

如何获取主机的IP址址
http://www.aspcn.com 飞刀 (如需转载,请注明文章来自http://www.aspcn.com 谢谢合作) 这篇文章,我们不准备大规模的讨论技术问题。只是向大家介绍一下我们将如何获得一台主机的IP地址。在Win32 API中我们可以使用NetWork API完成…
炸裂!Google这波操作,预警了什么?
我们都知道谷歌爸爸收购了Cask Data一家公司。长期以来,谷歌致力于推动围绕 GoogleCloud 的企业业务,但在这方面一直被亚马逊和微软吊打,这次的收购正是为了弥补自身的短板。被收购的 Cask Data 是一家专门提供基于Hadoop的大型数据分析服务解…

百度地图设置div样式宽高为百分比不显示地图
如题,不显示地图只要在样式代码里面加以 position:absolute; 代码就可以了 <style type"text/css">body, html,#allmap {width:100%;height:100%;overflow: hidden;margin:0;font-family:"微软雅黑";position:absolute;}</style> 完…

在DataGrid中显示图片
兼谈 DadaGrid 模板列的创建DadaGrid 是 ASP.NET 编程中一个很重要的控件,其优良的可定制功能为提高它的表现力提供了极大的方便。除了与数据源直接绑定以外,我们还可以通过列绑定模板对 DataGrid 的列进行自定义,来按照我们设定的格式显示数…
程序员注意了!人社部“就业报告”:未来5年,这10个新职业有千万缺口
7月23日,人社部联合阿里钉钉发布了《新职业在线学习平台发展报告》,报告有两个核心思想:83%的80后遇到过职业危机,79%的90后担心失业。未来5年,物联网和人工智能人才缺口巨大,新职业人才需求高达千万 这上千…

编译内核出现make CONFIG_DEBUG_SECTION_MISMATCH=y错误
故障问题: 编译内核时出现“make CONFIG_DEBUG_SECTION_MISMATCHy” 错误提示: [rootserver linux-2.6.35.13]# make modules CHK include/linux/version.h CHK include/generated/utsrelease.h CALL scripts/checksyscalls.sh Build…

IOS UITabBarViewController 修改背景颜色
做iOS的都知道,每个项目都有UITabBarController。有的会自定义,有的采取系统,当时我也是用系统的,那时候还是小白,好多技术不太熟练,都用系统的,那时候还是1倍和2倍图片,那时候适配很…

ASP.NET的实时天气及24小时天气预报(C#)
ASP.NET的实时天气及24小时天气预报(C#) 修改其中的url获得其他城市的天气情况 如广州为: http://weather.yahoo.com/forecast/CHXX0037_c.html 注意仅适用于获得yahoo上的天气预报 GetWeather.aspx ----------------------------------- Weather24小时天气getWeath…
中科大硬核“毕业证”:“一生一芯”计划下,5位本科生带自研芯片毕业
作者 | 包云岗编辑 | 伍杏玲本文经作者授权转载自包云岗知乎【CSDN编者按】近日,中国科学院大学五位本科生的硬核“毕业证”引发IT圈热议,在“一生一芯”培养计划下,由五位2016级本科生主导完成一款64位RISC-V处理器SoC芯片设计并实现流片&am…

美团选择电影票
2019独角兽企业重金招聘Python工程师标准>>> 特点: 1可以放大 (两根手指),可以看到缩略图 2可以左右滑动 3上下滑动 步骤: 1绘制座位 在美团点击 转载于:https://my.oschina.net/yanglingui/blog/776852

邮件发送类,支持HTML格式,支持优先级设置
www.chinacs.net 2002-5-9 中文C#技术站 邮件发送类,支持HTML格式,支持优先级设置。通过SOCKET类实现的using System;using System.Text;using System.IO;using System.Net;using System.Net.Sockets; namespace Blood.Com.ClassLib{ /// <summary&…
手绘10张图,把CSRF跨域攻击、JWT跨域认证说得明明白白的
作者 | 写代码的明哥来源 | Python编程时光这篇文章本应该是属于 HTTP 里的一部分内容,但是我看内容也挺多的,就单独划分一篇文章来讲下。什么是跨域请求要明白什么叫跨域请求,首先得知道什么叫域。域,是指由 协议 域名 端口号 …

WYSE Thin Clinet 常用快捷键
1. 同时按住Ctrl Alt Up(向上方向键),即可将远程连接由全屏状态切换到Window状态2. 同时按住Ctrl Alt Down(向下方向键),即可在远程连接进程间切换(类似于Windows系统的Alt Tab功能&…
CSS3模拟IOS滑动开关
前言 H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释效果 代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>CSS3模拟IOS开关</title> <style t…