用于记录网页的一些小效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Cache-Control"content="max-age=0"/>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="maker" content=""/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<title>音乐播放器_光明网</title>
</head>
<body>
<div class="palyer">
<div class="imgBx">
<img src="images/1.jpg" />
</div>
<audio controls="">
<source src="css/1.mp3" type="audio/mp3"></source>
</audio>
</div>
</body>
</html>/* CSS Document */
/*全局基础设置css*/
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
a img {
border: none;
}
a:focus {
outline: none;
}
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
}
img {
border: none;
}
input,
select,
textarea {
outline: 0;
}
textarea {
resize: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
var,
em {
font-weight: normal;
font-style: normal;
}
ul,
ol,
dl {
list-style: none;
}
body {
font-family: "Microsoft YaHei";
display: flex;
justify-content: center;
align-items: center;
min-height: 100wh;
background: linear-gradient(45deg, #e91e63, #fffde7);
}
.palyer {
position: relative;
width: 350px;
background: #f1f3f4;
}
.palyer .imgBx {
position: relative;
width: 100%;
height: 350px;
}
.palyer .imgBx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.palyer audio {
width: 100%;
outline: none;
}
$(document).ready(function(){
var window_w=$(window).width();
var window_h=$(window).height();
$("body").css({
"width" : window_w + "px",
"height" : window_h + "px"
})
})
版权声明：本文为xueshuangshuang123原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。