锚点实现图片切换

最新推荐文章于 2021-06-17 20:17:52 发布

这家伙不愿透露姓名

最新推荐文章于 2021-06-17 20:17:52 发布

阅读量682

点赞数 2

分类专栏： html+css 效果案例文章标签：前端

本文链接：https://blog.csdn.net/A4465643/article/details/108371489

版权

html+css 效果案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用html+css 生成相册，通过点击右侧小图片，实现大图片切换。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 530px;
            height:410px ;
            border: 1px solid rgb(102,102,102);
            margin: 0 auto;
            background-color: rgb(102,102,102);
        }
        .box_one{
            width: 530px;
            height: 40px;
            line-height: 63px0;
            text-align: center;
            background-color: rgb(102,102,102);
            color: rgb(201,236,238);
            font-size: 18px;
            padding-top: 23px;
        }
        .box_two{
            width: 400px;
            height: 299px;
            margin-left: 26px;
            border: 1px solid white;
            overflow: hidden;
            float: left;
        }
        .box_two img{
            width: 400px;
            height: 299px;
        }
        .box_three{
            width: 102px;
            height: 300px;
            float: left;
            overflow: scroll;
        }
        .box_three img{
            width: 70px;
            height: 49px;
            border: 1px solid white;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box_one">
                电子相册
        </div>
        <div class="box_two">
           <img src="../images/mn1.jpg" alt="" id="pic1">
           <img src="../images/mn2.jpg" alt="" id="pic2">
           <img src="../images/mn3.jpg" alt="" id="pic3">
           <img src="../images/mn4.jpg" alt="" id="pic4">
           <img src="../images/mn5.jpg" alt="" id="pic5">
           <img src="../images/mn6.jpg" alt="" id="pic6">
           <img src="../images/mn7.jpg" alt="" id="pic7">
           <img src="../images/mn8.jpg" alt="" id="pic8">
           

        </div>
        <div class="box_three">
            <a href="#pic1"><img src="../images/c1.jpg" alt="" id=""></a>
            <a href="#pic2"><img src="../images/c2.jpg" alt="" id=""></a>
            <a href="#pic3"> <img src="../images/c3.jpg" alt="" id=""></a>
            <a href="#pic4"><img src="../images/c4.jpg" alt="" id=""></a>
            <a href="#pic5"><img src="../images/c5.jpg" alt="" id=""></a>
            <a href="#pic6"><img src="../images/c6.jpg" alt="" id=""></a>
            <a href="#pic7"><img src="../images/c7.jpg" alt="" id=""></a>
            <a href="#pic8"><img src="../images/c8.jpg" alt="" id=""></a>
           
        </div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述

这家伙不愿透露姓名

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
锚点实现图片切换

使用html+css 生成相册，通过点击右侧小图片，实现大图片切换。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
复制链接

扫一扫

专栏目录