Παρασκευή 26 Ιουλίου 2019

Σάββατο 9 Φεβρουαρίου 2019

改善音频显示图标

分享一个改善手机端显示不理想的方式,让它的尺寸能够随机适配,再也不用担心超出屏幕啦~~~
复制后面的新音频代码,之后只需要替换换色部分的音频代码就可以了。这样手机上看的时候,就不会成显示不全的样子了。<br />
改代码前                                                      改代码后
 

代码部分从下面开始
<html>
<head>
</head>
<body>
<div>
<audio controls="true" src="https://mp3.kingdomsalvation.org/zh_TW/jlsg/jlsg0026.mp3"> </audio>
</div>
</body>
<style>
audio {max-width: 100%;width: 100%;}
</style>
到上一行结束,之后手机设备,或任何屏幕的设备都会自动调整大小。所有的博客类型,之前能发音频贴的都这样更改一下

或者可以短一点也行
<div>
<audio controls="true" src="https://mp3.kingdomsalvation.org/zh_TW/jlsg/jlsg0026.mp3"> </audio>
</div>
<style>
audio {max-width: 100%;width: 100%;}
</style>
效果都是一样

Wordpress的音频代码只需要音频链接即可,不需要有其他代码,平台会自带生成 点击看 帖子说明
#main-menu .widget,#main-menu .widget > .widget-title{display:none} #main-menu .show-menu{display:block} #main-menu{position:relative;height:48px;z-index:15} #main-menu ul > li{float:left;position:relative;margin:0;padding:0;transition:background .17s} #main-menu ul > li > a{position:relative;color:$(menu.color);font-size:14px;font-weight:600;text-transform:uppercase;line-height:48px;display:inline-block;margin:0;padding:0 13px;transition:color .17s ease} #main-menu ul#main-menu-nav > li:first-child > a{padding:0 13px 0 0} #main-menu ul > li:hover > a{color:$(menu.color)} #main-menu ul > li > ul{position:absolute;float:left;left:0;top:48px;width:300px;background-color:#fff;z-index:99999;margin:0;padding:0;box-shadow:0 3px 5px rgba(0,0,0,0.2);visibility:hidden;opacity:0} #main-menu ul > li > ul > li > ul{position:absolute;float:left;top:0;left:100%;padding:5px 0;margin:0} #main-menu ul > li > ul > li{display:block;float:none;position:relative;transition:all .17s ease} #main-menu ul > li > ul > li a{display:block;height:36px;font-size:12px;color:#000;line-height:36px;box-sizing:border-box;margin:0;padding:0 15px;transition:all .17s ease} #main-menu ul > li > ul > li:hover > a{color:#0552d8} #main-menu ul > li.has-sub > a:after{content:'\f107';float:right;font-family:FontAwesome;font-size:14px;font-weight:400;margin:0 0 0 3px} #main-menu ul > li > ul > li.has-sub > a:after{content:'\f105';float:right;margin:0} #main-menu .mega-menu{position:static!important} #main-menu .mega-menu > ul{width:100%;box-sizing:border-box;padding:20px 10px} #main-menu .mega-menu > ul.mega-menu-inner{overflow:hidden} #main-menu ul > li:hover > ul,#main-menu ul > li > ul > li:hover > ul{visibility:visible;opacity:1} #main-menu ul ul{transition:all .17s ease}