li标签无法正常显示,display值为none 20C

1 代码

   <style>
        .ck-slide{
            width:720px;

        }
        .ck-slide-wrapper{
            height: 100%;
        }

    </style>
<div class="ck-slide">
    <ul class="ck-slide-wrapper">
        <li>
            <a href="#"><img src="../github/myck_slide-master/images/1.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="#"><img src="../github/myck_slide-master/images/2.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="../github/myck_slide-master/images/3.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="../github/myck_slide-master/images/4.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="../github/myck_slide-master/images/5.jpg" alt="" style="width:700px;"></a>
        </li>

    </ul>

    <script src="../github/myck_slide-master/js/myslide.js">

    </script>
    <script>

       /* $(".ck-slide").ckSlide({
            autoPlay:true
        })*/

    </script>

</div>

//引入的外部样式
* {
    margin: 0px;
    padding: 0px;


}


.ck-slide {
     margin: 100px 0 0 0;
     left: 50%;
     margin-left: -400px;
     width:800px;
     position: relative;

 }


.ck-slide .ck-slide-wrapper {
    top: 0;
    left: 0;
    z-index: 1;
    width:100%;
    position: absolute;

}
.ck-slide-wrapper  li{
    list-style: none;
    display: block;

}


2 显示效果
图片说明

图片说明

3 问题
想实现的效果是轮播。
上述代码在浏览器中打开的时候可以正常显示第一章图片。

按照我个人的理解,ul下面放置了li标签,并且ck-slide样式被设置了指定的宽度居中显示,那么ul下面的li标签会在垂直方向上分布显示,但是实际效果却仅仅显示了第一张图片的效果。通过提示工具查看发现ul下面的li标签除了第一个li标签外 其他li标签的display被设置为了none,这是为什么呀??我没有设置display为none呀


有朋友提到js文件的问题,这里并没有执行js代码,我提供全部代码:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/slide.css">
    <script src="./js/jquery.min.js"></script>
    <style>
        .ck-slide{
            width:720px;
            height:320px;

        }
        .ck-slide-wrapper{
            height: 100%;
        }

    </style>
</head>
<body>

<div class="ck-slide">
    <ul class="ck-slide-wrapper">
        <li>
            <a href="#"><img src="images/1.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="#"><img src="images/2.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="images/3.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="images/4.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="images/5.jpg" alt="" style="width:700px;"></a>
        </li>

    </ul>
    <a href="javascript:;" class="ctrl-slide ck-prev">上一张</a>
    <a href="javascript:;" class="ctrl-slide ck-next">下一张</a>
    <div class="ck-slideBox">
        <div class="slideWrap">
            <ul>
                <li class="current"><em>1</em></li>
                <li><em>2</em></li>
                <li><em>3</em></li>
                <li><em>4</em></li>


            </ul>
        </div>
    </div>
</div>

</body>
</html>


使用到的图片
图片说明

感谢给位朋友的指点!

6个回答

应该是js赋值的,检查轮播的js

qq_23113827
qq_23113827 回复啸淸: 没引入的话,那你就是把js写到当前页面了,看看浏览器控制台报啥错,js方面的
3 年多之前 回复
fengyufuchen
simisty 回复啸淸: 引入的那个js文件不会起到作用 的
3 年多之前 回复
fengyufuchen
simisty 不是的,没有引入任何js
3 年多之前 回复

你上面页面代码中每个li标签的style都有display:none啊???

fengyufuchen
simisty 是的,一运行就有,我不知道哪里来的为什么会有。我知道使用js可以设为block,但是为什么一开始就会有这个呢
3 年多之前 回复

轮播的设置,如果一开始,所有的li 都是block , 那么就会出现一堆图片,挤出来,而轮播要实现的效果就是循环播放图片,也就是简单的轮流将图片设置为block(显示的那张),其余的都隐藏(none),一开始设置,是js 做的,应该是会自动检测,没有设置display 的属性,设置第一张为block,siblings 兄弟元素设置为none

你的slider写得有问题。并没有将隐藏的元素显示出来你不想页面拉长,设置好容器的高宽,overflow hidden隐藏起来,而不是设置slider item隐藏,否则你要修改你的额slider加载完毕后什么的将none设置为block

fengyufuchen
simisty 不太理解答主的意思,我已经提供了全部源码。没有执行js
3 年多之前 回复

你源码里 不是第一个li没有none,后面的li
都有none了吗?

我不知道你引入的js是什么效果的轮播

不过我想那js的效果是:每过一段时间,js会设置当前没有none效果li的下一个li为block,当前这个li设置为none。

html代码中就一个li没有none的原因是为了用户体验好,应该不会写在js中

看了上面的问题,感觉楼主其实是在纠结CSS的问题,但楼上很多答复都是基于JS的。
我在这里假定楼主的JS正确,现在就单是实现楼主想要的li垂直向下排列的功能。
HTML代码如下,拷贝楼主原有代码,同时去除了li中的display:none:

<div class="ck-slide">
    <ul class="ck-slide-wrapper">
        <li>
            <a href="javascript:;"><img src="images/1.jpg" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="images/2.jpg" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="images/3.jpg" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="images/4.jpg" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="images/5.jpg" alt=""></a>
        </li>
    </ul>
    <a href="javascript:;" class="ctrl-slide ck-prev">上一张</a>
    <a href="javascript:;" class="ctrl-slide ck-next">下一张</a>
    <div class="ck-slideBox">
        <div class="slideWrap">
            <ul>
                <li class="current"><em>1</em></li>
                <li><em>2</em></li>
                <li><em>3</em></li>
                <li><em>4</em></li>
            </ul>
        </div>
    </div>
</div>

CSS样式如下,也是在楼主贴出的代码中进行的修改:

<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    ul,li {
        list-style: none;
        display: block;
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
    }
    em {
        font-style: normal;
    }
    /*最外层div*/
    .ck-slide {
         position: relative;
         width: 700px;
         height: 360px;
         margin: 100px auto 0;
         border: 1px solid #eee;
     }
     /*包裹图片的ul,li,及图片*/
    .ck-slide .ck-slide-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
    }
    .ck-slide-wrapper  li,
    .ck-slide-wrapper  li a,
    .ck-slide-wrapper  li a img{
        display: block;
        width: 700px;
        height: 360px;
    }
    /*上一张,下一张按钮*/
    .ck-prev {
        position: absolute;
        top: 50%;
        left: -80px; /*宽度*/
        margin-top: -40px; /*宽度/2*/
        width: 80px;
        height: 80px;
        background: #eee;
        text-align: center;
        line-height: 80px;
    }
    .ck-next {
        position: absolute;
        top: 50%;
        right: -80px; /*宽度*/
        margin-top: -40px; /*宽度/2*/
        width: 80px;
        height: 80px;
        background: #eee;
        text-align: center;
        line-height: 80px;
    }
    /*底部的小标识*/
    .ck-slideBox {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 36px;
        background: #000;
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5;
        text-align: center;
        z-index: 10;
    }
    .ck-slideBox li {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 8px 4px;
        border-radius: 10px;
        background: #fff;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
    }
</style>

最终的效果为:
图片说明
希望对你有所帮助,如果在上面的基础上加上JS之后,轮播出现了问题,那么你可以继续贴出代码来。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
当内容为空是 标签的样式为 display:none;

javascript如何实现当a标签里面的内容为空的时候 (也就是 测试 这2个字为空的时候) 如何让< li > 标签的样式为 display:none; ``` <div id="abc"> <li><a href="#">测试</a></li> <li><a href="#">测试</a></li> <li><a href="#">测试</a></li> <li><a href="#">测试</a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </div> ```

css设置dispay:none;后无法使用display:block;恢复显示

**CSS部分代码如下:** 初学前端,希望大佬指点一下下 - - ``` #list>ol>li>div{ position: absolute; width: 990px; height: 460px; top: 0px; left: 202px; display: none; } #list>ol>li>div:hover img{ display: block;/*想要让图片,在我放到盒子上时就显示出来*/ /*先显示图片,再在这里使用none隐藏,可以成功隐藏图片*/ } ``` **HTML部分代码如下** ``` <div id="list"> <ol> <li> 手机&nbsp;&nbsp;电话卡 <div id="body_lefthidden_Img1"> <img src="这里是图片地址" /> </div> </li> <li>电视&nbsp;&nbsp;盒子</li> </ol> </div> ```

li标签为啥去掉list-style-type:none;后,width就不起作用了呢?

代码如下,详细问题在代码注释边 ``` #topnav{ height:36px; background-color:silver; border: 1px solid seagreen; } #topnav ul{ /*line-height:30px;*/ margin: 5px; padding: 0px; border-bottom: solid; border-bottom-width: 2px; border-bottom-color: darkgreen; float :left; list-style-type: none; } #topnav li{ float: left; padding: 0px; list-style-type: none;/*为何没有它后,宽度失效了?*/ width: 62px; text-align: center; margin: 0px 0px 0px 5px; border: 2px solid darksalmon; background-color: mediumorchid; } #topnav li a{ font-family:arial; padding: 4px;/*想要使得块状区域更大些,但并没有啥作用,把display: block;去掉后,就会超出li标签的宽度,这是怎么回事*/ text-decoration:none; color:tan; display: block; } #topnav li a:hover{ background-color: khaki; color: darkcyan; } #topnav li#select { background-color: darkorange; background-repeat :no-repeat; } </style> </head> <body> <div id ="topnav"> <ul> <li id="select"><a href ="#">jlajla</a></li> <li><a href ="#">jlajla</a></li> <li><a href ="#">jlajla</a></li> <li><a href ="#">jlajla</a></li> </ul> </div> </body> ```

关于js中display:block与none 的切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>树形菜单</title> <style type="text/css"> *{ padding: 0px; margin: 0px auto; } div{ margin: 20px 0px 0px 30px; } ul{ display: none; padding: 10px 0px 0px 40px; } span{ font-size: 18px; } li{ font-size: 14px; line-height: 28px; } .icon{ list-style-image: url(images/icon-top.gif) } .end{ list-style-image: url(images/icon-end.gif) } </style> <script> window.onload=function(){ var imgs=document.getElementsByTagName("img"); var uls=document.getElementsByTagName("ul"); for(var i=0;i<imgs.length;i++){ imgs[i].index=i; uls[i].index=i; imgs[i].onclick=function(){ if(uls[this.index].style.display=" "){ uls[this.index].style.display="block"; }else{ uls[this.index].style.display=" "; } } } } </script> </head> <body> <div> <img src="images/classfiy.jpg" alt=""> <span>分类讨论区</span> <ul class="icon"> <li class="front">BBS系统</li> <li>共建水木</li> <li>站务公告栏</li> <li>妆点水木</li> <li class="end">申请版主</li> </ul> </div> <div> <img src="images/info.jpg" alt=""> <span>社会信息</span> <ul class="icon"> <li class="front">美容品与饰品代理</li> <li>考研资料市场</li> <li>商海纵横</li> <li>动物保护者</li> <li>动物世界</li> <li class="end">中国风·神州各地</li> </ul> </div> <div> <img src="images/entertain.jpg" alt=""> <span>休闲娱乐</span> <ul class="icon"> <li class="front">射击类游戏</li> <li>动作类游戏</li> <li>益智类小游戏</li> <li>恐怖游戏</li> <li class="end">单机游戏</li> </ul> </div> <div> <img src="images/tech.jpg" alt=""> <span>电脑技术</span> <ul class="icon"> <li class="front">C</li> <li>C++</li> <li>C#</li> <li>JAVA</li> <li>javascript</li> <li class="end">oracle</li> </ul> </div> </body> </html>

python+selenium如何抓取diplay:none的标签内容?

![图片说明](https://img-ask.csdn.net/upload/201711/23/1511436782_235289.png) 如图 我抓取到的页面里面由于这几个标签是displaynone 导致抓不到 代码如下 from selenium import webdriver url = "http://t.shuqi.com/#!/ct/read/bid/6584515/cid/639384" driver = webdriver.PhantomJS(executable_path='G:/phantomjs/bin/phantomjs.exe') driver.get(url) js = 'document.getElementsByClassName("read-body")[0].getElementsByTagName("div")[3].style.display="block";' driver.execute_script(js) contentText = driver.find_element_by_id('read_in').text w = open('G:/python/pytxt/dynamic/1.txt','w') w.write(contentText) driver.quit()

请求大佬支援!!!display:block和display:none在一起的时候不是会覆盖none吗?

## 我的display:block没有覆盖display:none ![图片说明](https://img-ask.csdn.net/upload/201905/08/1557294754_120425.png) ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>tab栏切换</title> <script src="jquery-1.11.1.min.js"></script> <style> *{/*去除页面原有边距*/ margin: 0; padding: 0; } .wrapper{/*定义标题盒子*/ width: 326px; height: 29px; margin: 100px auto; border: 1px solid red; } .products{/*定义产品盒子*/ width: 1200px; height: 500px; margin: 0px auto; border: 1px solid #931CBB; } .tab-item{/*标题栏设置*/ float:left; display: block; font-size: 20px;/*字体大小*/ background-color: white; } .active{/*标题栏选中状态*/ border-top: 3px solid red; } .selected{/*显示产品*/ display: block; } .main{/*隐藏产品*/ display: none; } img{/*定义图片*/ float: left; width: 600px; height: 250px; } a:hover{/*鼠标悬停变色*/ background-color:aqua; } ul{/*去除小圆点*/ list-style: none; } a{ text-decoration: none;/*去除下划线*/ } </style> </head> <body> <div class="wrapper"> <ul class="tab"> <li class="tab-item"><a href="#">国际大牌</a></li> <li class="tab-item"><a href="#">国妆名牌</a></li> <li class="tab-item"><a href="#">清洁用品</a></li> <li class="tab-item"><a href="#">男士精品</a></li> </ul> </div> <div class="products"> <div class="main"> <img alt="" src="../../../图片/一个人⭕⭕的小日子/2.png"> <img alt="" src="../../../图片/一个人⭕⭕的小日子/5.png"> <img alt="" src="../../../图片/黄昏少女/11.png"> <img alt="" src="../../../图片/黄昏少女/8.png"> </div> <div class="main"> <img alt="" src="../../../图片/黄昏少女/1.png"> <img alt="" src="../../../图片/黄昏少女/2.png"> <img alt="" src="../../../图片/黄昏少女/3.png"> <img alt="" src="../../../图片/黄昏少女/4.png"> </div> <div class="main"> <img alt="" src="../../../图片/黄昏少女/5.png"> <img alt="" src="../../../图片/黄昏少女/5.png"> <img alt="" src="../../../图片/黄昏少女/5.png"> <img alt="" src="../../../图片/黄昏少女/5.png"> </div> <div class="main"> <img alt="" src="../../../图片/黄昏少女/7.png"> <img alt="" src="../../../图片/黄昏少女/7.png"> <img alt="" src="../../../图片/黄昏少女/7.png"> <img alt="" src="../../../图片/黄昏少女/7.png"> </div> </div> </body> <script> // 需求1:给tab栏的每一个li标签设置鼠标移入事件:当前li添加active类,其他的兄弟li移除active类 // 需求2:给当前索引栏引入一致的div,让他添加selected类,其他的兄弟div移除selected类 $(function(){ $('.tab>.tab-item').mouseenter(function(){ $(this).addClass('active').siblings('li').removeClass('active'); // 获取当前这个li标签的索引 var index1=$(this).index(); console.log(index1); // 需求2: $('.products>.main').eq(index1).addClass('selected').siblings('div').removeClass('selected'); }); $('.tab>.tab-item').mouseleave(function(){ $(this).removeClass('active'); }); }); </script> </html> ```

ajax返回数据后在<ul>之后添加<li>标签无法显示

ajax方法 ``` function ajax(prodNo){ var json = {"prodNo":prodNo}; $.ajax({ type:"POST", url:"product_ajax", data:json, success:function(data){ $("#prodName").html(data.product.name+" "+data.product.color+" "+data.product.prodNo); $("#prodPrice").html("¥"+data.product.price); $("#prodDescription").html(data.product.description); $("#images").html(""); $.each(data.images, function(i, image){ var item = "<li><a href='"+image.imgBig+"'><img src='"+image.imgSmall+"' /></a></li>"; $("#images").append(item); //拼接标签 $("#images").listview("refresh"); //刷新列表 $("#images").trigger("create"); //重新加载样式 }); } }); } ``` 对图片显示的JQ代码(是否有可能是JQ控制的结果) ``` $(document).ready(function() { // Exposure product image gallery $(function(){ var gallery = $('#images'); gallery.exposure({controlsTarget : '#controls', imageControls : false, controls : { prevNext : false, pageNumbers : false, firstLast : false }, pageSize : 5, enableSlideshow: false, showCaptions: false, slideshowControlsTarget : '#slideshow', onThumb : function(thumb) { var li = thumb.parents('li'); var fadeTo = li.hasClass($.exposure.activeThumbClass) ? 1 : 0.7; thumb.css({display : 'none', opacity : fadeTo}).stop().fadeIn(200); thumb.hover(function() { thumb.fadeTo('fast',1); }, function() { li.not('.' + $.exposure.activeThumbClass).children('img').fadeTo('fast', 0.7); }); }, onImageHoverOver : function() { if (gallery.imageHasData()) { // Show image data as an overlay when image is hovered. gallery.dataElement.stop().show().animate({bottom:0+'px'},{queue:false,duration:160}); } }, onImageHoverOut : function() { // Slide down the image data. var imageDataBottom = -gallery.dataElement.outerHeight(); gallery.dataElement.stop().show().animate({bottom:imageDataBottom+'px'},{queue:false,duration:160}); }, onImage : function(image, imageData, thumb) { var w = gallery.wrapper; // Fade out the previous image. image.siblings('.' + $.exposure.lastImageClass).stop().fadeOut(500, function() { $(this).remove(); }); // Fade in the current image. image.hide().stop().fadeIn(500); // Setup hovering for the image data container. imageData.hover(function() { // Trigger mouse enter event for wrapper element. w.trigger('mouseenter'); }, function() { // Trigger mouse leave event for wrapper element. w.trigger('mouseleave'); }); // Check if wrapper is hovered. var hovered = w.hasClass($.exposure.imageHoverClass); if (hovered) { if (gallery.imageHasData()) { gallery.onImageHoverOver(); } else { gallery.onImageHoverOut(); } } if (gallery.showThumbs && thumb && thumb.length) { thumb.parents('li').siblings().children('img.' + $.exposure.selectedImageClass).stop().fadeTo(200, 0.7, function() { $(this).removeClass($.exposure.selectedImageClass); }); thumb.fadeTo('fast', 1).addClass($.exposure.selectedImageClass); } } }); }); // Exposure end ``` body部分 ``` <div id="container"> <div id="content"> <div class="content-inner"> <div class="main-content"> <div class="detail-item"> <!-- Product Gallery Begin --> <div class="product-gallery float-left"> <div id="exposure"></div> <div class="panel"> <div id="controls"></div> <div id="slideshow"></div> <ul id="images"> <c:if test='${map.images!="[]"}'> <c:forEach items="${map.images}" var="image"> <li><a href="${image.imgBig}"><img src="${image.imgSmall}" /></a></li> </c:forEach> </c:if> </ul> </div> </div> </div> </div> </div> </div> </div> ```

麻烦告知:PHP点击显示隐藏标签

为什么我这样写了以后点击管理员管理隐藏的标签不显示呢? ``` session_start();/*这里开启session*/ $role=$_SESSION["role"]; if($role=="admin"){ echo '<div id="admin_left_class"> <h2 onClick="showHide("d06")">管理员管理</h2>/*点击管理员管理显示隐藏的标签*/ <ul> <div class="ETCHED" id="d06" style="display:none;">/*默认为隐藏状态*/ <li><a href="../admin_add.php">添加管理员</a></li> <li><a href="../admin_list.php">管理员列表</a></li> </div> </ul> </div>'; ``` 默认是这样的状态 ![](https://img-ask.csdn.net/upload/201610/22/1477104049_550110.png) 要这样的效果 ![](https://img-ask.csdn.net/upload/201610/22/1477104076_535934.png) 但是我得代码点击后不显示,这是为什么呀?

用dispaly:none无法隐藏列表

想先隐藏li下嵌套的ul列表 用display为none怎么不行 是不是和其它设置的css有关![图片说明](https://img-ask.csdn.net/upload/201708/02/1501657538_143618.png)![图片说明](https://img-ask.csdn.net/upload/201708/02/1501657544_545597.png)![图片说明](https://img-ask.csdn.net/upload/201708/02/1501657550_536422.png)![图片说明](https://img-ask.csdn.net/upload/201708/02/1501657534_990760.png)

求助大佬,html li标签中出现了文字错位!

![图片说明](https://img-ask.csdn.net/upload/201905/31/1559280836_938533.png) 我定义了li的高度,,也定义了a标签的行高(行高等于li的高度),可以实现文字在li中的垂直居中了! 但是我在文字前边加了一个图像,导致文字错位了,求教大佬是怎么引起的,怎么解决呢! 如下图,li是这样插入的 ``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content="@@"> <meta name="Description" content=""> <title>@@</title> <style> header{width:1000px; margin:0 auto;} #nav ul { width:1000px; margin:0 auto; height:50px; padding:0; list-style:none; border-top:solid 5px #1b0b88; border-bottom:solid 5px #1b0b88; background:url(./11.jpg); margin-bottom:25px; } #nav ul li { float:left; text-align:center; height:50px; line-height:50px; width:25%; font-size:20px ; font-family:microsoft yahei; } #nav ul li a { text-decoration:none; color:#800080; } #nav ul li a:hover { display:block; color:#FFFFFF; background:#e2e2e2; } #nav ul li:hover { display:block; color:#FFFFFF; background:#e2e2e2; } .dh1{width:1000px; height:30px; margin:0 auto; background:white; margin-bottom:10px; } .dh1 li{ float:left; width:20%; line-height:30px; list-style:none; } .dh1 ul li img{ display:inline; width:30px; padding:0px; margin:0px; vertical-align: middle; } .dh1 li a{ font-size:20px; color:black; } </style> </head> <body style="background-image:url(./22.jpg)"> <header style="border:2px solid gray;margin-bottom:20px;"> <div class="logo" style="line-height:100px; font-size:50px; font-family:Microsoft Yahei; color:#12599e;background-image:url(./11.jpg)"> <img style="height:100px;float:left;" src="./1.jpg" /> <div style="display:block; "> &nbsp&nbsp&nbsp <a style="list-style:none;text-decoration:none" href="@@">@@</a> </div> </div> </header> <div id="nav"> <ul> <li><a href="#" />基础导航</a></li> <li><a href="#" />倾听音乐</a></li> <li><a href="#" />前行印迹</a></li> <li><a href="#" />关于我</a></li> </ul> </div> <div class="dh1"> <ul> <li><img src="http://static.nipic.com/images/favicon.ico" /><a href="#" /><span>昵图网</span></a></li> <li><img src="https://www.baidu.com/cache/icon/favicon.ico" /><a href="#" /><span>百度图片</span></a></li> <li><img src="./00000.jpg" /><a href="#" /><span>搜狗图片</span></a></li> <li><a href="#" /><span>360图片</span></a></li> <li><a href="#" /><span>360图片</span></a></li> </ul> </div> <div class="dh1"> <ul> <li><a href="#" />昵图网</a></li> <li><a href="#" />百度图片</a></li> <li><a href="#" />搜狗图片</a></li> <li><a href="#" />360图片</a></li> <li><a href="#" />360图片</a></li> </ul> </div> <div id="main"> </div> <footer> </footer> </body> </html> ``` 之后我又尝试给img来了一个display:block;并设置了一个line-heght=li的高度,,但是把文字给顶到第二行来了,不在第一行显示! ![图片说明](https://img-ask.csdn.net/upload/201906/01/1559354050_630974.png)

求助html,li标签中的文字和图片不在一行!

``` <div class="dh1"> <ul> <li><img src="http://static.nipic.com/images/favicon.ico" /><a href="#" />昵图网</a></li> <li><img src="https://www.baidu.com/cache/icon/favicon.ico" /><a href="#" />百度图片</a></li> <li><img src="./00000.jpg" /><a href="#" />搜狗图片</a></li> <li><a href="#" />360图片</a></li> </ul> </div> ``` ``` .dh1{width:1000px; height:30px; margin:0 auto; background:white; margin-bottom:10px; } .dh1 li{ display:block; float:left; width:25%; line-height:30px; list-style:none; } .dh1 li img{ display:block; line-height:30px; width:30px; padding:0px; margin:0px; vertical-align: middle; } .dh1 li a{ font-size:20px; color:black; } ```

如果图片被设置成display:none,那定位postion:relative是怎样定位的呢?

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ padding: 0; margin: 0; } div{ height:700px; width: 1480px; margin:0 auto; padding: 10px; border: 4px solid gray; /* z-index:-1;*/ position: relative; /*background-image: url("picture/bg.jpg")*/ } h1{ text-align: center; color:rgb(56, 53, 53); } li{ list-style: none; } img{ width: 300px; height:300px; margin-top: 10px; margin-left:50px; border:5px solid grey } .img2{ display: none; } li{ list-style-type: none; float: left; a:hover .img2{ display: block; width: 340px; height:340px; position: relative; z-index: 2; top:-10px; left:-10px; } </style> </head> <body><h1>太阳系各个星球</h1> <div> <ul> <li><a><img src="picture/地球.jpg.jpg"><img src="picture/地球.jpg.jpg" class="img2"></a></li> <li><a><img src="picture/土星.jpg.jpg"><img src="picture/土星.jpg.jpg" class="img2"></a></li> <li><a><img src="picture/天王星.jpg.jpg"><img src="picture/天王星.jpg.jpg" class="img2"></a></li> <li><a><img src="picture/木星.jpg.jpg"><img src="picture/木星.jpg.jpg" class="img2"></a></li> <li><a><img src="picture/海王星.jpg.jpg"><img src="picture/海王星.jpg.jpg" class="img2"></a></li> <li><a><img src="picture/火星.jpg.jpg"><img src="picture/火星.jpg.jpg" class="img2"></a></li> <li><a><img src="picture/金星.jpg.jpg"><img src="picture/金星.jpg.jpg" class="img2"></a></li> <li><a><img src="picture/水星.jpg"><img src="picture/水星.jpg" class="img2"></a></li> </ul> ``` 悬浮上一行的下一行的往下挤,但是第2行却正确将图片悬浮出来,所以为什呢?怎样改动?就把悬浮的图片设置成相对定位图片你们自己随便找一个吧,解决立即采纳

求大神。。。html中为什么点击不能使隐藏的li显示??

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style> li{ border: 1px solid #FFF; cursor: pointer; } .outer{ list-style: none; margin: 0; padding: 0; padding: 10px; cursor: pointer; } .inner{ display: none; } </style> <script> function show(){ document.getElementsByClassName("inner").display="inline"; } </script> <body> <ul class="outer"> <li id='yishu' onclick="show()"> 艺术类 <ul class="inner"> <li name="yishu"> 唱歌 </li> <li name="yishu"> 跳舞 </li> <li name="yishu"> 吉他 </li> </ul> </li> </ul> <ul class="outer"> <li id='tiyu' onclick="show()"> 体育类 <ul class="inner"> <li name="tiyu"> 长跑 </li> <li name="tiyu"> 短跑 </li> <li name="tiyu"> 跳高 </li> </ul> </li> </ul> <ul class="outer"> <li id='yishu' onclick="show()"> 学习类 <ul class="inner"> <li name="xuexi"> 语文 </li> <li name="xuexi"> 数学 </li> <li name="xuexi"> 英语 </li> </ul> </li> </ul> </body> </html> 设置了隐藏之后点击不能让已经隐藏的二级菜单显示出来。。是为什么啊。。。

selenium练习:用js解决页面元素display:none的方法,报错怎么解决?

想要做到在百度搜索“蔡”,自动显示框中选中“蔡维泽”,然后点击。现在报错不知怎么解决? ``` driver.get("https://www.baidu.com"); Thread.sleep(2000); driver.findElement(By.id("kw")).sendKeys("蔡"); //通过js修改页面元素属性来将元素置位可见 JavascriptExecutor je=(JavascriptExecutor) driver; je.executeScript("document.getElementsByClassName('bdsug')[0].style.display='block'"); WebElement auto_text=driver.findElement(By. xpath("//li[@data_key='蔡维泽']")); Actions action=new Actions(driver); action.moveToElement(auto_text).click().perform(); ``` 报错代码: ``` unknown error: Cannot read property 'style' of undefined ```

当点击li时,jquery隐藏或显示ul的动态li

<div class="post-text" itemprop="text"> <p>In php while loop i got this type of data and when i click on li which id="test1" then hide that li which id="test1" and show li which id="new_test1" i want to for particular ul means i click "li" then do process for that particular ul in which that li is present. </p> <pre><code>&lt;ul id="cpvote"&gt; &lt;li id="test1"&gt;Message 1&lt;/span&gt;&lt;/li&gt; &lt;li id="test2"&gt;Message 2&lt;/li&gt; &lt;li id="test3"&gt;Message 3&lt;/li&gt; &lt;li id="new_test1" style="display:none"&gt;Message 4&lt;/li&gt; &lt;li id="new_test2" style="display:none"&gt;Message 5&lt;/li&gt; &lt;/ul&gt; &lt;ul id="cpvote"&gt; &lt;li id="test1"&gt;Message 1&lt;/span&gt;&lt;/li&gt; &lt;li id="test2"&gt;Message 2&lt;/li&gt; &lt;li id="test3"&gt;Message 3&lt;/li&gt; &lt;li id="new_test1" style="display:none"&gt;Message 4&lt;/li&gt; &lt;li id="new_test2" style="display:none"&gt;Message 5&lt;/li&gt; &lt;/ul&gt; &lt;ul id="cpvote"&gt; &lt;li id="test1"&gt;Message 1&lt;/span&gt;&lt;/li&gt; &lt;li id="test2"&gt;Message 2&lt;/li&gt; &lt;li id="test3"&gt;Message 3&lt;/li&gt; &lt;li id="new_test1" style="display:none"&gt;Message 4&lt;/li&gt; &lt;li id="new_test2" style="display:none"&gt;Message 5&lt;/li&gt; &lt;/ul&gt; </code></pre> </div>

css中关于hover和display隐藏显示的问题

``` <ul class="publicity-detail clearfloat"> <li class="first"><img src="./img/index/chuangxin.png"></li> <li class="two"><img src="./img/index/chuangxin-hover.png"></li> <ul> ``` 在css中先给 two 设置了display:none,然后又给first:hover设置了none以two设置了display:block,但是鼠标划过的时候first消失了可是two却没出来,这是什么原因. ![图片说明](https://img-ask.csdn.net/upload/201608/12/1470990003_195204.png)![图片说明](https://img-ask.csdn.net/upload/201608/12/1470990024_351752.png)![图片说明](https://img-ask.csdn.net/upload/201608/12/1470990040_475016.png)![图片说明](https://img-ask.csdn.net/upload/201608/12/1470990050_348335.png)

轮播图前后按钮无法正常显示

<style> * {margin: 0; padding: 0;list-style: none;text-decoration: none;} #box {width: 600px;height: 400px;border: 1px solid aliceblue;overflow: hidden;position: relative;margin: 20px auto;} #box img {width: 600px;height: 400px;} .arrow {display: none; width: 30px; height: 30px; line-height: 30px; font-size: 20px; text-align: center;background: rgba(0,0,0, .3);color: #fff;z-index: 3;position: absolute;margin-top: 185px;} #box:hover .arrow {display: block;} .arrow:hover {background: rgba(0,0,0, .7);} #prev {left: 20px;} #next {right: 20px;} .button .on {background: orangered;} .button {width: 100px;height: 10px;position: absolute;left: 250px;bottom: 10px;z-index: 2;} .button span:nth-child(1) {margin-left: 0;} .button span {display: block;float: left;width: 10px;height: 10px;border-radius: 50%;border: 1px solid #fff;margin-left: 8px;} </style> <script type="text/javascript"> </script> </head> <body> <div id="box"> <ul> <li><img src="img/1.jpg" alt="1"></li> <li><img src="img/2.jpg" alt="2"></li> <li><img src="img/3.jpg" alt="3"></li> <li><img src="img/4.jpg" alt="4"></li> <li><img src="img/5.jpg" alt="5"></li> </ul> <div class="button"> <span class="on"></span> <span></span> <span></span> <span></span> <span></span> </div> <a href="javascript:;" class="arrow" id="prev" >&lt;</a> <a href="javascript:;" class="arrow" id="next" >&gt;</a> </div> 为什么这样写控制前后轮播的按钮无法正常显示?

li:houver 的鼠标效果 求大神帮忙!!!

#top #nav li:hover ul ul, #top #nav li:hover ul ul ul,#top #nav li:hover ul ul ul ul{ display:none; } #top #nav li:hover ul, #top #nav li li:hover ul, #top #nav li li li:hover ul, #top #nav li li li li:hover ul{ display:block; } ![图片说明](https://img-ask.csdn.net/upload/201708/31/1504146082_155858.png) 为什么有时候鼠标放在一级菜单上 二级菜单显示了 ,准备把鼠标移动到二级菜单上,二级菜单却隐藏了

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

再不跳槽,应届毕业生拿的都比我多了!

跳槽几乎是每个人职业生涯的一部分,很多HR说“三年两跳”已经是一个跳槽频繁与否的阈值了,可为什么市面上有很多程序员不到一年就跳槽呢?他们不担心影响履历吗? PayScale之前发布的**《员工最短任期公司排行榜》中,两家码农大厂Amazon和Google**,以1年和1.1年的员工任期中位数分列第二、第四名。 PayScale:员工最短任期公司排行榜 意外的是,任期中位数极小的这两家公司,薪资...

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

数据库——玩转SQL语句(以MySQL为例)

一、前言 照着大学的SQL server来学

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

华为初面+综合面试(Java技术面)附上面试题

华为面试整体流程大致分为笔试,性格测试,面试,综合面试,回学校等结果。笔试来说,华为的难度较中等,选择题难度和网易腾讯差不多。最后的代码题,相比下来就简单很多,一共3道题目,前2题很容易就AC,题目已经记不太清楚,不过难度确实不大。最后一题最后提交的代码过了75%的样例,一直没有发现剩下的25%可能存在什么坑。 笔试部分太久远,我就不怎么回忆了。直接将面试。 面试 如果说腾讯的面试是挥金如土...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

程序员写出这样的代码,能不挨骂吗?

当你换槽填坑时,面对一个新的环境。能够快速熟练,上手实现业务需求是关键。但是,哪些因素会影响你快速上手呢?是原有代码写的不够好?还是注释写的不够好?昨夜...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

HTTP与HTTPS的区别

面试官问HTTP与HTTPS的区别,我这样回答让他竖起大拇指!

程序员毕业去大公司好还是小公司好?

虽然大公司并不是人人都能进,但我仍建议还未毕业的同学,尽力地通过校招向大公司挤,但凡挤进去,你这一生会容易很多。 大公司哪里好?没能进大公司怎么办?答案都在这里了,记得帮我点赞哦。 目录: 技术氛围 内部晋升与跳槽 啥也没学会,公司倒闭了? 不同的人脉圈,注定会有不同的结果 没能去大厂怎么办? 一、技术氛围 纵观整个程序员技术领域,哪个在行业有所名气的大牛,不是在大厂? 而且众所...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

终于懂了TCP和UDP协议区别

终于懂了TCP和UDP协议区别

无代码时代来临,程序员如何保住饭碗?

编程语言层出不穷,从最初的机器语言到如今2500种以上的高级语言,程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新,一边面临由于许多代码已存在,程序员编写新应用程序时存在重复“搬砖”的现象。 无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法,它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中,可视化建模来组装和配置应用程序。这样一来,开发者直...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

01、Java入门(Getting Started);02、集成开发环境(IDE);03、项目结构(Eclipse JavaProject);04、类和对象(Classes and Objects);05:词法结构(Lexical Structure);06:数据类型和变量(Data Type and Variables);07:运算符(Operators);08:控制流程语句(Control Flow Statements);

Java岗开发3年,公司临时抽查算法,离职后这几题我记一辈子

前几天我们公司做了一件蠢事,非常非常愚蠢的事情。我原以为从学校出来之后,除了找工作有测试外,不会有任何与考试有关的事儿。 但是,天有不测风云,公司技术总监、人事总监两位大佬突然降临到我们事业线,叫上我老大,给我们组织了一场别开生面的“考试”。 那是一个风和日丽的下午,我翘着二郎腿,左手端着一杯卡布奇诺,右手抓着我的罗技鼠标,滚动着轮轴,穿梭在头条热点之间。 “淡黄的长裙~蓬松的头发...

大牛都会用的IDEA调试技巧!!!

导读 前天面试了一个985高校的实习生,问了他平时用什么开发工具,他想也没想的说IDEA,于是我抛砖引玉的问了一下IDEA的调试用过吧,你说说怎么设置断点...

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

立即提问
相关内容推荐