红影 发表于 2022-1-29 23:46

用消寒诗做图片——作业

<style type="text/css">

.picMain {
        top:20;
        height: 480px;
        width: 780px;
      left:-10;
        position: relative;
        background: linear-gradient(225deg, RoyalBlue, PowderBlue, LightBlue, white, transparent);
        padding: 10px;
        box-shadow: 2px 2px 4px 1px rgba(0,0,0,.6);
        display: flex;
        flex-direction: column;
        gap: 8px;
}

.picBox { flex-grow: 2; cursor: pointer; }

.picMini {
        height: 75px;
        display: flex;
        flex-direction: row;
        gap: 2px;
}

.picBox img {
        width: 780px;
        height: 420px;
        object-fit: cover;
}

.picMini img {
        width: 85px;
        height: 45px;
        border-radius: 70%;
        opacity: .5;
        cursor: pointer;
}

.picMini img:hover { opacity: 1; border-radius: 0;}

</style>

<div class="picMain">
        <div class="picMini" id="picMini">
                <img id="img1" onclick="showpic('img1')" src="https://pic.imgdb.cn/item/61f557a32ab3f51d918ec772.jpg" alt="" />
                <img id="img2" onclick="showpic('img2')" src="https://pic.imgdb.cn/item/61f5580d2ab3f51d918f576f.jpg" alt="" />
                <img id="img3" onclick="showpic('img3')" src="https://pic.imgdb.cn/item/61f558262ab3f51d918f731b.jpg" alt="" />
                <img id="img4" onclick="showpic('img4')" src="https://pic.imgdb.cn/item/61f558422ab3f51d918f9561.jpg" alt="" />
                <img id="img5" onclick="showpic('img5')" src="https://pic.imgdb.cn/item/61f558632ab3f51d918fbc4c.jpg" alt="" />
                <img id="img6" onclick="showpic('img6')" src="https://pic.imgdb.cn/item/61f558812ab3f51d918fe4be.jpg" alt="" />
                <img id="img7" onclick="showpic('img7')" src="https://pic.imgdb.cn/item/61f5589c2ab3f51d9190038a.jpg" alt="" />
                <img id="img8" onclick="showpic('img8')" src="https://pic.imgdb.cn/item/61f558b32ab3f51d919021e4.jpg" alt="" />
                <img id="img9" onclick="showpic('img9')" src="https://pic.imgdb.cn/item/61f558ca2ab3f51d9190430a.jpg" alt="" />
        </div>
        <div id="picBox" class="picBox"><img id="imgShow" alt="" src="https://pic.imgdb.cn/item/61f557a32ab3f51d918ec772.jpg" /></div>
</div>
<audio id="auMusic" src="http://music.163.com/song/media/outer/url?id=1861572757.mp3" autoplay="autoplay" loop="loop"></audio>
<script language="javascript">
var aud = document.getElementById('auMusic');
var imgSw = document.getElementById('imgShow');
function showpic(idx){ imgSw.src = document.getElementById(idx).src; }
imgSw.onclick = function() { aud.paused ? aud.play() : aud.pause(); }
</script>

红影 发表于 2022-1-29 23:49

樵歌的一九是送小辣椒的，把这些消寒诗做成图图，可以随便点着看第几天的了{:4_173:}@樵歌

红影 发表于 2022-1-29 23:49

交作业了，请黑黑收作业@马黑黑 {:4_187:}

红影 发表于 2022-1-29 23:51

为什么定位不起作用？{:4_173:}

樵歌 发表于 2022-1-30 07:13

一大早来欣赏师妹佳作，好开心，拙作虽然不好，图图音乐来找补。{:4_187:}

樵歌 发表于 2022-1-30 07:14

@小辣椒 写你家乡西湖雪梅呢。{:4_189:}

马黑黑 发表于 2022-1-30 08:32

红影好制作！赞32个。
这个，樵歌的词作也太上档次了，必须赞！

加林森 发表于 2022-1-30 12:24

好漂亮的制作。赞！{:4_199:}

小辣椒 发表于 2022-1-30 14:13

樵歌 发表于 2022-1-30 07:14
@小辣椒 写你家乡西湖雪梅呢。

樵哥哥的精美诗词，小辣椒收藏了{:4_178:}

小辣椒 发表于 2022-1-30 14:14

马黑黑 发表于 2022-1-30 08:32
红影好制作！赞32个。
这个，樵歌的词作也太上档次了，必须赞！

黑黑已经批改了作业了，优秀作业{:4_178:}

樵歌 发表于 2022-1-30 16:05

小辣椒 发表于 2022-1-30 14:13
樵哥哥的精美诗词，小辣椒收藏了

写得悄太好呢。

马黑黑 发表于 2022-1-30 16:29

小辣椒 发表于 2022-1-30 14:14
黑黑已经批改了作业了，优秀作业

{:5_112:}

红影 发表于 2022-1-30 21:22

樵歌 发表于 2022-1-30 07:13
一大早来欣赏师妹佳作，好开心，拙作虽然不好，图图音乐来找补。

今天跑乡下了，白天一直没时间上来。学习黑黑的这个代码，第一想法就是做消寒{:4_173:}

红影 发表于 2022-1-30 21:24

马黑黑 发表于 2022-1-30 08:32
红影好制作！赞32个。
这个，樵歌的词作也太上档次了，必须赞！

9个有点多，就想着做横向的，还好弄成了。谢谢黑黑的赞，为什么是32个，这个有什么代码讲究么{:4_173:}

红影 发表于 2022-1-30 21:24

加林森 发表于 2022-1-30 12:24
好漂亮的制作。赞！

谢谢队长鼓励，也看到队长的了，很赞的{:4_187:}

加林森 发表于 2022-1-30 22:13

红影 发表于 2022-1-30 21:24
谢谢队长鼓励，也看到队长的了，很赞的

我们共同学习的，不需要这么客气啊。{:4_187:}

马黑黑 发表于 2022-1-30 22:14

红影 发表于 2022-1-30 21:24
9个有点多，就想着做横向的，还好弄成了。谢谢黑黑的赞，为什么是32个，这个有什么代码讲究么

点32个赞是水吧规范

樵歌 发表于 2022-1-31 08:13

红影 发表于 2022-1-30 21:22
今天跑乡下了，白天一直没时间上来。学习黑黑的这个代码，第一想法就是做消寒

乡下网可能没城里快，我在乡下经常上不起。

加林森 发表于 2022-1-31 09:26

{:4_178:}

红影 发表于 2022-1-31 11:09

加林森 发表于 2022-1-30 22:13
我们共同学习的，不需要这么客气啊。

嗯嗯，学习乐趣多多。都是黑黑带来的好处呢，我们是受益者{:4_173:}
页: [1] 2
查看完整版本: 用消寒诗做图片——作业