<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>test</title><style type="text/css">/*#right{display:inline;}*/#list1 a:hover{color:#CC0033;}#list2 a:hover{color:#CC0033;}/*#list2 a:active{color:#0000FF;}*/#left,#right{float:left;color:#FF33CC;}#right{padding:10px;margin-top:40px;font-size:18px;color:#000000;line-height:20px;}body{font-size:28px;line-height:45px;}a{text-decoration:none;color:#FF0000;} /*去除锚链接的下划线*/li{list-style:none; }</style><body><div id="left"><ul><li id="list1"><a href="#" onclick="document.getElementById('text1').style.display='block';document.getElementById('text2').style.display='none'">中国电影</a> </li><li id="list2"><a href="#" onclick="document.getElementById('text2').style.display='block';document.getElementById('text1').style.display='none'">外国电影</a></li></ul></div><div id="right" style=" float:left;width:300px;height:500px;border:2px;margin-top:-50px;"><div id="text1" style="float:left;border:2px;width:800px;height:200px;display:inline"><video src="战狼.mp4" width="300px" height="300px" controls="controls"></video><video src="2.mp4" width="300px" height="300px" controls="controls"></video><ul><li style="float:left">战狼，由**主演</li><li style=" margin-left:150px ;float:left ">失孤，由刘德华和井柏然主演</li></ul><!--<p>战狼，由**主演</p><p>失孤，由刘德华和井柏然主演</p>--></div><div id="text2" style="float:left;border:2px;width:200px;height:200px;display:none;margin-top:80px"><video src="1.mp4" controls="controls"></video></div></div></body></html>效果如图：
