林黛玉最像林黛玉的时候
本帖最后由 马黑黑 于 2022-1-19 20:59 编辑 <br /><br /><style type="text/css">.tb-Box { margin: 0 auto; width: 699px; height: 487px; position: relative; box-shadow: 2px 2px 6px 1px rgba(0,0,0,.8); }
.tb-Box img { width: 699px; height: 487px; cursor: pointer; opacity: .95; }
.frame { position: absolute; left: 0px; top: 0px; display: none;}
.tb-Box:hover .frame { display: block; }
</style>
<div class="tb-Box">
<img src="https://www.huachaowang.com/data/attachment/forum/202201/19/155107si3v3dtuhkjcksmg.jpg" alt="" />
<iframe class="frame" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=159401&auto=1&height=66"></iframe>
</div> 本帖最后由 马黑黑 于 2022-1-19 21:00 编辑
代码公布：（记得给网易云音乐播放器 iframe 代码一个 class="frame" 的语句）
<style type="text/css">
.tb-Box { margin: 0 auto; width: 699px; height: 487px; position: relative; box-shadow: 2px 2px 6px 1px rgba(0,0,0,.8); }
.tb-Box img { width: 699px; height: 487px; cursor: pointer; opacity: .95; }
.frame { position: absolute; left: 0px; top: 0px; display: none;}
.tb-Box:hover .frame { display: block; }
</style>
<div class="tb-Box">
<img src="https://www.huachaowang.com/data/attachment/forum/202201/19/155107si3v3dtuhkjcksmg.jpg" alt="" />
<iframe class="frame" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=159401&auto=1&height=66"></iframe>
</div>
本帖最后由 马黑黑 于 2022-1-19 17:56 编辑
这个简单的帖子最实用：一张图片，一个网易云音乐播放器，几句CSS代码。
.tb-Box{ ... } 选择器里的宽度和高度与图片尺寸即 .tb-Box img { ... } 里所定义的尺寸应保持一致。需要宽幅的，在 .tb-Box{ ... } 内加入 top: xxpx; left:-xxpx 这个真的非常方便。但我单位的破网听不了网易云，要想用这个功能，要等到回家才行了。 奇怪，这个帖子里用不了表情，是不是代码和论坛语句有冲突？ 好漂亮的制作，老黑真厉害。 红影 发表于 2022-1-19 16:58
奇怪，这个帖子里用不了表情，是不是代码和论坛语句有冲突？
{:4_189:} 红影 发表于 2022-1-19 16:58
奇怪，这个帖子里用不了表情，是不是代码和论坛语句有冲突？
估计定义的选择器名称冲突，我去改一下 红影 发表于 2022-1-19 16:58
奇怪，这个帖子里用不了表情，是不是代码和论坛语句有冲突？
你说的对，厉害，是 tb 类名与论坛的 图标 类名相同，导致它们失效。厉害厉害。 {:4_191:} 现在可以了，我原来也不能发表情的。 陈晓旭不负众望把林妹妹的高雅温婉刻画的淋漓尽致啊。可惜了。。。
{:4_204:} 加林森 发表于 2022-1-19 18:31
现在可以了，我原来也不能发表情的。
嗯，是选择器名冲突：我随便取个名，tb就是图标的意思 大猫咪 发表于 2022-1-19 19:37
陈晓旭不负众望把林妹妹的高雅温婉刻画的淋漓尽致啊。可惜了。。。
但她的脸一边大一边小，你知道不
马黑黑 发表于 2022-1-19 19:52
但她的脸一边大一边小，你知道不
{:5_117:}不知道啊，还有这事 马黑黑 发表于 2022-1-19 19:51
嗯，是选择器名冲突：我随便取个名，tb就是图标的意思
嗯嗯，这个我也得去学习了。 大猫咪 发表于 2022-1-19 19:55
不知道啊，还有这事
红楼梦你没细看？
没关系，脸部左右不太平衡红楼梦里没有描写，是陈晓旭的CSS样式{:4_170:} 加林森 发表于 2022-1-19 19:57
嗯嗯，这个我也得去学习了。
很多时候，命名很讲究。多亏 @红影 发现这个问题，给我提个醒，毕竟，帖子运行于特定环境中 马黑黑 发表于 2022-1-19 19:51
嗯，是选择器名冲突：我随便取个名，tb就是图标的意思
嗯嗯，明白的。 马黑黑 发表于 2022-1-19 19:59
很多时候，命名很讲究。多亏 @红影 发现这个问题，给我提个醒，毕竟，帖子运行于特定环境中
明白的，谢谢老黑！{:4_191:}