zoukankan html css js c++ java

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>

结果：

查看全文

相关阅读:
IE8使用chrome内核渲染
 JS中的call()方法和apply()方法用法总结（挺好转载下）
解决雷达图文字显示不全问题
 echarts legend文字配置多个颜色（转）
vue中Axios的封装和API接口的管理
 echarts 折线拐点收藏
 echarts 折线图自定义颜色与修改legend颜色
 MUI框架按钮点击响应不好的问题解决办法
 ECharts将折线变平滑和去掉点的属性
 单例模式——创建型模式01

原文地址：https://www.cnblogs.com/bosamvs/p/5534549.html