html网站左边四个图，右边一个图的样式以及点击默认第一个效果

最新推荐文章于 2024-04-16 09:02:39 发布

永恒之力

最新推荐文章于 2024-04-16 09:02:39 发布

阅读量357

点赞数 1

文章标签： html js css flex

本文链接：https://blog.csdn.net/weixin_42236746/article/details/111693182

版权

本文介绍了如何使用HTML、CSS和JavaScript实现网页布局，其中左侧展示四个图片，右侧展示一个图片。通过CSS实现灵活布局，利用Flexbox进行定位。同时，通过JavaScript实现点击左侧图片时，右侧显示对应图片的效果，点击时默认选中第一个图片。

摘要由CSDN通过智能技术生成

在这里插入图片描述

html

<div class="bm-view">
    <ul class="imgList">
        <li>
            <img src="123.jpg" style="object-fit: cover;" height="137px">
            <div class="dd" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center">
                <span>简套餐</span>
                <span style="display: none">{$tc.tca}</span>
            </div>
        </li>
        <li>
            <img src="123.jpg" alt="" style="object-fit: cover;"  height="137px">
            <div class="dd" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;di