【渲染页面案例】(html,css,javascript)

最新推荐文章于 2024-09-29 11:29:55 发布

王猫粮

最新推荐文章于 2024-09-29 11:29:55 发布

阅读量74

点赞数

文章标签： javascript html servlet

本文链接：https://blog.csdn.net/m0_70684059/article/details/129752079

版权

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none; 
    }
    li{
        overflow: hidden;
    }
    li img{
        float:left;
        width: 100px;
    }
   </style>
<body>
    <ul>
    </ul>
    <script>
        var filmList=[
            {
                url:"https://pic.maizuo.com/usr/movie/7893225a582766f36c3bc72890606b41.jpg?x-oss-process=image/quality,Q_70",
                title:"铃芽之旅",
                grade:7.6
            },
            {
                url:"https://pic.maizuo.com/usr/movie/34abe976a0baf62f0af6d9d41e7ef414.jpg?x-oss-process=image/quality,Q_70",
                title:"保你平安",
                grade:7.3
            },
            {
                url:"https://pic.maizuo.com/usr/movie/3c26b20d91010b563ee5e271b5cf0a82.jpg?x-oss-process=image/quality,Q_70",
                title:"梅根",
                grade:7.7
            }
        ]
        var filmItems=filmList.map(function(item){
            return `<li>
                <img src="${item.url}" alt="">
                <h3>${item.title}</h3>
                <P>观众评分 ${item.grade}</p>
                </li>`
        })
        var oul=document.querySelector("ul")
        oul.innerHTML=filmItems.join("")
    </script>
</body>