今天又是一个新的开始！开始学习HTML5了！
掌握的知识点：语义化HTML，video、audio的使用。
不熟悉的地方：因为是刚接触新的东西，难免有些元素记不住或者是不知道属性，还得翻查资料！
掌握的知识点：语义化HTML，video、audio的使用。
不熟悉的地方：因为是刚接触新的东西，难免有些元素记不住或者是不知道属性，还得翻查资料！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML5基本练习</title>
<style type="text/css">
body{
background-color: yellow;
}
/*设置头部=============================================*/
header{ /*设置头部的盒模型*/
width: 1200px;
margin: 0 auto;
height: 120px;
outline: 3px solid papayawhip;
}
nav{ /*设置导航标签的盒模型*/
outline: 1px solid peachpuff;
width: 550px;
height: 60px;
float: right;
margin-top: 50px;
line-height: 65px;
}
a{
margin-left: 15px;
text-decoration: none;
}
a:hover{
color: red;
}
nav input{
margin-left: 8px;
}
#btu{ /*设置导航按钮*/
width: 50px;
height: 26px;
border: none;
border-radius: 8px;
cursor: pointer;
background-color: cornsilk;
}
/*中间部分==============================================*/
#center{ /*设置中间部分的盒模型*/
width: 1200px;
margin: 0 auto;
height: 340px;
background-color: orange;
padding: 30px;
margin-top: 10px;
}
.left,.mid,.right{
float: left;
margin-left: 56px;
}
.left{ /*设置中间左边的盒模型*/
outline: 1px solid yellow;
background-color: white;
width: 150px;
height: 338px;
}
menu li{ /* 设置菜单选项*/
list-style: none;
color: #c50;
margin-top: 10px;
cursor: pointer;
}
menu li:hover{
color: red;
}
.mid{ /*设置中间的盒模型*/
outline: 1px solid blueviolet;
background-color: white;
width: 700px;
height: 308px;
padding: 15px;
}
.mid_left,.mid-right {
width: 280px;
height: 286px;
padding: 10px;
outline: 1px solid fuchsia;
}
.mid_left{
float: left;
}
.mid-right{
float: right;
}
#div1,#div2,#div3,#div4{
height: 35px;
width: 90px;
padding: 10px;
margin: 20px;
border: 1px solid #ccc;
float:left;
}
.right{ /*设置中间右边的盒模型*/
outline: 1px solid brown;
background-color: white;
width: 150px;
height: 338px;
}
/*设置侧边弹窗=========================================*/
#ball{
position: fixed;
width: 30px;
height: 500px;
outline: 1px solid red;
left: 97.7%;
top: 60px;
}
aside{
width: 40px;
margin-left: -10px;
}
#ball:hover aside{
display: block;
}
aside{
display: none;
}
/*设置第二个中间部分===============================================*/
#center_2{/*设置尾部盒模型*/
outline: 1px solid blue;
padding: 30px;
width: 1200px;
margin: 0 auto;
height: 315px;
margin-top: 20px;
}
video{
margin-left: 300px;
}
#btu_1{/*设置视频开关按钮盒模型*/
position: absolute;
left: 650px;
border: none;
border-radius: 5px;
background-color: cornsilk;
}
#ball_2{
outline: 1px solid red;
position: fixed;
width: 150px;
height: 200px;
top: 430px;
left: 85%;
display: none;
}
#audio_btu{ /*设置音乐开关按钮盒模型、字体*/
position: fixed;
border: 1px solid red;
top: 100px;
left: -1px;
font-size: 12px;
width: 60px;
height: 60px;
text-align: center;
line-height: 26px;
border-radius: 50%;
color: palevioletred;
cursor: pointer;
}
/*设置尾部==================================================*/
footer{
width: 1000px;
height: 100px;
padding: 50px 0px;
background-color: #999;
margin: 20px auto;
text-align: center;
font-family: "宋体";
font-size: 28px;
}
</style>
<script type="text/javascript">
/*以下是拖曳并删除的方法========================================================*/
function drag(e){ /*待拖曳的东西=========*/
e.dataTransfer.setData("Text", e.target.id);
}
function drop(e){ /*被拖曳的东西==============*/
var data = e.dataTransfer.getData('Text');
e.target.appendChild(document.getElementById(data));
e.preventDefault(); /*取消浏览器的默认行为*/
}
function allowDrop(e){ /*拖曳完成=========*/
var drag1 = document.getElementById("drag1");
drag1.style.height = "0px";
e.preventDefault();
}
/*======以下是反复拖曳方法========================*/
function drag_2(e){
e.dataTransfer.setData("Text", e.target.id);
}
function drop_2(e){
var data = e.dataTransfer.getData('Text');
e.target.appendChild(document.getElementById(data));
e.preventDefault();
}
function allowDrop_2(e){
var drag1 = document.getElementById("drag2");
e.preventDefault();
}
/*以下是设置视频的方法======================================================*/
var flag = 1;
function fun(){
var video1=document.getElementsByTagName('video')[0];
var btu = document.getElementById("btu_1");
if(flag == 0){
video1.play();
btu.innerHTML = "暂停";
flag = 1;
}else if(flag == 1){
video1.pause();
btu.innerHTML = "播放";
flag = 0;
}
}
function ball_2(){
var ball_2 = document.getElementById("ball_2");
ball_2.style.display = "block";
setTimeout(function(){
ball_2.style.display = "none";
},3000);
}
/*以下是设置音频的方法======================================================*/
var flag_2 = 1;
function fun_2(){
var video1=document.getElementsByTagName('audio')[0];
var btu = document.getElementById("audio_btu");
if(flag_2 == 0){
video1.play();
btu.innerHTML = "暂停" + "<br/>" + "音乐";
flag_2 = 1;
}else if(flag_2 == 1){
video1.pause();
btu.innerHTML = "播放" + "<br/>" + "音乐";
flag_2 = 0;
}
}
</script>
</head>
<body>
<header>
<nav>
<a href="#">去哪儿</a>
<a href="#">去哪儿</a>
<a href="#">去哪儿</a>
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="嘿嘿">
<option value="哈哈">
<option value="呵呵">
</datalist>
<button id="btu">确定</button>
</nav>
</header>
<div id="center">
<div class="left">
<menu>
<li><input type="checkbox" />菜单一</li>
<li><input type="checkbox" />菜单二</li>
<li><input type="checkbox" />菜单三</li>
<li><input type="checkbox" />菜单四</li>
<li><input type="checkbox" />菜单五</li>
</menu>
</div> <!--中间的左边部分-->
<div class="mid">
<div class="mid_left">
<div id="div1">
<img src="1.png" draggable="true" οndragstart="drag(event)" id="drag1" />
</div>
<div id="div2" οndragοver="allowDrop(event)" οndrοp="drop(event)"></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>拖曳到指定区域删除</p>
</div>
<div class="mid-right">
<div id="div3" οndragοver="allowDrop_2(event)" οndrοp="drop_2(event)">
<img src="1.png" draggable="true" οndragstart="drag_2(event)" id="drag2" />
</div>
<div id="div4" οndragοver="allowDrop_2(event)" οndrοp="drop_2(event)"></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>可重复来回拖曳到指定区域</p>
</div>
</div> <!--中间部分=========-->
<div class="right">
<section id="destroy">
<h3>第一章：出山</h3>
<p>...more...</p>
<h3>第二章：威震武林</h3>
<p>...more...</p>
</section>
</div><!--中间的右边部分-->
<div id="ball">
<aside>
<h3>呵呵</h3>
<h3>哈哈</h3>
<h3>嘿嘿</h3>
<h3>姚姚</h3>
<h3>熊大</h3>
</aside>
</div> <!--设置侧边栏================-->
</div>
<div id="center_2">
<video src="iceage4.mp4" controls='controls' >
您的浏览器不支持 video 标签。
</video>
<div id="btuKK">
<button id="btu_1" οnclick="fun(),ball_2()">播放</button>
</div>
<div id="ball_2">
<p>您正在收看的是...</p>
</div>
<audio src="I%20Love%20You.mp3" loop="loop" autoplay="autoplay"></audio>
<div id="audio_btu" οnclick="fun_2()">暂停<br/>音乐</div>
</div>
<footer>
<h2>就这样吧~</h2>
</footer>
</body>
</html>
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
