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>
</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程序模 ...

随机推荐

墨刀手机app原型工具
https://modao.io 并且墨刀对开放项目永久免费!
SQL SERVER 生成MYSQL建表脚本
/****** Object: StoredProcedure [dbo].[GET_TableScript_MYSQL] Script Date: 06/15/2012 13:05:14 ***** ...
$(function(){})和$(document).ready(function(){})
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二是onloa ...
Struts2 - Action no cache
整了两天,终于找到一个比较满意的答案了:如何让action不被浏览器缓存写一个interceptor: package com.my.interceptor; import javax.servle ...
HackerRank "Minimum Average Waiting Time" !
Something to learn: http://blog.csdn.net/yuwenshi/article/details/36666453 Shortest Job First Algori ...
使用laravel的Eloquent模型获取数据库的指定列
使用laravel的Eloquent模型获取数据库的指定列使用Laravel的ORM——Eloquent时,时常遇到的一个操作是取模型中的其中一些属性,对应的就是在数据库中取表的特定列. 如果使 ...
request的生命周期
有如下功能: 从index.jsp页面点击超链接进入TestServlet服务器,TestServlet服务器再请求转发到test.jsp. 在index.jsp里设置了request的attribu ...
微软为Visual Studio开发助手拓展C++支持
近日,微软宣布了一项 Visual Studio“开发助手”(Developer Assistant)插件的重大更新,其现已支持“基于 C++ 的情境感知 web 解决方案”.开发助手能够嵌入 Vis ...
黄聪：WordPress动作钩子函数add_action()、do_action()源码解析
WordPress常用两种钩子,过滤钩子和动作钩子.过滤钩子相关函数及源码分析在上篇文章中完成,本篇主要分析动作钩子源码. 然而,在了解了动作钩子的源码后你会发现,动作钩子核心代码竟然跟过滤钩子差不多 ...
算法的上帝——Donald E.Knuth(转)
开始介绍前先膜拜之~ 密尔沃基市,是美国威斯康辛州最大的城市.1938年1月10日,圣诞刚过不久,密尔沃基市民像往常一样平静地生活着.咖啡店里,有人在议论着罗斯福总统的救市新政策,有人在议论着到底该 ...

ee

ee的更多相关文章

随机推荐

热门专题