纯CSS模拟小辣椒的音乐帖框架
本帖最后由 马黑黑 于 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>
<p>效果演示：<br> </p>
<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>
<p></p><div class="mnBox">
<div class="ctBox">帖子内容</div>
</div>
内框的 min-height: 300px; 定义最低高度，是演示需要，使用时可以不保留，由内容撑开高度。保留也没关系，内容高度超过它定义的值时会自动撑开。 连同内容梳理了一下全码（帖子具体内容要修改，包括正文图片、文字和音乐地址：
<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>
这个模拟，改一下外框的顶部颜色和背景色（background），甚至样式，就可以有不同的面貌。至于正文，可以自己设定，注意三楼的全帖代码有一句——
.ctBox p,img, h2,button { text-align:center; }
——是设定了 帖内的 p，img，h2，button 都居中，写帖时如果需要居中就不必重复设定。 这个也太厉害了，惊呆。{:4_199:} 代码语言万事皆可模拟。黑黑回帖还不耽误，却能把这个就编写出来了，非常敏捷{:4_187:} 这个可以作为做这类边框帖子的模板了，纯代码的边框，而且加分不会飞{:4_187:} 古人是谈笑间樯橹灰飞烟灭，你这是谈笑间代码立就，这份敏捷无人能比{:5_116:} 再来学习，谢谢老黑！{:4_190:} 加林森 发表于 2022-1-17 09:10
再来学习，谢谢老黑！
这个代码它是规范的，一切即统一又清晰明了 马黑黑 发表于 2022-1-17 09:11
这个代码它是规范的，一切即统一又清晰明了
嗯嗯，明白的。我再去练习一下。{:4_190:} 红影 发表于 2022-1-17 08:49
这个也太厉害了，惊呆。
小辣椒这个帖子框架本身不复杂，模拟器来还是容易的 红影 发表于 2022-1-17 08:52
代码语言万事皆可模拟。黑黑回帖还不耽误，却能把这个就编写出来了，非常敏捷
杀猪刀在手{:5_117:} 红影 发表于 2022-1-17 08:52
这个可以作为做这类边框帖子的模板了，纯代码的边框，而且加分不会飞
不过我发现一个小问题：播放按钮点击后有些浏览器会留下一个虚框，这是没有设置 outline 为 none 的缘故，原理和我介绍播放器时说的一样。可在播放按钮的 CSS 样式表中加入一句：
.picBtn {
......
......
outline: none;
} 红影 发表于 2022-1-17 09:02
古人是谈笑间樯橹灰飞烟灭，你这是谈笑间代码立就，这份敏捷无人能比
哪有那么厉害，是加班加点弄出来的 加林森 发表于 2022-1-17 09:12
嗯嗯，明白的。我再去练习一下。
辛苦 马黑黑 发表于 2022-1-17 09:18
辛苦
不辛苦的啊，喜欢就好的嘛。 马黑黑 发表于 2022-1-17 09:12
小辣椒这个帖子框架本身不复杂，模拟器来还是容易的
你一看就能弄出来，我再多看几看，也不知道这样能用代码模拟{:4_173:} 马黑黑 发表于 2022-1-17 09:13
杀猪刀在手
你一直说杀猪，杀的就是代码这头猪吧{:4_173:}