纯CSS模拟小辣椒的音乐帖框架

马黑黑 · 发表于 2022-1-16 22:24

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-1-16 22:27 编辑

外框架效果非常逼近，内框架略微改动，做成立体效果。小辣椒的帖子正文内容也可以用CSS重新定义样式，有空再补充。先上框架代码：嵌套方式使用两个div，不用table，不用底图：

<style type="text/css">
.mnBox { /* 外框 */
margin: 0 auto;
padding: 35px;
border: none;
border-top: 6px solid #000; /* 顶部边框样式*/
border-radius: 10px;
background: #b3c3c3;
}
.ctBox { /* 内框 */
margin: 0;
padding: 10px;
background: #fff;
min-height: 300px;
border-radius: 10px;
box-shadow: 1px 3px 2px 2px rgba(4,4,4,.6);
}
</style>
<div class="mnBox">
<div class="ctBox">帖子内容</div>
</div>

复制代码

马黑黑 · 发表于 2022-1-16 22:26

效果演示：

帖子内容

马黑黑 · 发表于 2022-1-16 22:29

内框的 min-height: 300px; 定义最低高度，是演示需要，使用时可以不保留，由内容撑开高度。保留也没关系，内容高度超过它定义的值时会自动撑开。

马黑黑 · 发表于 2022-1-16 22:57

连同内容梳理了一下全码（帖子具体内容要修改，包括正文图片、文字和音乐地址：

<style type="text/css">
.mnBox {
margin: 0 auto;
padding: 35px;
width: 720px;
border: none;
border-top: 6px solid #000; /* 顶部边框样式*/
border-radius: 10px;
background: #b3c3c3;
}
.ctBox {
margin: 0;
padding: 10px;
background: #fff;
min-height: 300px;
border-radius: 10px;
box-shadow: 1px 3px 2px 2px rgba(4,4,4,.6);
}
.ctBox p,img, h2,button { text-align:center; }
.picBtn {
width: 32px;
height: 32px;
border: none;
border-radius: 8px;
background: transparent url('http://image.hnol.net/c/2022-01/16/15/202201161501092411-5087368.gif') no-repeat;
cursor: pointer;
box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}
.picBtn:hover {
opacity: 0.95;
box-shadow: 1px 1px 2px 2px rgba(0,0,0,.3);
}
.picBtn:active {
opacity: 0.8;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
}
</style>
<div class="mnBox">
<div class="ctBox">
<p><img alt="" src=""图片地址 /></p>
<h2 style="text-align:center;">帖子标题</h2>
<pre>
帖子内容行一
帖子内容行二
每行不要太长
注意缩进
注意分行（不要HTML标签)
</pre>
<p><audio id="music" src="音乐地址"></audio></p>
<p><button id="picBtn" class="picBtn"></button></p>
<p>制作者年月日</p>
</div>
</div>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('http://image.hnol.net/c/2022-01/16/15/202201161501412221-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-01/16/15/202201161501092411-5087368.gif ')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('http://image.hnol.net/c/2022-01/16/15/202201161501092411-5087368.gif')";
})
</script>

复制代码

马黑黑 · 发表于 2022-1-16 23:06

这个模拟，改一下外框的顶部颜色和背景色（background），甚至样式，就可以有不同的面貌。至于正文，可以自己设定，注意三楼的全帖代码有一句——

.ctBox p,img, h2,button { text-align:center; }

——是设定了帖内的 p，img，h2，button 都居中，写帖时如果需要居中就不必重复设定。