主要实现
- 用header，div(块级元素)划分布局
- 插入音视频，按钮和js控制视频
- 固定侧边导航栏
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>楚留香手游</title>
<link rel="stylesheet" type="text/css" href="clx.css">
</head>
<body>
<header>
<img id="headpic" src="https://clx.res.netease.com/pc/gw/20170921175633/img/new_topbg_90bd8a5.jpg">
</header>
<!-- 用无序列表显示导航栏 -->
<div id="left">
<ul>
<li><a href="">华 山</a></li>
<li><a href="">武 当</a></li>
<li><a href="">云 梦</a></li>
<li><a href="">暗 香</a></li>
<li><a href="">少 林</a></li>
<li><a href="">沧 海</a></li>
</ul>
</div>
<div id="right">
<ul>
<li><a href="">真实江湖</a></li>
<li><a href="">非一条龙</a></li>
<li><a href="">千面人生</a></li>
<li><a href="">攻略NPC</a></li>
<li><a href="">轻功战斗</a></li>
</ul>
</div>
<!-- right如果放在show(页面中间内容)下面，使用float后，会停在页面右下方 -->
<div id="show">
<video controls autoplay src="https://crazynote.v.netease.com/2017/0921/0f8950880ab2e20fa4e7bde139e9f0c8qt.mp4"></video>
<br>
<br>
<!-- 按钮设置鼠标点击事件 -->
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="normal()">还原</button>
<br>
<video id="wudang" width="800" src="https://crazynote.v.netease.com/2017/0921/c67d38a11be22ae674d2df21b1be91e6qt.mp4"></video>
<!-- js文件引用的位置对整体有影响，放在所用元素下面 -->
<script src="clxvideo.js"></script>
</div>
<div id="music">
<!-- src前面加file:\ -->
<audio controls src="file:\F:CloudMusic慕寒,三无MarBlue,西瓜JUN - 千盏灯 (纯歌版).mp3"></audio>
</div>
</body>
</html>
CSS部分
body {
margin: 0px; /*外边界*/
padding: 0px; /*填充 */
}
#headpic { /*响应式图片会自动适配各种尺寸的屏幕。*/
max- 100%;
height: auto;
}
#left {
position: fixed; /*对元素绝对(fixed)定位,left设置位置*/
left: 0;
190px;
margin-top: 20px;
background-image: url(https://wx2.sinaimg.cn/mw690/007C4HYVgy1g125ptqialj303505i3yb.jpg);
background-repeat: no-repeat;
background-size: 90% 100%;
padding-left: 20px;
}
#right {
position: fixed;
right: 0;
190px;
margin-top: 20px;
background-image: url(https://wx2.sinaimg.cn/mw690/007C4HYVgy1g125ptqialj303505i3yb.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
li {
list-style-type: none; /*设置列表标记类型，none为无标记*/
}
a:link { /*鼠标未点击的链接样式*/
text-decoration: none;
font-size: 25px;
color: black;
}
#left a:link {line-height: 40px;}
#right a:link {line-height: 50px;}
a:hover { /*鼠标移到链接上*/
outline-style: solid; /*绘制轮廓*/
outline-color: #EE5C42;
outline- thin;
color: red;
padding: 3px 5px 3px 5px;
}
#show { /*居中*/
text-align: center;
}
#music {
text-align: center;
}
js部分
var video=document.getElementById('wudang'); //访问video元素
function playPause(){ //鼠标点击事件
if(video.paused) //设置video对象属性
video.play(); //video对象方法
else
video.pause();
}
function makeBig(){
video.width+=50;
}
function makeSmall(){
video.width-=50;
}
function normal(){
video.width=800;
}
效果图
