<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
background-color: #F9F9F9;
}

#menu-div {
position: absolute;
width: 103px;
height: 30px;
position: absolute;
bottom: 0px;
right: 10%;
background: blue;
z-index: 1001;
cursor: pointer;
}

#tip-div {
position: relative;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background: white;
opacity: 0.4;
z-index: 999;
}

.head {
width: 80%;
height: 50px;
background: blue;
margin-left: auto;
margin-right: auto;
opacity: 0.86;
border-radius: 0 0 140px 140px;
}

.head li {
list-style-type: none;
display: inline-block;
margin-left: 10px;
width: 80px;
}

.head li a {
color: white;
text-decoration: none;
line-height: 50px;
width: 80px;
display: block;
text-align: center;
font-weight: bold;
}

.footer {
height: 30px;
width: 80%;
background: blue;
position: absolute;
bottom: 0;
left: 10%;
z-index: 999;
}

.bottom-menu {
width: 70%;
height: 90px;
left: 10%;
position: absolute;
bottom: 5px;
z-index: 1001;
}

.bottom-menu ul li {
float: left;
border-radius: 50%;
width: 80px;
height: 80px;
background: #6666FF;
margin-left: 20px;
cursor: pointer;
z-index: 999;
}

.bottom-menu ul li:HOVER {
background-color: #00B500;
background-origin: content-box;
}

.bottom-menu ul li a {
display:block;
text-align: center;
width: 80px;
height: 80px;
line-height: 80px;
color: white;
font-weight: bold;
}

h3 {
text-align: center;
line-height: 30px;
color: white;
}

ul li {
list-style-type: none;
}

#menu-div div {
display: none;
border: 1px solid blue;
border-radius: 10px 10px 0 0;
font-size: 16px;
color: white;
text-align: center;
}

#menu-div:HOVER div {
position: absolute;
width: 101px;
height: 210px;
bottom: 30px;
right: 0px;
background: blue;
z-index: 1000;
cursor: pointer;
opacity: 0.55;
display: block;
}

#menu-div li {
width: 100%;
height:30px;
line-height:30px;
background-color: blue;
font-weight: bold;

}

#menu-div .first {
border-radius: 10px 10px 0 0;
}
.main {
width: 80%;
position: absolute;
top: 52px;
left: 10%;
bottom: 90px;
}
</style>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tip-div").css({
"position" : "relative",
"width" : "100%",
"height" : "100%",
"position" : "absolute",
"top" : "0px",
"left" : "0px",
"background" : "white",
"opacity" : "0.4",
"z-index" : "999"
}).show();

$("em").css({
"width" : "0",
"height" : "0",
"border-left" : "5px solid transparent",
"border-right" : "5px solid transparent",
"border-bottom" : "10px solid red"
});

$("#menu-div").bind("click", function() {
//$("#menu-div div").show();
});

});
</script>
</head>
<body>
<div class="head">
<ul>
<li><a href="#"></a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
</ul>
</div>
<div class="main">
<iframe width="100%" height="100%" src="a.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
</div>

<div class="bottom-menu">
<ul>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
</ul>
</div>
<div class="footer"></div>
<div id="tip-div" style="display: none;"></div>
<div id="menu-div">
<h3>导&nbsp;&nbsp;航</h3>
<div>
<ul>
<li class="first">权限管理</li>
<li>报警规则</li>
<li>报警信息</li>
<li>节点列表</li>
<li>权限管理</li>
<li>报警规则</li>
</ul>
</div>

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

ee的更多相关文章

  1. Eclipse for Java EE软件操作集锦（一）

    以下是我在Java网站开发过程中,关于软件操作Eclipse中,遇到的一些问题并提供了解决方案.一.java web开发使用的集成开发工具是eclipse for Java EE 官方下载地址:htt ...

  2. 【Java EE 学习 80 上】【WebService】

    一.WebService概述 什么是WebService,顾名思义,就是基于Web的服务,它使用Http方式接收和响应外部系统的某种请求,从而实现远程调用.WebService实际上就是依据某些标准, ...

  3. 【Java EE 学习 74 上】【数据采集系统第六天】【使用Jfreechart的统计图实现】【Jfreechart的基本使用方法】

    之前已经实现了数据的采集,现在已经有了基本的数据,下一步就需要使用这些数据实现统计图的绘制了.这里使用Jfreechart实现这些统计图的绘制.首先看一下Jfreechart的基本用法,只有知道了它的 ...

  4. 【Java EE 学习 69 中】【数据采集系统第一天】【SSH框架搭建】

    经过23天的艰苦斗争,终于搞定了数据采集系统~徐培成老师很厉害啊,明明只是用了10天就搞定的项目我却做了23天,还是模仿的...呵呵,算了,总之最后总算是完成了,现在该好好整理该项目了. 第一天的内容 ...

  5. 【Java EE 学习 67 下】【OA项目练习】【SSH整合JBPM工作流】【JBPM项目实战】

    一.SSH整合JBPM JBPM基础见http://www.cnblogs.com/kuangdaoyizhimei/p/4981551.html 现在将要实现SSH和JBPM的整合. 1.添加jar ...

  6. 轻量级Java EE企业应用实战（第4版）：Struts 2+Spring 4+Hibernate整合开发(含CD光盘1张)

    轻量级Java EE企业应用实战(第4版):Struts 2+Spring 4+Hibernate整合开发(含CD光盘1张)(国家级奖项获奖作品升级版,四版累计印刷27次发行量超10万册的轻量级Jav ...

  7. MyEclipse的项目中把 java EE 5 Libraries 删掉后怎么重新导入

    myeclipse中鼠标右击项目->properties->java Build Path=>Libraries=>Add Library...=>选择MyEclipse ...

  8. 《Java EE 开发技术与案例教程》 这是一本好书啊:简洁精辟（相见恨晚）

    第一章:Java EE 概述 1.get:JPA:Java Persistence API, 数据持久化API: JPA是一种ORM规范,它的实现实例:Hibernate.mybatis 2.Web ...

  9. 【Java EE 学习 25 上】【网上图书商城项目实战】

    一.概述 1.使用的jdk版本:1.6 2.java EE版本:1.6 3.指导老师:传智播客 王建 二.小项目已经实现的功能 普通用户: 1.登陆 2.注册 3.购物 4.浏览 管理员用户(全部管理 ...

  10. eclipse for java developer和eclipse for java ee developer的区别

    eclipse是基于插件机制的软件,插件本身是不能启动和操作的,它们需要一个环境,eclipse使用osgi r4规范实现了这个环境. osgi是java动态模块化的规范,该规范不光要让java程序模 ...

随机推荐

  1. SQLSERVER 脚本转MYSQL 脚本的方法总结

    1.MYSQL(版本为5.6)中SQL脚本必须以分号(;)结尾,这点比SQLSERVER要严谨:关键字与函数名称全部大写:数据库名称.表名称.字段名称全部小写. 2.所有关键字都要加上``,比如 St ...

  2. Readonly和Disabled的区别

    readonly 把输入的字段设为只读,但是没有禁用 readonly=” readonly”; disabled 禁用一个input元素. disabled="disabled" ...

  3. HttpClient简介 post get -转自ibm

    HttpClient简介 HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 jav ...

  4. Linux启动过程详解 (转)

    启动第一步--加载BIOS当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的重要,以至于计算机必须在最开始就找到它.这是因为BIOS中包含了CPU的相关信息.设备启动顺序信息.硬盘 ...

  5. [linux] linux 破解版confluence安装

    OS  centos 6.5  需要的安装包如下: jre-7u67-linux-x64.rpm atlassian-confluence-5.4.4-x64.bin mysql-connector- ...

  6. Shiro权限控制框架

    Subject:主体,可以看到主体可以是任何可以与应用交互的"用户": SecurityManager:相当于SpringMVC中的DispatcherServlet或者Strut ...

  7. android学习笔记43——图形图像处理3——Path

    Path类 Path类可以预先在View上将N个点连成一条“路径”,然后调用Canavas的drawPath(path,paint)即可沿着路径绘制图形. android还为路径绘制提供了PathEf ...

  8. erlang尾递归的概括

    网上看了些,自己总结了下 .没有局部变量,否则会爆栈 .递归函数的参数里面,至少有一个用来作为循环,另外一个一般用来保存临时结果,两者一起形成循环

  9. android关于AndroidManifest.xml详细分析

    http://my.eoe.cn/1087692/archive/5927.html 一.关于AndroidManifest.xmlAndroidManifest.xml 是每个android程序中必 ...

  10. 206. Reverse Linked List

    反转链表 注意是借用  假的头节点,这样算法判断开始和结束,就好很多了. 借用头插法. []dummy/head [] [] [] [] head  curr ==== class Solution ...