Question

有没有办法清理编码，使图像居中并使东西保持原位。

这是我想要的样子。
主外箱使浏览器页面居中。.
暂停，播放和停止按钮在盒子的左侧浮动。
将我的图像放置在盒子的中央..
“添加/下载”按钮浮动到盒子的右边。
这是到目前为止我所拥有的演示。.

点击链接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>

Answer 1

在img内使用background-image代替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>

有没有办法清理编码，使图像居中并保持原样

1 个答案: