为什么在这上面运行没效果，自己写的运行只显示页面1-慕课网

为什么在这上面运行没效果，自己写的运行只显示页面1

来源：2-1 页面的横向布局

qq_请叫我曼哥好么_0

2017-03-17 23:26

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>慕课七夕主题</title>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    ul,
    li {
        list-style-type: none;
    }
    /*主体部分*/
    #content {
        width    : 60%;
        height   : 60%;
        top      : 20%;
        left     : 20%;
        overflow : hidden;
        position : absolute;
        border   : 1px solid #ccc;
    }

    .content-wrap {
        position: relative;
    }
    .content-wrap > li {
        width: 100%;
        height: 100%;
        background: #CAE1FF;
        color: red;
        float: left;
        overflow: hidden;
        position: relative;
    }
    li:nth-child(2) {
       background: #9BCD9B;
    }

    li:nth-child(3) {
       background: yellow;
    }

    </style>
</head>

<body>
    <div id='content'>
        <ul class='content-wrap'>
            
            <li> 页面1 </li>
            
            <li> 页面2 </li>
            
            <li> 页面3 </li>
        </ul>
    </div>
    <script type="text/javascript">
        var container = $("#content");
        // 获取第一个子节点
        var element = container.find(":first");
        // li页面数量
        var slides = element.find("li");
        // 获取容器尺寸
        var width = container.width();
        var height = container.height();
        // 设置li页面总宽度
        element.css({
            width : (slides.length * width) + 'px',
            height : height + 'px'
        });
        // 设置每一个页面li的宽度
        $.each(slides, function(index) {
            var slide = slides.eq(index); //获取到每一个li元素
            slide.css({
                width:width+'px',
                height:height+'px'
            });
        });
    </script>
</body>

</html>