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. codeforces4A

    Watermelon CodeForces - 4A Qingyu有一个简单的问题想让你解决. 输入一个数,如果它是2,或者它是奇数,输出NO,否则输出YES. 很简单吧,因此你应该很快解决. 输入 ...

  2. django rest framework serializers小结

    注:转载至https://blog.csdn.net/l_vip/article/details/79156113 引言 serializers是什么?官网是这样的”Serializers allow ...

  3. BZOJ2303 APIO2011方格染色（并查集）

    比较难想到的是将题目中的要求看做异或.那么有ai,j^ai+1,j^ai,j+1^ai+1,j+1=1.瞎化一化可以大胆猜想得到a1,1^a1,j^ai,1^ai,j=(i-1)*(j-1)& ...

  4. How to 对拍？

    对拍从数学的统计学角度来说是一个好的方法,至少能在你竞赛中帮你拿回一些分--yzr大牛pas的对拍一开始还没写过,突然想学一下对拍.那么就学吧.dp水题(搜索):https://www.luogu.o ...

  5. 洛谷 P1412 经营与开发 解题报告

    P1412 经营与开发 题目描述 \(4X\)概念体系,是指在\(PC\)战略游戏中一种相当普及和成熟的系统概念,得名自4个同样以"\(EX\)"为开头的英语单词. \(eXplo ...

  6. bzoj4152 The Captain (dijkstra)

    做dijkstra,但只需要贪心地把每个点连到它左边.右边.上边.下面的第一个点就可以了 #include<bits/stdc++.h> #define pa pair<int,in ...

  7. 【uoj126】 NOI2013—快餐店

    http://uoj.ac/problem/126 (题目链接) 题意 求基环树直径. Solution zz选手迟早退役,唉,右转题解→_→:LCF 细节 拓扑排序的时候度数为0时入队.我在想什么w ...

  8. 在Linux中将脚本做成系统服务

    有一些情况下,我们需要将某些脚本作为系统服务来运行.比如,在我使用workerman框架开发php程序时,需要使用管理员权限来运行,而且需要开机自行启动程序提供服务.这个时候将启动程序写成服务就可以很 ...

  9. LeetCode 6罗马数字转整数

    罗马数字包含以下七种字符:I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并列 ...

  10. JS中的new操作符

    在JS中定义一个构造函数,然后用new操作符构造对象obj,JS代码如下. function Base(){ this.name = "swf"; this.age =20; } ...