基础训练冥想页-meditation.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>冥想音乐</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<script type="text/javascript" src="../js/jquery-1.7.2.js" ></script>
<script type="text/javascript">
//页面加载执行
window.onload=function(){
$("#m_mask").show();//显示遮罩层
closebt.onclick=function(){ //点击确定，隐藏遮罩层。
$("#m_mask").hide();
$("#i_show").show();
}
}
</script>
</head>
<body>
<div align="left" >
<img height="50" width="50" src="../img/tubiao/1.png" border="0" title="返回上一页" style="background-repeat: no-repeat" onClick="javascript：history.back(-1);">
<div style="position:absolute;z-index: 10;left: 150px;top: -20px;">
<p align="center" style="font-size: 30px;color: black;font-weight:bold;">冥想音乐</p>
</div>
</div>
<!--遮罩层显示-->
<div id="m_mask" align="center" style="top:0%; left:0%; padding:16px; border:3px solid orange; background-color:wheat;position:absolute;z-index:1002; overflow:auto; max-width: 100%;height:100%;display: block;">
<div style="font-size: 30px;flood-color:black">
<p style="font-size: 35px;flood-color: red;" align="center">使用说明： </p>
<br />
<p>1：平躺在垫子上，或者以舒适的坐姿坐在垫子上。</p>
<p>2：打开音乐，轻轻的闭上眼镜，放慢呼吸。 </p>
<p>3：将意识关注在呼吸之上，深长的吸气，缓慢的呼气。</p>
<p>4：每天冥想10到15分钟。</p>
<a href="javascript：void(0)" id="closebt" style="flood-color: blue;" >确定 </a>
</div>
</div>
<div id="i_show" style="display: none;">
<!--图片显示 -->
<div align="center">
<img src="../img/music-img/1.gif" width="100%" height="outo"/>
</div>
<!--播放器显示-->
<div style="height: 50PX;"></div>
<div align="center" style="max-width: 100%;height: auto; display: block; background-size: contain;">
<audio src="../music/1.mp3" id="audioDom" controls="controls" >
</audio>
</div>
</div>
</body>
</html>
如果觉得《HTML5-右脑开发项目-基础训练冥想meditation.html》对你有帮助，请点赞、收藏，并留下你的观点哦！
