精华内容
下载资源
问答
  • HTML5用div实现下拉列表

    万次阅读 2018-10-08 18:08:48
    HTML5用div实现下拉列表 下拉列表分为无序列表和有序列表 无序列表 <html> <body> <h4>一个无序列表:</h4> &lt...

    HTML5用div实现下拉列表

    下拉列表分为无序列表和有序列表

    无序列表

    <html>
    <body>
    <h4>一个无序列表:</h4>
    <ul>
      <li>咖啡</li>
      <li>茶</li>
      <li>牛奶</li>
    </ul>
    </body>
    </html>
    

    在这里插入图片描述

    有序列表

    <!DOCTYPE html>
    <html>
    <body>
    
    <ol>
      <li>咖啡</li>
      <li>牛奶</li>
      <li>茶</li>
    </ol>
    
    <ol start="50">
      <li>咖啡</li>
      <li>牛奶</li>
      <li>茶</li>
    </ol>
     
    </body>
    </html>
    

    在这里插入图片描述

    嵌套列表

    <html>
    
    <body>
    
    <h4>一个嵌套列表:</h4>
    <ul>
      <li>咖啡</li>
      <li>茶
        <ul>
        <li>红茶</li>
        <li>绿茶</li>
        </ul>
      </li>
      <li>牛奶</li>
    </ul>
    
    </body>
    </html>
    

    在这里插入图片描述

    嵌套列表2

    <html>
    
    <body>
    
    <h4>一个嵌套列表:</h4>
    <ul>
      <li>咖啡</li>
      <li>茶
        <ul>
        <li>红茶</li>
        <li>绿茶
          <ul>
          <li>中国茶</li>
          <li>非洲茶</li>
          </ul>
        </li>
        </ul>
      </li>
      <li>牛奶</li>
    </ul>
    
    </body>
    </html>
    

    在这里插入图片描述

    定义列表

    <html>
    
    <body>
    
    <h2>一个定义列表:</h2>
    
    <dl>
       <dt>计算机</dt>
       <dd>用来计算的仪器 ... ...</dd>
       <dt>显示器</dt>
       <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>
    
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 使用DIV下拉列表

    2017-12-10 20:38:00
    最开始制作下拉列表,我们...,来实现下拉列表,不过这种下拉列表的样式是固定的,如果我们想把下拉列表做的更加好看一些,可以使用div制作下拉列表。 以上是使用div制作的下拉列表的只能出现请选择的一个di...

          最开始制作下拉列表,我们使用的是表单元素里面的一个标签<select></select>,并且里面加上<option></option>,来实现下拉列表,不过这种下拉列表的样式是固定的,如果我们想把下拉列表做的更加好看一些,可以使用div制作下拉列表。

          

          以上是使用div制作的下拉列表的只能出现请选择的一个div制做的类似于文本框,并不能实现下拉选择的效果:

          这时候就要使用到函数:

          它首先要实现当点击该文本框时要出现下面的内容,然后在在选择一个以后其他的隐藏,并且将这个值放在请输入的地方显示就可以实现使用div制作下拉列表的方式,起到了为下拉列表美化的效果。

    转载于:https://www.cnblogs.com/maoqiaoyu123/p/8003805.html

    展开全文
  • ul-li(div下拉列表

    2019-07-11 23:12:05
    ul-li(div下拉列表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ul-li的下拉列表</title> <style> #sel { display...

    ul-li(div)下拉列表

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ul-li的下拉列表</title>
        <style>
            #sel {
                display: table-cell;
            }
            ul#ul {
                list-style: none;
                border: 1px solid #ccc;
                background-color: #fff;
                display: table-cell;
                margin: 0;
                padding: 0;
            }
            ul#ul li {
                height: 22px;
                line-height: 22px;
            }
            ul#ul li:focus {
                min-height: 1.2em;
            }
            ul#ul li:hover {
                background-color: rgba(12,145,229,.9);
                color: #fff;
            }
        </style>
    </head>
    <body>
    <label for="sel"></label><select name="" id="sel" style="width:50%">
        </select>
        <ul id="ul">
            <li>&nbsp;&nbsp;1</li>
            <li>&nbsp;&nbsp;1</li>
            <li>&nbsp;&nbsp;1</li>
            <li>&nbsp;&nbsp;1</li>
        </ul>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
        <script>
            $("#ul").hide();
            $("#sel").unbind('click').on("click", function (e) {
                e.stopPropagation();
                // 解决有时显示重复问题
                $("#sel").blur();
                ulStyle();
                $("#ul").toggle();
            });
            // 点击页面其他区域隐藏下拉列表
            $(document).on("click",function () {
               $("#ul").hide();
            });
            // 浏览器切换tab页隐藏下拉列表
            document.addEventListener('visibilitychange', function () {
                if (document.visibilityState === 'hidden') { // 状态判断
                    $("#ul").hide();
                }
            });
            // ul下拉样式
            function ulStyle() {
                $("#ul li").css("width", "auto");
                $("#ul").css("width", "auto");
                // 如果宽度太小的话让它等于下拉框宽度
                if ($("#ul").width() < 359) {
                    $("#ul").css("width", $("#sel").width());
                }
            }
        </script>
    </body>
    </html>
    

    还有一个问题,浏览器窗口大小改变的时候,ul的宽度等于初始化时下拉列表的宽度,而下拉列表是相对宽度,随窗口大小改变,所以宽度不相等。

    展开全文
  • div+css 下拉列表

    2012-09-04 17:14:11
    使用 div+css实现下拉列表的功能 兼容ie6 火狐
  • 本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果。分享给大家供大家参考。具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还...
  • HTML用DIV/CSS实现下拉列表

    千次阅读 2018-10-08 20:24:55
    div class="title" &gt; &lt;h1&gt;SYROS&lt;/h1&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;HOME&lt;/a&gt; &lt;ul ...

    HTML代码:

    <body>
    		
    		<div class="title" >
    		<h1>SYROS</h1>
    		
    		<ul>
    			<li><a href="">HOME</a>
    				<ul class="home_ul">
    					<li>home1</li>
    					<li>home1</li>
    					<li>home1</li>
    				</ul>
    			</li>
    			<li><a href="">PAGES</a></li>
    			<li><a href="">PORTFOLIO</a></li>
    			<li><a href="">BLOG</a></li>
    			<li><a href="">SHOP</a></li>
    			<li><a href="">FEATURES</a></li>
    		</ul>
    		
    		</div>

    CSS代码:

    body{
    	margin: 0px;
    }
    .title{
    	width: 100%;
    	height: 100px;
    	position: absolute;
    	z-index: 1000;
        color: white;
        margin-left: 25px;
        margin-top: 15px;
        
    }
    .title h1{
    	float: left;
    
    }
    .title ul{;
    	list-style: none;
    }
    .title ul li{
    	float: left;
    	margin-left: 30px;
    	padding: 5px 5px 5px 5px;
    	font-size: 10px;
    }
    .title ul li a{
    	color: white;
    	text-decoration: none;
    }
    .title ul li a:hover{
    	color: yellow;
    }
    .home_ul{
    	position: absolute;
    	display: none;
    	background-color: white;
    	color: black;
    }
    .title .home_ul li{
    	float: none;
    }
    .title ul li:hover .home_ul{
    	display: block;
    }
    .bg{
    	width: 100%;
    	height: 700px;
    	background-image: url(../img/about_us_title_bg.jpg);
    	background-repeat: no-repeat;
    }
    

    实现效果:

    由于div标签默认是纵向排列,所以需要使用float: left;使其水平排列。

    list-style: none;去掉文本圆点。

    text-decoration: none;去掉文本下划线。

    要实现下拉列表就在内容里再加一个<ul>,以此类推,要几级菜单就加几个。

    <li><a href="">HOME</a>
                    <ul class="home_ul">
                        <li>home1</li>
                        <li>home1</li>
                        <li>home1</li>
                    </ul>
                </li>

    鼠标移至“HOME”上,用hover这个属性,这里用到两种方法,color使鼠标移上文本变颜色,display:block;使隐藏的文本显示出来

     

     

     

     

     

    展开全文
  • js+div实现下拉列表

    千次阅读 2008-11-06 11:44:00
    .selectDiv { border: 1px solid #ff9900;} .optionDiv { border:1px solid #ff9900;border-top:0px;position:absolute;visibility:hidden;} .optionDiv div { font-size:12px;font-family:Tahoma;...
  • 使用DIV+CSS实现下拉列表菜单

    千次阅读 2011-01-19 11:09:00
    <title>DIV+CSS实现下拉列表菜单 <!-- ul {  margin: 0px;  padding: 0px;  list-style-type: none; } li{  float:left;  width:160px;  margin-left:1px;  } ul li a{  ...
  • css实现下拉列表

    千次阅读 2019-09-06 14:02:25
    为什么要用下拉列表,因为有动态效果而且可看可不看的,我认为使用下拉列表对我们的页面有美化作用。 怎么实现? 首先思路就是使用display属性来进行控制,这是网页设计非常重要的属性之一。关于display属性,我们...
  • JavaScript做DIV下拉列表

    2018-10-29 17:00:37
    1.设置下拉列表:   2.设置“menu”默认为隐藏: display:none; 3.给“sel”添加点击(onclick)事件:点击显示“menu” 4.给menu中的各项(item)添加点击事件:点击item隐藏“menu”,并把点击的item的值...
  • 废话不多说了,直接给大家贴代码了,具体代码如下所述: ...div { float: left; width: 100%; } .selector-containter { margin-bottom: 10px; } .selector { width: 200px; background: #FFF; border: 1px solid
  • 使用ul li 实现下拉列表多选

    千次阅读 2020-04-13 09:07:13
    使用ul li 实现下拉列表多选 使用ul li 实现下拉列表多选,select为固定样式,但使用ul li 可自定义样式,具体实例如下: <html> <body> <input type="text" id="selectInput" placeholder="请...
  • div层模拟下拉列表

    千次阅读 2011-01-19 19:12:00
    实现的效果图如下:   代码:   样式: .SelectTitle{display:block; color:#466b95; text-decoration:none; line-height:15px; padding:3px 20px 3px 3px; padding:4px 20...
  • CSS3实现下拉列表的功能

    千次阅读 2018-06-27 20:26:12
    CSS3实现下拉列表的功能 会发现很多网站使用的有下拉列表的功能,这样能够节省页面的空间,看起来也更好看。典型的就是腾讯云阿里云的下拉面板。里面各种综合的功能。 想要实现这种效果,方法很多,不借用JS,...
  • 然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表? 解决思路如下:在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件...
  • jQuery的9种方式实现下拉列表

    千次阅读 2018-08-18 13:11:59
    利用基本动画、滑动动画、淡入淡出、自定义动画和事件实现下拉列表框。我只是将所学的知识统统实现了一遍,但是如果加上排列和组合不止这九种。(这么神奇,又在吹牛吧。)附代码如下 &lt;!DOCTYPE html&...
  • css3实现下拉列表

    千次阅读 2018-11-30 13:56:04
    利用css3的新特性transition过渡特性实现下拉列表框 (js方式前面已经实现) transition 主要有四大特性 1.transition-property 过渡的属性 2.transition-duration 过渡持续的时间 3.transition-delay 过渡...
  • DIV模仿下拉菜单

    2014-08-21 10:14:03
    使用DIV实现列表弹出,选择列表内容后将内容存储到input
  • div id="scroll" style="width: 100px;height:500px;overflow-y: auto;"> <div style="width: 100%;height: 2000px;background-color: red;"></div> </div> <script> window....
  • js方式实现下拉列表

    万次阅读 2018-08-18 13:38:59
    原型思想实现函数的调用 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &...
  • 代码如下: <div class=”dropdownContainer... <div class=”dropdownDefault”>1</div>  ”downArrow>  ”dropdrown-menu”>  <li><a>1</a></li>  <li><a>2</a></li>  <li><a>6</a></li>  <li><a>8</a></li
  • js 实现下拉列表

    千次阅读 2018-10-18 14:58:18
    //实现下拉菜单 $(".menu>ul>li").addClass("relative") $(".menu>ul>li ul").addClass("not-show-it") $(".menu>ul>li").mouseenter(function(){ $(this).find("ul").toggleClass("show-it1 not-show-it") ...
  • 重点知识 mousedown事件:mousedown的执行顺序大于blur事件 ... <div> <input ref=search @focus=showList(true) v-model=search @blur=showList(false)/> (1)>1 <li style=width: 100px
  • jQuery+div+css模拟select自定义下拉列表框,简单轻巧实用。
  • 使用DIV+CSS技术实现导航栏菜单的制作,鼠标经过每个菜单标题,它的子菜单就会出现。
  • js实现下拉列表选中

    千次阅读 2018-06-06 22:44:23
    简单的一个小案例 ... <div class="select">  <p>all    <li value="aaa" class="Selected">aaa  <li value="zs">zs  <li value="ls">ls  <li value="ww">ww  <li value="zl">zl    </div>  </div> ...
  • 使用Vue实现下拉列表框批量添加选项,设置被选中的值。 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习Vue</title> <!-- 使用CDN...
  • web中下拉菜单原理,即在用JavaScript控制不同DIV的现实和隐藏!
  • div   class = "col-md-7" >     < div   class = 'input-group date form_date'   >     < input   name = "startTm"   id = "datetimepicker"   type = 'text'   class = "form-control input...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,486
精华内容 10,194
关键字:

div实现下拉列表