模仿口碑网个人管理左侧的效果IE和ff都可用

最新推荐文章于 2022-07-18 10:52:59 发布
最新推荐文章于 2022-07-18 10:52:59 发布
阅读量492 收藏
点赞数
文章标签： ie menu class div border function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zlwork_84/article/details/1922819
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Left_Menu {
width:143px;
height:auto;
}
#Left_Menu_Deal{
height:2px;
overflow:hidden;
}

.Left_Menu_Top_Out{
border:1px #B9D7FE solid;
height:27px;
background-image:url(Mouse_Out.gif);
padding-left:18px;
padding-top:7px;
font-size:14px;
font-weight:bold;
COLOR: #085670;
HEIGHT: 20px;
TEXT-ALIGN: left;
TEXT-DECORATION: none
}

.Left_Menu_Top_Over{
border:1px #B9D7FE solid;
height:27px;
background-image:url(Mouse_Over.gif);
padding-left:18px;
padding-top:7px;
font-size:14px;
font-weight:bold;
COLOR: #085670;
HEIGHT: 20px;
TEXT-ALIGN: left;
TEXT-DECORATION: none
}
.Left_Menu_Body{
border-bottom:1px #B9D7FE solid;
border-left:1px #B9D7FE solid;
border-right:1px #B9D7FE solid;
}
.Left_Menu_Body_Ul{
margin:0px 0px 0px 0px;
padding-left:0px;
}
.Left_Menu_Body_Li_Over{
DISPLAY: block;
PADDING-LEFT: 28px; FONT-WEIGHT: bold; FONT-SIZE: 14px;
HEIGHT: 21px;
padding-top:6px;
text-align:left;
color:#085670;
background-image:url(Left_Menu_bg.gif);
}
.Left_Menu_Body_Li_Out{
DISPLAY: block;
PADDING-LEFT: 28px; FONT-WEIGHT: bold; FONT-SIZE: 14px;
HEIGHT: 20px;
padding-top:7px;
text-align:left;
color:#085670;
}
-->
</style>
<script language="javascript" type="text/javascript" >
function SetLeftMenuTop(id,eveStr)
{
var leftMenuTop,leftMenuBody;
leftMenuTop=document.getElementById("Left_Menu_Top_"+id);
leftMenuBody=document.getElementById("Left_Menu_Body_"+id);
if(eveStr=="onclick")
{
    for(var i=1;i<=3;i++)
 {
 leftMenuTop=document.getElementById("Left_Menu_Top_"+i);
 leftMenuBody=document.getElementById("Left_Menu_Body_"+i);
 if(i==id)
    {
 leftMenuTop.className="Left_Menu_Top_Over";
 leftMenuBody.style.display="";
 }
 else
 {
 leftMenuTop.className="Left_Menu_Top_Out";
 leftMenuBody.style.display="none";
 }
 }
}
else
{
   if(leftMenuBody.style.display=="none")
    {
     if(eveStr=="over")
  {
  leftMenuTop.className="Left_Menu_Top_Over";
  }
  else
  {
  leftMenuTop.className="Left_Menu_Top_Out";
  }
 }
}
}

function SetLeftMenuBodyLi(id,cid,eveStr)
{
var leftMenuBodyUl
leftMenuBodyUl=document.getElementById("Left_Menu_Body_"+id+"_"+cid);
 if(eveStr=="over")
  {
  leftMenuBodyUl.className="Left_Menu_Body_Li_Over";
  }
  else
  {
  leftMenuBodyUl.className="Left_Menu_Body_Li_Out";
  }
}
</script>
</head>

<body>
<div id="Left_Menu" >
     <div id="Left_Menu_Top_1" class="Left_Menu_Top_Out" οnmοuseοver="SetLeftMenuTop(1,'over');" οnmοuseοut="SetLeftMenuTop(1,'out');" οnclick="SetLeftMenuTop(1,'onclick');">首页
    </div>
 <div id="Left_Menu_Body_1" class="Left_Menu_Body" style="display:none;">
 <ul class="Left_Menu_Body_Ul">
 <li id="Left_Menu_Body_1_1" class="Left_Menu_Body_Li_Out" οnmοuseοver="SetLeftMenuBodyLi(1,1,'over');" οnmοuseοut="SetLeftMenuBodyLi(1,1,'out');">首页1
 </li>
 <li id="Left_Menu_Body_1_2" class="Left_Menu_Body_Li_Out" οnmοuseοver="SetLeftMenuBodyLi(1,2,'over');" οnmοuseοut="SetLeftMenuBodyLi(1,2,'out');">首页1
 </li>
 <li id="Left_Menu_Body_1_3" class="Left_Menu_Body_Li_Out" οnmοuseοver="SetLeftMenuBodyLi(1,3,'over');" οnmοuseοut="SetLeftMenuBodyLi(1,3,'out');">首页1
 </li>
 </ul>
 </div>
  <div id="Left_Menu_Deal" ></div>
  <div id="Left_Menu_Top_2" class="Left_Menu_Top_Out" οnmοuseοver="SetLeftMenuTop(2,'over');" οnmοuseοut="SetLeftMenuTop(2,'out');" οnclick="SetLeftMenuTop(2,'onclick');">分类信息
    </div>
 <div id="Left_Menu_Body_2" class="Left_Menu_Body" style="display:none;">
 <ul class="Left_Menu_Body_Ul">
 <li id="Left_Menu_Body_2_1" class="Left_Menu_Body_Li_Out" οnmοuseοver="SetLeftMenuBodyLi(2,1,'over');" οnmοuseοut="SetLeftMenuBodyLi(2,1,'out');">首页111
 </li>
 <li id="Left_Menu_Body_2_2" class="Left_Menu_Body_Li_Out" οnmοuseοver="SetLeftMenuBodyLi(2,2,'over');" οnmοuseοut="SetLeftMenuBodyLi(2,2,'out');">首页111
 </li>
 <li id="Left_Menu_Body_2_3" class="Left_Menu_Body_Li_Out" οnmοuseοver="SetLeftMenuBodyLi(2,3,'over');" οnmοuseοut="SetLeftMenuBodyLi(2,3,'out');">首页111
 </li>
 </ul>
 </div>
  <div id="Left_Menu_Deal" ></div>
  <div id="Left_Menu_Top_3" class="Left_Menu_Top_Out" οnmοuseοver="SetLeftMenuTop(3,'over');" οnmοuseοut="SetLeftMenuTop(3,'out');" οnclick="SetLeftMenuTop(3,'onclick');">分类信息2
    </div>
 <div id="Left_Menu_Body_3" class="Left_Menu_Body" style="display:none;">
 <ul class="Left_Menu_Body_Ul">
 <li id="Left_Menu_Body_3_1" class="Left_Menu_Body_Li_Out" οnmοuseοver="SetLeftMenuBodyLi(3,1,'over');" οnmοuseοut="SetLeftMenuBodyLi(3,1,'out');">首页1112
 </li>
 <li id="Left_Menu_Body_3_2" class="Left_Menu_Body_Li_Out" οnmοuseοver="SetLeftMenuBodyLi(3,2,'over');" οnmοuseοut="SetLeftMenuBodyLi(3,2,'out');">首页1112
 </li>
 <li id="Left_Menu_Body_3_3" class="Left_Menu_Body_Li_Out" οnmοuseοver="SetLeftMenuBodyLi(3,3,'over');" οnmοuseοut="SetLeftMenuBodyLi(3,3,'out');">首页1112
 </li>
    <li id="Left_Menu_Body_3_4" class="Left_Menu_Body_Li_Out" οnmοuseοver="SetLeftMenuBodyLi(3,4,'over');" οnmοuseοut="SetLeftMenuBodyLi(3,4,'out');">首页1112
 </li>

 </ul>
 </div>
 
</div>
</body>
</html>

zlwork_84
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div隐藏滚动条仍保留滚动效果，兼容IE，FF，Webkit 和 O
电鳗的博客
04-19 3万+
需求：一个可以滚动内容的div，超出高度隐藏内容，但是要保留滚动效果又不出现滚动条，同时兼容各种浏览器。 思路： 1.假设这个div叫做scroll_content，规定width和height。 2.overflow-x:hidden; overflow-y:auto; 3.想办法隐藏y滚动条
IE FF OPERA都可用的弹出层实现代码
12-10
代码如下:// JavaScript Document var dv; var dvMsg; function customalert() { dvMsg = document.createElement(“div”); dvMsg.style.position = “absolute”; dvMsg.setAttribute(‘id’, ‘msg’);...
iOS仿口碑外卖两列布局
01-10
使用OC实现口碑外卖的两列布局，以及展示不同的数据源。由于数据涉及到版权问题，我已经把URL去掉，各位请自行斟酌下载。
高仿口碑外卖
u014038534的专栏
05-03 1045
使用了 universal-image-loader异步加载图片， android-async-http进行网络请求， pull-to-reflesh等第三方的东东 下载地址：https://github.com/gindoc/Chowhould.git 都是之前写的，现在没空去改，以后有时间再改吧
LayUI之动态树
oyang的博客
07-18 282
目录一、左侧树形菜单分析main.jsp:(暂时定死) 数据库分析二、后台代码Permission实体类BuildTreeTreeVo PermissionDao三、前台代码mvc.xml， 界面效果图：要动态的菜单那肯定脱离不了数据库，我们的数据肯定也不能定死，要通过数据库得到菜单项的信息。 BuildTree TreeVo PermissionDao 三、前台代码 mvc.xml main.jsp 效果展示图：...
keepalived高可用
小蔡的博客
10-29 4525
文章目录1.keepalived高可用介绍2.keepalived功能3.keepalived高可用故障转移原理4.keepalived工作原理5.keepalived配置文件 高可用集群：keepalived 只要不是云主机，就可以直接使用keepalived，因为有VIP，如果是云主机的话，就需要买slb，slb是一个服务具有负载均衡和高可用的功能。 1.keepalived高可用介绍 keepalived官网 keepalived高可用指的是比如有俩台主机作为调度器，分别连接着n台服务器，当主调度器
overflow:scroll;在ie和ff中的不同表现
zxleezx的专栏
03-16 2378
今天无聊，以前只是知道高宽对行内元素无效，想验证margin和padding对它有木有效……结果是肯定的。可能不管是行内还是块级元素都离不开盒子模型把（个人才疏学浅，表述和理解难免有错误，但是姑且先记下来吧，便于日后总结） 然后看到又这样一句话：作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应。。。。说实话我布局练习做的
js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）
01-19
本文实例介绍了js实现图片轮播相册，具有过渡渐变效果，分享给大家供大家参考，具体内容如下 思路很简单，用2个属性保存当前图片和上一张图片，用2个定时器分别控制透明度和当前过渡的图片。 <HTML> <...
兼容FF/IE跟随鼠标的层的效果
10-30
兼容FF/IE跟随鼠标的层的效果
JS IE和FF兼容性问题汇总
10-30
以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila FF,对于js爱好者必看的一些知识总结。
FF浏览器和IE下载文件乱码问题的解决方法
09-05
大家可以看到如下截图，下载文件出现了乱码，在其他浏览器（IE，Chrome....）上没有出现这个问题，解决方法很简单，遇到类似问题的朋友可以了解下哦
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
基于 Spring Cloud 组件构建的分布式服务架构
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
【微信小程序毕业设计】书店系统开发项目(源码+演示视频+说明).rar
04-25
【微信小程序毕业设计】书店系统开发项目(源码+演示视频+说明).rar 【项目技术】 微信小程序开发工具+java后端+mysql 【演示视频-编号：246】 https://pan.quark.cn/s/cb634e7c02b5 【实现功能】 用户信息管理，图书信息管理，图书类型管理，图书留言管理，论坛信息管理等
基于java的-44-17-宠物销售系统-源码.zip
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
corner中ff max和ff min有什么区别
05-20
FF Max和FF Min是corner中的两个参数，它们分别表示时钟频率最高和最低情况下，寄存器（flip-flop）的最大和最小延迟。 当处于FF Max的corner时，芯片的时钟频率最高，寄存器的延迟最大，因此，设计人员需要确保...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值