<!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. Myeclipse SVN错误 443

    转:Myeclipse SVN错误:Error validating server certificate for https// Error validating server certificat ...

  2. C/C++ 函数压栈方式

    一,不同关键字,系统压栈方式 1,如果函数func是__cdecl(VC下的默认调用方式),调用时情况如下 int   main()   {   //参数从右到左压栈   push   4   pus ...

  3. UI-动画

    // ------------------UIImageView的动画------------------ // ------------------UIView的动画---------------- ...

  4. systemd的原理和适用方法

    systemd的原理: https://www.linux.com/learn/tutorials/527639-managing-services-on-linux-with-systemd htt ...

  5. python主要用来做什么

    python这门编程语言在国外极受欢迎,但在国内使用还不是极普遍. 由于python编程效率极高,现在国内的使用者也开始变得越来越多. python主要用来做什么?这个语言到底有哪些作用呢? 下面主是 ...

  6. Python 创建函数和代码重用

    1. cat func.py #!/usr/bin/python def func(): print "hello,this is a function" def func2(): ...

  7. 【Linux】系统之vmstat&iostat

    Linux系统出现了性能问题,一般我们可以通过top.iostat.free.vmstat等命令来查看初步定位问题. iostat常见用法: $iostat -d -k 1 10 #查看TPS和吞吐量 ...

  8. "XX cannot be resolved to a type "eclipse报错及解决说明

    转自:http://zhaoningbo.iteye.com/blog/1137215 引言: eclipse新导入的项目经常可以看到“XX cannot be resolved to a type” ...

  9. linux内存文件系统之指南

    内存文件系统使用及示例:ramdisk, ramfs, tmpfs 第一部分在Linux中可以将一部分内存mount为分区来使用,通常称之为RamDisk. RamDisk有三种实现方式: 第一种就是 ...

  10. PLSQL_性能优化系列12_Oracle Index Anaylsis索引分析

    2014-10-04 Created By BaoXinjian