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>

 结果：

posted on 2016-05-27 20:39  bosamvs  阅读(252)  评论(0)  编辑  收藏  举报

导航