qq_42200633
shaokel
采纳率56.1%
2019-05-06 15:02 阅读 636

大佬,请求支援!!!CSS怎么在盒子右边添加垂直分隔线?

我的分隔线添加到了盒子外面
图片说明

而且该如何把数字5 6 7 8 9放在盒子右边的分隔线里面呢,望指教。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝服装精品</title>
    <script src="jquery-1.11.1.min.js"></script>
    <style>
        *{/*清除原有页面所有边距*/
            margin:0;
            padding:0;
        }

        div{/*定义left盒子*/
            width: 500px;
            height: 500px;
            margin: 150px auto;
            border: 1px solid red;
        }

        #ulleft{
            width: 50px;
            border-right: 1px solid red;/*添加左垂直分隔线*/
        }

        #ulcenter li{

        }   

        #ulright{
            width: 450px;
            border-right: 1px solid red;/*添加右垂直分隔线*/
        }

        ul{
            list-style: none;/*去除小圆点*/
        }   

        a{/*a标签处理*/
            width: 50px;
            height: 98px;
            line-height: 100px;/*设置行高*/
            text-align: center;
            display: block;/*设置为块级元素*/
            text-decoration: none;/*去除下划线*/
        }

        img{
            width: 400px;
            height: 500px;  
            display: none;/*隐藏图片*/
        }
    </style>
</head>

<body>
    <div>
        <ul id="ulleft">
            <li><a href="#">0</a></li><hr>
            <li><a href="#">1</a></li><hr>
            <li><a href="#">2</a></li><hr>
            <li><a href="#">3</a></li><hr>
            <li><a href="#">4</a></li>
        </ul>

        <ul id="ulcenter">
            <li><a href="#"><img src="../../../图片/一个人⭕⭕的小日子/2.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/一个人⭕⭕的小日子/5.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/鬼灭之刃/2.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/10.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/9.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/8.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/7.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/6.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/5.png" alt=""></a></li>
            <li><a href="#"><img src="../../../图片/黄昏少女/3.png" alt=""></a></li>
        </ul>

        <ul id="ulright">
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
        </ul>
    </div>
</body>
    <script>
//      需求1:给左边的li设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏
//      需求2:给右边的li设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏
        $(function(){
//          需求1:
            $('#ulleft').find('li').mouseenter(function(){
                var index1 = $(this).index();
                console.log(index1);
//              让中间索引对应的li显示,其他的li隐藏
                $('#ulcenter li').eq(index1).show().siblings('li').hide();
            });
//          

            $('#ulright').find('li').mouseenter(function(){
                var index2 = $(this).index();
                console.log(index2);
            });
        });

    </script>
</html>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    qq_37851008 OnceSure 2019-05-06 15:11
    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>淘宝服装精品</title>
        <script src="jquery-1.11.1.min.js"></script>
        <style>
            * {
                /*清除原有页面所有边距*/
                margin: 0;
                padding: 0;
            }
    
            div {
                /*定义left盒子*/
                width: 500px;
                height: 500px;
                margin: 150px auto;
                border: 1px solid red;
            }
    
            #ulleft {
                width: 50px;
                border-right: 1px solid red;
                /*添加左垂直分隔线*/
            }
    
            #ulcenter,
            #ulleft {
                float: left;
            }
    
            #ulright {
                float: right;
                width: 398px;
                border-left: 1px solid red;
                /*添加右垂直分隔线*/
            }
    
            ul {
                list-style: none;
                /*去除小圆点*/
            }
    
            a {
                /*a标签处理*/
                width: 50px;
                height: 98px;
                line-height: 100px;
                /*设置行高*/
                text-align: center;
                display: block;
                /*设置为块级元素*/
                text-decoration: none;
                /*去除下划线*/
            }
    
            img {
                width: 400px;
                height: 500px;
                display: none;
                /*隐藏图片*/
            }
        </style>
    </head>
    
    <body>
        <div>
            <ul id="ulleft">
                <li><a href="#">0</a></li>
                <hr>
                <li><a href="#">1</a></li>
                <hr>
                <li><a href="#">2</a></li>
                <hr>
                <li><a href="#">3</a></li>
                <hr>
                <li><a href="#">4</a></li>
            </ul>
    
            <ul id="ulcenter">
                <li><a href="#"><img src="../../../图片/一个人⭕⭕的小日子/2.png" alt=""></a></li>
                <li><a href="#"><img src="../../../图片/一个人⭕⭕的小日子/5.png" alt=""></a></li>
                <li><a href="#"><img src="../../../图片/鬼灭之刃/2.png" alt=""></a></li>
                <li><a href="#"><img src="../../../图片/黄昏少女/10.png" alt=""></a></li>
                <li><a href="#"><img src="../../../图片/黄昏少女/9.png" alt=""></a></li>
                <li><a href="#"><img src="../../../图片/黄昏少女/8.png" alt=""></a></li>
                <li><a href="#"><img src="../../../图片/黄昏少女/7.png" alt=""></a></li>
                <li><a href="#"><img src="../../../图片/黄昏少女/6.png" alt=""></a></li>
                <li><a href="#"><img src="../../../图片/黄昏少女/5.png" alt=""></a></li>
                <li><a href="#"><img src="../../../图片/黄昏少女/3.png" alt=""></a></li>
            </ul>
    
            <ul id="ulright">
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">8</a></li>
                <li><a href="#">9</a></li>
            </ul>
        </div>
    </body>
    <script>
        //      需求1:给左边的li设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏
        //      需求2:给右边的li设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏
        $(function () {
            //          需求1:
            $('#ulleft').find('li').mouseenter(function () {
                var index1 = $(this).index();
                console.log(index1);
                //              让中间索引对应的li显示,其他的li隐藏
                $('#ulcenter li').eq(index1).show().siblings('li').hide();
            });
            //          
    
            $('#ulright').find('li').mouseenter(function () {
                var index2 = $(this).index();
                console.log(index2);
            });
        });
    
    </script>
    
    </html>
    
    点赞 评论 复制链接分享
  • qq_41075132 舟遥遥 2019-05-06 16:02

    图片说明

    这个意思?

    <div class="container">
        <div class="content">
          <ul class="left-ul">
            <li class="left-li">0</li>
            <li class="left-li">1</li>
            <li class="left-li">2</li>
            <li class="left-li">3</li>
            <li class="left-li">4</li>
          </ul>
          <ul class="right-ul">
            <li class="right-li">5</li>
            <li class="right-li">6</li>
            <li class="right-li">7</li>
            <li class="right-li">8</li>
            <li class="right-li">9</li>
          </ul>
        </div>
      </div>
    
    <style>
    .container{
      width:100%;
      height:100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .content{
      width:500px;
      height:504px;
      border:1px solid red;
      display: flex;
      justify-content: space-between
    }
    ul{
      list-style: none;
      margin:0;
      padding:0;
    }
    .left-li{
      line-height:100px;
      border-right:1px solid red;
      border-bottom:1px solid red;
    }
    .left-li li:last-child{
      border-bottom:0;
    }
    .right-li{
      line-height:100px;
      border-left:1px solid red;
      border-bottom:1px solid red;
    }
    .right-li li:last-child{
      border-bottom:0;
    }
    .left-ul{
      width:50px;
      background-color: #f1f1f1;
    }
    .right-ul{
      width:50px;
      background-color: #f1f1f1;
    }
    </style>
    
    点赞 评论 复制链接分享

相关推荐