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>

  • 相关阅读:
    python基础学习(2)
    python基础语法
    面试常见问题(2)——数据库
    面试常见问题(1)——TCP协议
    python基础回顾(一)
    安装Beautiful Soup
    MongoDB的安装、配置和可视化
    神奇的斐波那契---解决兔子繁衍问题
    正规式、正规文法与自动机
    词法分析程序的设计与实现
  • 原文地址:https://www.cnblogs.com/zhangjinghe/p/7528914.html
Copyright © 2011-2022 走看看