zoukankan      html  css  js  c++  java
  • 基本实用代码与下拉菜单

    <input id="btn1" type="button" value="按 钮" />
    <input type="button" value="按 钮" onclick="btn_click()" />
    <input type="text" onblur="alert('失去焦点')" />
    <select onchange="alert('改变')">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    </select>
    <input type="text" onkeyup="alert('按键抬起')" />
    <img src="1.jpg" onmouseleave="alert('鼠标移上')" />

    <script>
    var btn1 = document.getElementById("btn1");
    btn1.onclick = function(){
    alert("点击");
    }

    function btn_click(){
    alert("点击");
    }

    下拉菜单基本原理:设置下拉选项中点击选项,给予一定宽度、高度并设置超出部分隐藏,

             在框内设置下拉选项,给予一定高度、宽度。给予定位;

             设置一个鼠标移上事件,将选项的最大高度改为你下拉框的高度;

    *{
    padding: 0px;
    margin: 0px;
    }
    .nav{
    500px;
    height: 35px;
    border: 1px solid #7FFFD4;
    position: absolute;
    top: 0px;
    left: 0px;
    }
    .nav-title{
    100px;
    max-height: 35px;
    text-align: center;
    line-height: 35px;
    float: left;

    font-size: 20px;
    overflow: hidden;
    }
    .nav-title:hover{

    cursor: pointer;
    max-height: 500px;
    }
    .nav-title ul{
    /*list-style: none;*/
    text-align: center;
    }
    .nav-title li{
    100px;
    height: 35px;
    text-align: center;
    }
    .nav-title li:hover{

    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <div class="nav">
    <div class="nav-title">首页</div>
    <div class="nav-title">花魂
    <ul>
    <li>落岩</li>
    <li>神迹</li>
    <li>幸运</li>
    <li>弱火</li>
    <li>法波</li>
    </ul>
    </div>
    <div class="nav-title">龙须

    <ul>
    <li>冲击</li>
    <li>必杀</li>
    <li>敏捷</li>
    <li>弱雷</li>

    </ul>
    </div>
    <div class="nav-title">龙女
    <ul>
    <li>再生</li>
    <li>幸运</li>
    <li>剑气</li>

    </ul>
    </div>
    <div class="nav-title">蝴蝶
    <ul>
    <li>神迹</li>
    <li>幸运</li>
    </ul>
    </div>
    </div>

    </body>

  • 相关阅读:
    js数组求交集
    php安装oci8和pdo_oci扩展实现连接oracle数据库
    nginx配置静态资源压缩
    SHELL递归遍历文件夹下所有文件
    PHP函数获取临时文件目录
    php去除文件bom头
    tcpdump抓取udp报文
    linux获取当前运行级别
    当安装软件后提示依赖没有安装时
    Ubuntu卸载通过apt-get命令安装的软件
  • 原文地址:https://www.cnblogs.com/zhangjinghe/p/7528914.html
Copyright © 2011-2022 走看看