<!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=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0px; padding:0px;}
.cboxx{ width:100%; height:45px; border:#CCC 1px solid; background-color:#CCC;}
.c222{ height:45px; width:200px; border:1px solid #000; position:absolute; left:150px; top:-1px; overflow:hidden;}
.c222:hover{ overflow:visible; cursor:pointer; color:#F90;}
.c333{ height:200px; width:630px; border:1px solid #000; position:relative; top:1px; left:-8px;}
.c444{ height:160px; width:200px; border:1px solid #000; position:relative; float:left; margin-left:6px;}
.c555{ height:30px; width:200px; border:1px solid #000; position:relative; float:left; margin-left:6px; top:5px; line-height:30px; text-align:center;}
.c555:hover{ color:#F00;}
.c666{ height:30px; width:100px; position:relative; border:1px solid #000; left:1000px; top:8px; line-height:40px;}
.c666:hover{ color:#F90; cursor:pointer;}
.c777{ height:480px; width:565px; position:relative; border:1px solid #000; left:630px; top:-198px;display:none;}
.c7771{ height:480px; width:565px; position:relative; border:1px solid #000; left:630px; top:-198px;display:none;}
.c7772{ height:480px; width:565px; position:relative; border:1px solid #000; left:630px; top:-198px;display:none;}
.c888{ height:350px; width:550px; position:absolute; border:1px solid #000; margin-left:6px; top:8px;}
.c999{ height:100px; width:550px; position:absolute; border:1px solid #0FF; left:6px; top:365px;}
.c8881{ height:350px; width:550px; position:absolute; border:1px solid #000; margin-left:6px; top:8px; }
.c9991{ height:100px; width:550px; position:absolute; border:1px solid #0FF; left:6px; top:365px;}
.c8882{ height:350px; width:550px; position:absolute; border:1px solid #000; margin-left:6px; top:8px; }
.c9992{ height:100px; width:550px; position:absolute; border:1px solid #0FF; left:6px; top:365px;}
</style>

</head>

<body>
<div class="cboxx">

<div class="c222"><img src="未标题-1.jpg" />
<div class="c333">
<div class="c444"><img src="830c41e550af4e48c45cc3a0.jpg" /></div>
<div class="c444"><img src="217881748872.jpg" /></div>
<div class="c444"><img src="c0731171813603.jpg" /></div>
<div class="c555" onclick="ccccc1()" ondblclick="ccccc2()">角色扮演
<div class="c777" id="c000">
<div class="c888"><img src="0Z2123041-0.jpg" /></div>
<div class="c999"><p align="left">&nbsp;&nbsp;北宋年间，天下太下。而武林中太白、少林等九大门派并立，更相约于太白峰顶论剑。同一时间，沈浪后人，优雅而神秘的公子羽，和与其有着千丝万缕关系之“黑手”，却正在酝酿着一场足以颠覆江湖的滔天巨浪。</p>
</div>
</div>
<div class="c7771" id="c001">
<div class="c888"><img src="mj0115cj02s.jpg" /></div>
<div class="c999"><p align="left">&nbsp;&nbsp;《QQ飞车》是由腾讯的琳琅天上游戏工作室开发，腾讯游戏发行的一款网络游戏，最高同时在线已超过300万。游戏结合休闲和竞技玩法，戏，采用了物理引擎PhysX来保证车辆运行时的真实感。</p></div>
</div>
<div class="c7772" id="c002">
<div class="c888"><img src="u=1805971805,524519640&fm=11&gp=0.jpg" /></div>
<div class="c999"><p align="left">&nbsp;&nbsp;王者荣耀新手入门玩法介绍，王者荣耀是全球首款5V5英雄公平对战手游，腾讯最新MOBA手游大作，5V5王者峡谷、5V5深渊大乱斗、以及3V3、1V1等多样模式一键体验，热血竞技尽享快感。</p></div>
</div>
</div>
<div class="c555" id="c001" onclick="ccccc3()" ondblclick="ccccc4()">极限竞速</div>
<div class="c555" id="c002" onclick="ccccc5()" ondblclick="ccccc6()">全新手游</div>
</div>
</div>
<div class="c666">返回官网首页</div>
</div>
</body>
</html>
<script>
var a=document.getElementById("c000")
var b=document.getElementById("c001")
var c=document.getElementById("c002")
function ccccc1()
{
a.style.display="block"
b.style.display="none"
c.style.display="none"
}
function ccccc2()
{
a.style.display="none"
b.style.display="none"
c.style.display="none"
}
function ccccc3()
{
b.style.display="block"
a.style.display="none"
c.style.display="none"
}
function ccccc4()
{
a.style.display="none"
b.style.display="none"
c.style.display="none"
}
function ccccc5()
{
c.style.display="block"
b.style.display="none"
a.style.display="none"
}
function ccccc6()
{
a.style.display="none"
b.style.display="none"
c.style.display="none"
}

</script>

overflow onclick ondblclick 练习的更多相关文章

  1. JS代码格式化和语法着色

    有时为了研究学习一些格式不规范的JS代码段,需要将代码段格式化一下,这样思路就会清晰多了,网上找到此款格式化的工具,将以下代码保存为html格式文件即可使用 <html> <head ...

  2. 基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

    在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中界面部分的一些使用知识,包括控件的赋值.取值.清空,以及相关的使用. 我们知道,一般Web界面包括的界面控 ...

  3. 转--基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

    原文  http://www.cnblogs.com/wuhuacong/p/3317223.html 基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用 在前面介绍了两篇关于我的基 ...

  4. 毕业设计 ASP.Net+EasyUI开发 X X露天矿调度管理信息系统(一)

    开篇介绍关于EasyUI技术,界面部分的一些使用知识,包括控件的赋值.取值.清空,以及相关的使用. 我们知道,一般Web界面包括的界面控件有:单行文本框.多行文本框.密码文本框.下拉列表Combobo ...

  5. 鼠标捕获(setCapture，releaseCapture)的学习

    鼠标捕获(setCapture)作用是将鼠标事件捕获到当前文档的指定的对象——对指定的对象设置鼠标捕获.这个对象会为当前应用程序或整个系统接收所有鼠标事件. 所谓鼠标捕获,是指对鼠标事件(onmous ...

  6. javascrpt 页面格式化页面

    下面这个页面,格式化javaScript <html> <head> <title>JS格式化工具 </title> <meta http-equ ...

  7. （转）基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

    原文地址:http://www.cnblogs.com/wuhuacong/p/3317223.html 在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中 ...

  8. GIS可视化——麻点图

    一.引言 目前在客户端绘制POI(Point of Interest,兴趣点)的方式主要是div(Marker的形式).svg.canvas.VML(后边三种就是Vector Layer)几种方式,这 ...

  9. JS格式化工具（转)

    <html> <head> <title>JS格式化工具 </title> <meta http-equiv="content-type ...

随机推荐

  1. MySQL-----一对多

    一对多: 用户表和部门表 用户: 用户id 用户名 部门 1 George   1 2 Elizabeth 1 3 Bruce 2 4 Catherine 3 部门: 部门id 部门名称 1 CEO ...

  2. 第十二节：pandas缺失数据处理

    1.isnull():检查是否含有确实数据 2.fillna():填充缺失数据 3.dropna() :删除缺失值 4.replace():替换值

  3. Eclipse集成Maven的Web工程demo(独立及Maven集成tomcat)

    用到的工具JDK1.8Eclipse Luna j2eeEclipse 集成的Mavetomcat7 (集成在xampp中的独立web服务器,或者通过Maven plugin集成web服务器) 步骤如 ...

  4. Spring MVC-集成（Integration）-生成JSON示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_json.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显示如 ...

  5. .NET Web API - 去掉讨厌的$id并且强制返回json格式

    // 只返回json字符串,屏蔽自动选择xml格式的可能性,同时去掉讨厌的$id var json = config.Formatters.JsonFormatter; json.Serializer ...

  6. Codeforces Round #303 (Div. 2) E

    五道水题,但要手快才好...我手慢了,E题目都没看完TAT.... 想了一发,很水,就是一遍Dijk即可,使用优先队列,同时记录由哪条边转移而来 #include <iostream> # ...

  7. js面向对象初步探究（上） js面向对象的5种写方法

    非常长一段时间看网上大神的JS代码特别吃力.那种面向对象的写法方式让人看得云里来雾里去.于是就研究了一下JS面向对象.因为是初学,就将自己在网上找到的资料整理一下,作为记忆. js面向对象的5种写方法 ...

  8. jQuery EasyUI 1.4更新记录

    问题: menu:修复当删除一个menu项时.menu高度不准确. datagrid:修复当datagrid宽度太小时,fitColumns方法不能使用. 改进: 1.为easyui全部组件新增了自适 ...

  9. php循环，die/exit脚本执行控制，文件载入及错误控制

    循环控制 大部分和c/java同样 for循环 while循环 do while循环 foreach循环(特有) 循环中断 : 1.break: 用于全然停止某个循环,让运行流程进入到循环语句后面的语 ...

  10. mac下安装tensorflow及入门例子

    https://www.tensorflow.org/install/install_mac 使用virtualenv安装,virtualenv相当于使tensorflow运行在虚拟机环境下. 需要使 ...