第二：用dw所见即所得编辑窗随便你想X啥。但你要更多的花样你还要熟悉html语言和css语言，一个是结构类语言，css是样式表。
不是不可能，这需要基础的，否则对你就是天书。
<!Doctype html><html>
<head>
<meta charset="utf-8">
<title>MUSIC</title>
<style type="text/css">
*{margin:0pxpadding:0px}
#bg{position:absolutetop:0pxleft:0pxbackground:url("./img/bg_1.jpg")background-size:coverheight:100%width:100%overflow:hidden}
#music_icon{position:fixedtop:10pxright:10pxbackground:url("./img/music_icon.png")background-size:coverheight:55pxwidth:55px}
#music_board{height:500pxwidth:400pxbackground:#999margin:10% autoborder-radius:12pxbox-shadow:0px 0px 15px #222display:none}
#music_gif{height:280pxwidth:380pxposition:relativetop:20pxleft:10pxbackground:url("./img/music_5.gif")background-size:cover}
#music_control{text-align: centerposition: relativetop: 50pxcolor: rgb(255, 255, 255)font-size: 1.5em}
#control{margin-top:45pxwidth:100%height:70pxtext-align:center}
</style>
</head>
<body>
<audio id="music" src="./mp3/xinxiangan.mp3" loop="loop"></audio>
<div id="bg">
<div id="music_icon" onclick="show_music_board()"></div>
<div id="music_board">
<div id="music_gif"></div>
<div id="music_control">MUSIC BOARD
<div id="control">
<img id="control_img" src="./img/pause_button.png" height="60px" onclick="music_control()">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var music = document.getElementById("music")//建立audiod对象
var control_img = document.getElementById("control_img")//建立播放按钮图片对象，为了更好的 *** 作
var music_board = document.getElementById("music_board")//建立music面板的对象，为了更好的 *** 作
var lock = false//设置一个布尔变量，用于判断音乐的播放与暂停
function music_control(){//音乐开始与暂停
if( lock == false){
music.play()
control_img.setAttribute("src", "./img/pause_button.png")
lock = true
}
else{
music.pause()
control_img.setAttribute("src", "./img/play_button.png")
lock = false
}
}
function show_music_board(){//music面板的显现与展示
if( music_board.style.display == "none"){music_board.style.display = "block"
lock = false
music_control()
}
else{
music_board.style.display ="none"
lock = true
music_control()
}
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）