1、菜单条

主要代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

.a1

{

    background-color:#F00;

    width:100px;

    height:40px;

    top:100px;

    left:30%;

    position:absolute;

    overflow:hidden;

}

.a2

{

    background-color:#F00;

    width:100px;

    height:40px;

    top:100px;

    left:30%;

    position:absolute;

}

.a3

{

    width:100px;

    height:120px;

    top:40px;

    position:absolute;

}

.a4

{

    width:100px;

    height:40px;

    background-color:#F3F;

    overflow:hidden;

    position:absolute;

}

.a41

{

    width:100px;

    height:40px;

    background-color:#F3F;

    position:absolute;

}

.a5

{

    background-color:#90C;

    width:100px;

    height:40px;

    top:40px;

    position:absolute;

    overflow:hidden;

}

.a51

{

    background-color:#90C;

    width:100px;

    height:40px;

    top:40px;

    position:absolute;

}

.a6

{

    background-color:#FF0;

    width:100px;

    height:40px;

    top:80px;

    position:absolute;

    overflow:hidden;

}

.a61

{

    background-color:#FF0;

    width:100px;

    height:40px;

    top:80px;

    position:absolute;

}

.a7

{

    width:100px;

    height:120px;

    left:100%;

    top:0px;

    position:absolute;

    background-color:#36F;

}

.a8

{

    width:100px;

    height:80px;

    left:100%;

    top:0px;

    position:absolute;

    background-color:#36F;

}

.a9

{

    width:100px;

    height:40px;

    left:100%;

    top:0px;

    position:absolute;

    background-color:#36F;

}

</style>

</head>

<body>

  <div class="a1" onmouseover="className='a2'" onmouseout="className='a1'">

    搜索引擎

    <div class="a3">

      <div class="a4" onmouseover="className='a41'" onmouseout="className='a4'">

        百度

        <div class="a7"><a href="http://www.baidu.com">baidu</a></div>

      </div>

      <div class="a5" onmouseover="className='a51'" onmouseout="className='a5'">

        搜狗

        <div class="a8"><a href="www.sougo.com">sougo</a></div>

      </div>

      <div class="a6" onmouseover="className='a61'" onmouseout="className='a6'">

        360

        <div class="a9"><a href="www.360.com">360</a></div>

      </div>

    </div>

  </div>

</body>

</html>

结果：

HTML5练习4的更多相关文章

  1. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  2. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  4. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  5. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  6. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  9. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  10. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

随机推荐

  1. wamp安装失败原因大全

    wamp 是 Windos.Apache.Mysql.PHP集成安装环境 为了安装hdwiki 所以需要这个环境 1.下载wampserver_x86_3.0.6 64位  环境包,安装路径禁止有空格 ...

  2. MT【187】余弦的线性组合

    已知$\alpha+\beta+\gamma=\pi,(\alpha,\beta,\gamma\ge0)$ 求:$3\cos\alpha+4\cos\beta+5\cos\gamma$的最大值____ ...

  3. MT【111】画图估计

    评:此类方程是超越方程,一般情况下无法解出具体的解,常见手段:1.画图  2.猜根.此处可以取特殊值a=2.5,b=3.5,容易知道此时$x=2.5\in(2,3)$

  4. JavaScript学习复习

    JavaScript 输出 使用 window.alert() 弹出警告框. 使用 document.write() 方法将内容写到 HTML 文档中. 使用 innerHTML 写入到 HTML 元 ...

  5. 【POJ2796】Feel Good 单调栈

    题目大意:给定一个长度为 N 的序列,求任意区间 [ l , r ] 中最小的\(min\{v[i],i\in[l,r] \}*\Sigma_{i=l}^rv[i]\). 题解:这是一道具有标准单调栈 ...

  6. 冒泡排序与选择排序(经典版)----java基础总结

    前言:关于冒泡排序和选择排序,每次写的时候都要再看看他们的概念,这次,就自己写明白 1.冒泡排序: 其实冒泡排序应该用例子证明,设数组长度为N. 1．比较相邻的前后二个数据,如果前面数据大于后面的数据 ...

  7. Zabbix应用七:Zabbix发送短信报警

    Zabbix利用Python脚本调用短信API发送报警信息 一.先贴出python脚本: #!/usr/bin/python # _*_ coding:utf8 _*_ import sys impo ...

  8. html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  9. H5 Day2 练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Javascript Image Slider 插件注册机

    Javascript Image Slider 是个不错的轮播插件,兼容 IE 7.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Nets ...