ee
<!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>导 航</h3>
<div>
<ul>
<li class="first">权限管理</li>
<li>报警规则</li>
<li>报警信息</li>
<li>节点列表</li>
<li>权限管理</li>
<li>报警规则</li>
</ul>
</div>
</div>
</body>
</html>
ee的更多相关文章
- Eclipse for Java EE软件操作集锦(一)
以下是我在Java网站开发过程中,关于软件操作Eclipse中,遇到的一些问题并提供了解决方案.一.java web开发使用的集成开发工具是eclipse for Java EE 官方下载地址:htt ...
- 【Java EE 学习 80 上】【WebService】
一.WebService概述 什么是WebService,顾名思义,就是基于Web的服务,它使用Http方式接收和响应外部系统的某种请求,从而实现远程调用.WebService实际上就是依据某些标准, ...
- 【Java EE 学习 74 上】【数据采集系统第六天】【使用Jfreechart的统计图实现】【Jfreechart的基本使用方法】
之前已经实现了数据的采集,现在已经有了基本的数据,下一步就需要使用这些数据实现统计图的绘制了.这里使用Jfreechart实现这些统计图的绘制.首先看一下Jfreechart的基本用法,只有知道了它的 ...
- 【Java EE 学习 69 中】【数据采集系统第一天】【SSH框架搭建】
经过23天的艰苦斗争,终于搞定了数据采集系统~徐培成老师很厉害啊,明明只是用了10天就搞定的项目我却做了23天,还是模仿的...呵呵,算了,总之最后总算是完成了,现在该好好整理该项目了. 第一天的内容 ...
- 【Java EE 学习 67 下】【OA项目练习】【SSH整合JBPM工作流】【JBPM项目实战】
一.SSH整合JBPM JBPM基础见http://www.cnblogs.com/kuangdaoyizhimei/p/4981551.html 现在将要实现SSH和JBPM的整合. 1.添加jar ...
- 轻量级Java EE企业应用实战(第4版):Struts 2+Spring 4+Hibernate整合开发(含CD光盘1张)
轻量级Java EE企业应用实战(第4版):Struts 2+Spring 4+Hibernate整合开发(含CD光盘1张)(国家级奖项获奖作品升级版,四版累计印刷27次发行量超10万册的轻量级Jav ...
- MyEclipse的项目中把 java EE 5 Libraries 删掉后怎么重新导入
myeclipse中鼠标右击项目->properties->java Build Path=>Libraries=>Add Library...=>选择MyEclipse ...
- 《Java EE 开发技术与案例教程》 这是一本好书啊:简洁精辟(相见恨晚)
第一章:Java EE 概述 1.get:JPA:Java Persistence API, 数据持久化API: JPA是一种ORM规范,它的实现实例:Hibernate.mybatis 2.Web ...
- 【Java EE 学习 25 上】【网上图书商城项目实战】
一.概述 1.使用的jdk版本:1.6 2.java EE版本:1.6 3.指导老师:传智播客 王建 二.小项目已经实现的功能 普通用户: 1.登陆 2.注册 3.购物 4.浏览 管理员用户(全部管理 ...
- eclipse for java developer和eclipse for java ee developer的区别
eclipse是基于插件机制的软件,插件本身是不能启动和操作的,它们需要一个环境,eclipse使用osgi r4规范实现了这个环境. osgi是java动态模块化的规范,该规范不光要让java程序模 ...
随机推荐
- shopex 网店系统安装教程
centos上配置shopex环境(LNMP) 安装包地址: http://download.csdn.net/detail/nanmu1258/9109297 软件默认下载至在/opt/local ...
- 查看.Net Framework版本的方法
乐博网最新补充(乐博网一步步教你如何最快查看本机.net framework的版本): 方法一: 第一步: 打开“我的电脑“,在地址栏输入 %systemroot%\Microsoft.NET\Fr ...
- .NET和java的RSA互通,仅此而已
.NET和java的RSA互通,仅此而已 在开始这篇文章之前,先请读者朋友阅读老唐的这两篇文章: 1.Java与.Net环境下RSA加密解密交互不成功的问题解决 2.Java与.Net环境下RSA加密 ...
- php反射机制获取未知类的详细信息
使用ReflectionClass就可以获取未知类的详细信息 demo: require("hello.php"); $class = new ReflectionClass(&q ...
- Sqlserver 树形查询
WITH tree AS(SELECT dwpid, dwid,1 AS x2level,dwmc,/*CAST(dwmc AS NVARCHAR(max)) x2name,*/CAST(+dwid ...
- C基础--结构体成员初始化方式
之前在linux内核代码中看到结构体成员成员初始化使用类似于.owner = THIS_MODULE, 不太见过,于是搜了个博客,分享下: 转自:http://www.cnblogs.com/Anke ...
- 使用eclipse和maven生成java web程序war包
一.eclipse中,在需要打包的项目名上右击,然后把鼠标光标指向弹出框中的“run as”: 二.之后会看到在这个弹出框的右侧会出现一个悬浮窗,如下: 三.在上边的第二个悬浮窗鼠标点击“maven ...
- (WPF, MVVM) Event 处理
WPF的有些UI元素有Command属性可以直接实现绑定,如Button 但是很多Event的触发如何绑定到ViewModel中的Command呢? 答案就是使用EventTrigger可以实现. 继 ...
- BestCoder Round #84 Bellovin
Bellovin 题意: 给个中文链接:戳戳戳 题解: 这个题其实就是让你求每一位的最长公共子序列,之后输出就好了,求这个有2个算法,一个是n方,另一个nlogn,所以显然是nlogn的算法,其实这就 ...
- NeHe OpenGL教程 第二十四课:扩展
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...