HTML5练习4

Posted 2020-07-14 bosamvs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5练习4相关的知识，希望对你有一定的参考价值。

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的主要内容，如果未能解决你的问题，请参考以下文章

十个html5代码片段，超实用，一定要收藏

20160616 html5练习代码一

HTML5练习

HTML5练习3

[Html5学习笔记]HTML5拓展练习_第1期

spring练习，在Eclipse搭建的Spring开发环境中，使用set注入方式，实现对象的依赖关系，通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段