Loading... ::: hljs-center # Markdown内嵌哔哩哔哩视频 ::: <div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0;"> <iframe src="https://player.bilibili.com/player.html?isOutside=true&aid=1005507099&bvid=BV1sx4y1J7Bp&cid=1577619729&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" ></iframe> </div> ```html #以下是哔哩哔哩内嵌视频代码 <div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0;"> <iframe src="//player.bilibili.com/player.html?isOutside=true&aid=1005507099&bvid=BV1sx4y1J7Bp&cid=1577619729&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" ></iframe> </div> ``` ::: hljs-center ## 哔哩哔哩代码解释 ::: ```html <!-- 创建一个div容器,用于包裹iframe --> <div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0;"> <!-- 设置div的样式: position: relative; 使div相对于其正常位置进行定位 width: 100%; 设置div的宽度为100% padding-bottom: 56.25%; 设置底部内边距为56.25%,用于保持16:9的宽高比 height: 0; 设置div的高度为0 --> <!-- 创建一个iframe,用于嵌入Bilibili视频播放器 --> <iframe src="//player.bilibili.com/player.html?isOutside=true&aid=1005507099&bvid=BV1sx4y1J7Bp&cid=1577619729&p=1&autoplay=0" <!-- src属性指定iframe的内容来源,这里是Bilibili视频播放器的URL,包含视频的aid、bvid和cid参数,以及播放页码p --> autoplay=0 <!-- autoplay属性为0时,表示视频不会自动播放 --> scrolling="no" <!-- scrolling属性设置为"no",表示不显示滚动条 --> border="0" <!-- border属性设置为"0",表示没有边框 --> frameborder="no" <!-- frameborder属性设置为"no",表示没有边框 --> framespacing="0" <!-- framespacing属性设置为"0",表示没有框架间距 --> allowfullscreen="true" <!-- allowfullscreen属性设置为"true",表示允许全屏显示 --> style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" <!-- 设置iframe的样式: position: absolute; 使iframe绝对定位 top: 0; 设置iframe的顶部位置为0 left: 0; 设置iframe的左侧位置为0 width: 100%; 设置iframe的宽度为100% height: 100%; 设置iframe的高度为100% --> ></iframe> </div> ``` ::: hljs-center # 内嵌播放器 ::: <div class="audio-player"> <h3>播放音乐</h3> <audio controls id="audio"> <source src="http://img.lqza.cn/funnyUrl/Sara11720624516522272.mp3" type="audio/mpeg"> 您的浏览器不支持音频播放。 </audio> </div> <style> .audio-player { width: 100%; max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; border-radius: 10px; background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientBG 20s ease infinite; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; } .audio-player h3 { margin-bottom: 20px; color: #333; } .audio-player audio { width: 100%; outline: none; background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientBG 20s ease infinite; border-radius: 10px; padding: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } @keyframes gradientBG { 0% { background-position: 0% 50%; } 25% { background-position: 50% 50%; } 50% { background-position: 100% 50%; } 75% { background-position: 50% 50%; } 100% { background-position: 0% 50%; } } /* 自定义音频控制面板样式 */ audio::-webkit-media-controls-panel { background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; #代码来源:https://blog.lqzexe.top/ animation: gradientBG 20s ease infinite; } /* 自定义音频进度条样式 */ audio::-webkit-media-controls-timeline { background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientProgress 20s ease infinite; } /* 自定义播放按钮样式 */ audio::-webkit-media-controls-play-button::before { content: "播放"; color: white; font-size: 14px; padding: 5px; background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientBG 20s ease infinite; border-radius: 5px; } /* 自定义音量滑块样式 */ audio::-webkit-media-controls-volume-slider { background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientBG 20s ease infinite; border-radius: 5px; } /* 自定义静音按钮样式 */ audio::-webkit-media-controls-mute-button::before { content: "静音"; color: white; font-size: 14px; padding: 5px; background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientBG 20s ease infinite; #代码来源:https://blog.lqzexe.top/ border-radius: 5px; } @keyframes gradientProgress { 0% { background-position: 0% 50%; } 25% { background-position: 50% 50%; } 50% { background-position: 100% 50%; } 75% { background-position: 50% 50%; } 100% { background-position: 0% 50%; } } </style> ::: hljs-center ## 代码内容 ::: ```html <div class="audio-player"> <h3>播放音乐</h3> <audio controls id="audio"> <source src="这里填写你音频的地址" type="audio/mpeg"> 您的浏览器不支持音频播放。 </audio> </div> <style> .audio-player { width: 100%; max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; border-radius: 10px; background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientBG 20s ease infinite; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; } .audio-player h3 { margin-bottom: 20px; color: #333; } .audio-player audio { width: 100%; outline: none; background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientBG 20s ease infinite; border-radius: 10px; padding: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } @keyframes gradientBG { 0% { background-position: 0% 50%; } 25% { background-position: 50% 50%; } 50% { background-position: 100% 50%; } 75% { background-position: 50% 50%; } 100% { background-position: 0% 50%; } } /* 自定义音频控制面板样式 */ audio::-webkit-media-controls-panel { background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientBG 20s ease infinite; } /* 自定义音频进度条样式 */ audio::-webkit-media-controls-timeline { background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientProgress 20s ease infinite; #代码来源:https://blog.lqzexe.top/ } /* 自定义播放按钮样式 */ audio::-webkit-media-controls-play-button::before { content: "播放"; color: white; font-size: 14px; padding: 5px; background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientBG 20s ease infinite; border-radius: 5px; } /* 自定义音量滑块样式 */ audio::-webkit-media-controls-volume-slider { background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientBG 20s ease infinite; border-radius: 5px; } /* 自定义静音按钮样式 */ audio::-webkit-media-controls-mute-button::before { content: "静音"; color: white; font-size: 14px; padding: 5px; background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); background-size: 800% 800%; animation: gradientBG 20s ease infinite; border-radius: 5px; } @keyframes gradientProgress { 0% { background-position: 0% 50%; } 25% { background-position: 50% 50%; } 50% { background-position: 100% 50%; } 75% { background-position: 50% 50%; } 100% { background-position: 0% 50%; } } </style> ``` ::: hljs-center ## 代码注释 ::: ```html <!-- 创建一个div容器,用于包裹音频播放器 --> <div class="audio-player"> <!-- 标题 --> <h3>播放音乐</h3> <!-- 创建一个audio标签,包含音频播放器 --> <audio controls id="audio"> <!-- 指定音频文件的来源和类型 --> <source src="这里填写你音频的地址" type="audio/mpeg"> <!-- 当浏览器不支持audio标签时,显示的提示信息 --> 您的浏览器不支持音频播放。 </audio> </div> <!-- 添加自定义样式 --> <style> /* 定义audio-player类的样式 */ .audio-player { width: 100%; /* 设置宽度为100% */ max-width: 600px; /* 设置最大宽度为600px */ margin: 20px auto; /* 设置外边距为上下20px,左右自动 */ padding: 20px; /* 设置内边距为20px */ border: 1px solid #ccc; /* 设置边框为1px实线,颜色为#ccc */ border-radius: 10px; /* 设置边框圆角为10px */ #代码来源:https://blog.lqzexe.top/ background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */ background-size: 800% 800%; /* 设置背景大小 */ animation: gradientBG 20s ease infinite; /* 设置背景动画 */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置盒子阴影 */ text-align: center; /* 设置文本居中 */ } /* 定义audio-player类下h3标签的样式 */ .audio-player h3 { margin-bottom: 20px; /* 设置底部外边距为20px */ color: #333; /* 设置字体颜色为#333 */ } /* 定义audio-player类下audio标签的样式 */ .audio-player audio { width: 100%; /* 设置宽度为100% */ outline: none; /* 移除外边框 */ background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */ background-size: 800% 800%; /* 设置背景大小 */ animation: gradientBG 20s ease infinite; /* 设置背景动画 */ border-radius: 10px; /* 设置边框圆角为10px */ padding: 10px; /* 设置内边距为10px */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置盒子阴影 */ } /* 定义背景渐变动画 */ @keyframes gradientBG { 0% { background-position: 0% 50%; /* 初始位置 */ } 25% { background-position: 50% 50%; /* 25%时的位置 */ } 50% { background-position: 100% 50%; /* 50%时的位置 */ } 75% { background-position: 50% 50%; /* 75%时的位置 */ } 100% { background-position: 0% 50%; /* 100%时的位置 */ } } /* 自定义音频控制面板样式 */ audio::-webkit-media-controls-panel { background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */ background-size: 800% 800%; /* 设置背景大小 */ animation: gradientBG 20s ease infinite; /* 设置背景动画 */ } /* 自定义音频进度条样式 */ audio::-webkit-media-controls-timeline { background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */ background-size: 800% 800%; /* 设置背景大小 */ animation: gradientProgress 20s ease infinite; /* 设置背景动画 */ } /* 自定义播放按钮样式 */ audio::-webkit-media-controls-play-button::before { content: "播放"; /* 设置按钮内容为"播放" */ color: white; /* 设置字体颜色为白色 */ font-size: 14px; /* 设置字体大小为14px */ padding: 5px; /* 设置内边距为5px */ background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */ background-size: 800% 800%; /* 设置背景大小 */ #代码来源:https://blog.lqzexe.top/ animation: gradientBG 20s ease infinite; /* 设置背景动画 */ border-radius: 5px; /* 设置边框圆角为5px */ } /* 自定义音量滑块样式 */ audio::-webkit-media-controls-volume-slider { background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */ background-size: 800% 800%; /* 设置背景大小 */ animation: gradientBG 20s ease infinite; /* 设置背景动画 */ border-radius: 5px; /* 设置边框圆角为5px */ } /* 自定义静音按钮样式 */ audio::-webkit-media-controls-mute-button::before { content: "静音"; /* 设置按钮内容为"静音" */ color: white; /* 设置字体颜色为白色 */ font-size: 14px; /* 设置字体大小为14px */ padding: 5px; /* 设置内边距为5px */ background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置背景为线性渐变 */ background-size: 800% 800%; /* 设置背景大小 */ animation: gradientBG 20s ease infinite; /* 设置背景动画 */ border-radius: 5px; /* 设置边框圆角为5px */ } /* 定义进度条背景渐变动画 */ @keyframes gradientProgress { 0% { background-position: 0% 50%; /* 初始位置 */ } 25% { background-position: 50% 50%; /* 25%时的位置 */ } 50% { background-position: 100% 50%; /* 50%时的位置 */ } 75% { background-position: 50% 50%; /* 75%时的位置 */ } 100% { background-position: 0% 50%; /* 100%时的位置 */ } } </style> ``` END 本文作者: 站长 文章标题:Markdown文档的一些玩法 本文地址:https://lqza.cn/archives/mds.html 版权说明:若无注明,本文由Mo陌独博客原创,转载请保留文章出处。 最后修改:2025 年 04 月 15 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 如果觉得我的文章对你有用,请随意赞赏 下一篇 上一篇 发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论,继续评论表示您已同意该条款 评论 * 打卡 私密评论 名称 * 🎲 邮箱 * 地址 发表评论 提交中... 2 条评论 Loading... ezycxfqnpy February 28th, 2025 at 10:23 pm 论点鲜明,论据链环环相扣,论证有力。 回复 eurbnymdnm February 28th, 2025 at 10:20 pm 对权力结构的解构充满勇气与智慧。 回复
2 条评论
论点鲜明,论据链环环相扣,论证有力。
对权力结构的解构充满勇气与智慧。