有没有办法清理编码、居中图像并使事物保持原位..
这是我想要的样子..
保持浏览器页面居中的主外框..
暂停、播放和停止按钮 float 在框的左侧..
将我的图像设置在框的中央..
添加/下载按钮 float 在框的右侧..
这是我到目前为止的演示..
点击链接 CountryDum Productions
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="box-set2">
<audio id="player" src="audio/SUKA.mp3"></audio>
<div>
<button class="alignleft" onclick="document.getElementById('player').pause()">
<img src="images/Set1/pause.png" style="width:30px;height:30px;">
</button>
<button class="alignleft" onclick="document.getElementById('player').play()">
<img src="images/Set1/play.png" style="width:30px;height:30px;">
</button>
<button class="alignleft" id="player" onclick="player.src = ''; player.src = 'audio/SUKA.mp3';">
<img src="images/Set1/stop.png" style="width:30px;height:30px;">
</button>
<button class="alignright" onclick="window.location.href='download/TakeOne.rar'">
<img src="images/Set1/add.png" style="width:30px;height:30px;">
</button>
<div id="image">
<img src="images/kit.png" style="width:200px;height:200px;">
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
<style>
.box-set2 {
background: #eaeaed;
height: 200px;
width:40%;
top:100px;
margin:0px 0px 20px 40%;
padding:10px;
position: relative;
}
.alignleft {
background: #eaeaed;
float: left;
border:0px;
margin-left: 2px;
padding: 0;
outline: 0;
}
.alignright {
background: #eaeaed;
float: right;
border:0px;
margin: 0;
padding: 0;
}
#image {
border:0px;
margin:0;
padding: 0;
}
</style>
</body>
</html>最佳答案
使用background-image而不是 img 在 button
button{
width:50px;
height:50px;
background-image:url("https://image.flaticon.com/icons/svg/579/579268.svg");
background-repeat: no-repeat;
background-size: 100% 100%;
}<audio id="player" src="audio/SUKA.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button id="player" onclick="player.src = ''; player.src = 'audio/SUKA.mp3';">Stop</button>
</div>编辑 将所有按钮合并为一个必须使用 JS 并将 display:none/block 设置为按钮:
function func(elem,id){
elem.style.display="none";
var elemShow=document.getElementById(id);
console.log()
elemShow.style.display="block";
} button{
width:50px;
height:50px;
background-image:url("https://image.flaticon.com/icons/svg/579/579268.svg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
#pause,#play{
display:none;
}<audio id="player" src="audio/SUKA.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play();func(this,'pause')" id="play">Play</button>
<button onclick="document.getElementById('player').pause();func(this,'play')" id="pause">Pause</button>
<button id="stop" onclick="func(this,'play');player.src = ''; player.src = 'audio/SUKA.mp3';">Stop</button>
</div>关于html - 有没有办法清理编码、居中图像并使事情保持原样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54123094/