庶民 发表于 2024-1-11 08:04

为消寒诗歌活动点赞！

<style>

#papa {

    width: 640px;   

    min-height: 1200px;

    padding: 40px;

    box-sizing: border-box;

    border-radius: 12px;

    box-shadow: 0 0 8px #000;

    position: relative;

    margin: 60px auto 80px auto;

      top: 0px;

    display: grid; user-select: none;

      place-items: center;

      user-select: none;

}

#tit {

    position: absolute;

    left: 175px;

    top: 400px;

    font: bold 20px/26px 'FangSong',serif;

    color: Sienna;

}

#papa::before, #papa::after {

    position: absolute;

    content: '';

}

#papa::before {

    left: 10px;

    top: 10px;

    right: 10px;

    bottom: 10px;

    border: 2px dashed Brown;

    border-radius: inherit;

}

#papa::after {

    content: '为消寒诗歌活动点赞！';

    padding: 10px 40px 10px 10px;

    left: -10px;

    top: 20px;

    border-radius: 10px 0 0 10px;

    background: Sienna;

    opacity: .85;

    font: bold 16px/24px sans-serif;

    color: white;

    clip-path: polygon(0 0,100% 0,90% 50%, 100% 100%, 0 100%);

}

#pic {

    position: absolute;

    left: 70px;

    top: 90px;

    width: 500px;

    height: 260px;

}

.mpic { position: absolute; right: -10px; bottom: -10px; width: 300px; height: 183px; }

.mpic1 { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; opacity: .35;

      background: url('https://pic.imgdb.cn/item/647c033ef024cca17313a454.gif'); }

@keyframes swing { from { transform: rotate(3deg); } to { transform: rotate(-2deg); } }

</style>



<div id="papa">

    <div class="mpic1"></div>

    <img id="pic" src="https://pic.imgdb.cn/item/6599fbd5871b83018ac37069.jpg" alt="">

    <img src="https://pic.imgdb.cn/item/6482db5b1ddac507ccaa9ddd.gif" alt="" class="mpic">

    <div id="tit">三九用联：为消寒诗歌活动点赞！<br>

　　2024-1-10文字：庶民<br><br><br>

什么样的旗帜下<br>

云集着<br>

论坛的中坚！<br><br>

消寒中的每一个文字<br>

哪怕是拼凑的，<br>

让论坛朋友刮目相看。<br><br>

冬天的花潮<br>

却能用五彩斑斓搭建主题，<br>

筑成战地的前沿！<br><br>

精美的构图<br>

美好的诗篇<br>

坚守九九八十一天！<br><br>

把脑洞打开<br>

用心思的流苏<br>

精心编织诗的概念！<br><br>
精彩不断<br>
佳作连连<br>
我惊呼中满满的赞叹！
<br><br>

</div><br>



<audio id="aud" src="0" loop="" autoplay=""></audio>

</div>

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=0 height=0 src="//music.163.com/outchain/player?type=2&id=1942373010&auto=1&height=66"></iframe>

庶民 发表于 2024-1-11 08:04

本帖最后由 庶民 于 2024-1-11 08:14 编辑 <br /><br />领了，用代码发布诗歌。实验中。

庶民 发表于 2024-1-11 08:15

庶民 发表于 2024-1-11 08:04
本帖最后由 庶民 于 2024-1-11 08:14 编辑 领了，用代码发布诗歌。实验中。

音乐使用：美丽的神话，给这个活动点赞。

红影 发表于 2024-1-11 09:26

看到庶民把原来的代码改了，去掉了音乐进度条部分。也不错，更简单了呢。
min-height: 1200px;这个数值可以让边框拉长或缩短，来适应文字多少。

给庶民点赞{:4_199:}

红影 发表于 2024-1-11 09:28

诗句非常美，把消寒活动的过程写得很完整，也给予了热情赞扬。被庶民的诗句感动了{:4_199:}

红影 发表于 2024-1-11 09:34

以前都是用古韵消寒，用诗歌消寒还是第一次，却觉得收获满满。至少对写诗不那么怕了{:4_173:}

红影 发表于 2024-1-11 09:35

庶民弄好模版了，也一起加入呗{:4_187:}

梦油 发表于 2024-1-11 09:55

繁花似锦看花潮。

世外桃源 发表于 2024-1-11 11:53

庶民也是才子，好文采{:4_199:}

世外桃源 发表于 2024-1-11 11:53

欣赏佳作，感谢分享

庶民 发表于 2024-1-11 14:38

红影 发表于 2024-1-11 09:26
看到庶民把原来的代码改了，去掉了音乐进度条部分。也不错，更简单了呢。
min-height: 1200px;这个数值可 ...

是的，我慢慢的学习一点。

庶民 发表于 2024-1-11 14:39

红影 发表于 2024-1-11 09:28
诗句非常美，把消寒活动的过程写得很完整，也给予了热情赞扬。被庶民的诗句感动了

您们让我感到庆幸。

庶民 发表于 2024-1-11 14:40

梦油 发表于 2024-1-11 09:55
繁花似锦看花潮。

哪里风景这边独好。

庶民 发表于 2024-1-11 14:40

世外桃源 发表于 2024-1-11 11:53
庶民也是才子，好文采

哈，劈柴。

红影 发表于 2024-1-11 20:32

庶民 发表于 2024-1-11 14:38
是的，我慢慢的学习一点。

这个写得好，代码也修改得好，很赞呢{:4_187:}

红影 发表于 2024-1-11 20:33

庶民 发表于 2024-1-11 14:39
您们让我感到庆幸。

谢谢庶民{:4_187:}

小九 发表于 2024-1-11 20:40

这个活动是真的好，庶民欢迎你也加入我们。{:4_199:}

庶民 发表于 2024-1-12 05:17

红影 发表于 2024-1-11 20:32
这个写得好，代码也修改得好，很赞呢

我笨，慢慢来。

庶民 发表于 2024-1-12 05:17

小九 发表于 2024-1-11 20:40
这个活动是真的好，庶民欢迎你也加入我们。

我已经参与了。哈哈。

红影 发表于 2024-1-12 19:50

庶民 发表于 2024-1-12 05:17
我笨，慢慢来。

不急的，要不，四九跟上？{:4_173:}
页: [1] 2
查看完整版本: 为消寒诗歌活动点赞！