轮询界面

最新推荐文章于 2024-02-22 15:52:21 发布

房东的喵

最新推荐文章于 2024-02-22 15:52:21 发布

阅读量182

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/luxunlx123/article/details/110242232

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>源计划</title>
        <link rel="stylesheet" href="css/yjh.css"/>
    </head>
    <body>
        <div class="box1">
            <div class="btn">
                <a href="#img1">1</a>
                <a href="#img2">2</a>
                <a href="#img3">3</a>
                <a href="#img4">4</a>
                <a href="#img5">5</a>
                <a href="#img6">6</a>
                <a href="#img7">7</a>
                <a href="#img8">8</a>
                <a href="#img9">9</a>
                <a href="#img10">10</a>
                <a href="#img11">11</a>
                <a href="#img12">12</a>
                <a href="#img13">13</a>
                <a href="#img14">14</a>
                <a href="#img15">15</a>
                <a href="#img16">16</a>
            </div>
        
        <div class="list">
            <img src="img/1.jpg" id="img1"/>
            <img src="img/2.jpg" id="img2"/>
            <img src="img/3.jpg" id="img3"/>
            <img src="img/4.jpg" id="img4"/>
            <img src="img/5.jpg" id="img5"/>
            <img src="img/6.jpg" id="img6"/>
            <img src="img/7.jpg" id="img7"/>
            <img src="img/8.jpg" id="img8"/>
            <img src="img/9.jpg" id="img9"/>
            <img src="img/10.jpg" id="img10"/>
            <img src="img/11.jpg" id="img11"/>
            <img src="img/12.jpg" id="img12"/>
            <img src="img/13.jpg" id="img13"/>
            <img src="img/14.jpg" id="img14"/>
            <img src="img/15.jpg" id="img15"/>
            <img src="img/16.jpg" id="img16"/>
        </div>
    </div>
    </body>
</html>

CSS

*{margin: 0;padding: 0;}
img {display: block;}
.box1 {width: 600px;height: 337px;border: 1px #000000 solid;margin: 50px auto;position: relative;}
    .btn {position:absolute;right: 5px;bottom: 10px;}
    .btn a {float: left;width: 30px;height: 30px;background: rgb(0,0,0,.5);text-align: center;
    line-height: 30px;color: #ffffff;text-decoration: none;margin-right: 5px;}
    .btn a:hover {background: rgb(0,0,0,1);}
    .list {width: 600px;height: 337px;overflow: hidden;}

IMG 可以存放图片
在这里插入图片描述
完成后点击数字跳到对应图片

房东的喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮询界面

HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>源计划</title> <link rel="stylesheet" href="css/yjh.css"/> </head> <body> <div class="box1"&g
复制链接

扫一扫