clx.demo

主要实现

用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;
}

clx.demo

主要实现

html部分

CSS部分

js部分

效果图