HTML5
2015-09-23 21:47
597 查看
新特性
HTML5 新特性：用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>回收站</title>
<style type="text/css">
.div1 {
width: 200px;
height: 200px;
background: #D12121;
}
.div2, .div3, .div4 {
width: 150px;
height: 20px;
background: #15E5A5;
margin: 20px;
}
</style>
</head>
<body>
<div class="div1" id="div1"></div>
<div class="div2" id="div2" draggable="true"></div>
<div class="div3" id="div3" draggable="true"></div>
<div class="div4" id="div4" draggable="true"></div>
<script type="text/javascript">
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');
event = window.event || event;
div2.ondragstart = function(event) {
event.dataTransfer.setData('Text', event.target.id);
}
div3.ondragstart = function(event) {
event.dataTransfer.setData('Text', event.target.id);
}
div4.ondragstart = function(event) {
event.dataTransfer.setData('Text', event.target.id);
}
div1.ondrop = function(event) {
var data = event.dataTransfer.getData('Text');
event.target.appendChild(document.getElementById(data));
event.preventDefault();
}
div1.ondragover = function (event) {
event.preventDefault();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
ul li {
list-style-type: none;
}
header {
width: 1000px;
height: 100px;
background: #EDE8E8;
margin-left: 50px;
}
header .nav_1 ul {
margin-left: 300px;
}
header .nav_1 ul li {
display: inline-block;
line-height: 100px;
margin-left: 30px;
}
aside #aside_1 {
height: 50px;
width: 100px;
background: #15E5A5;
color: #D12121;
position: absolute;
left: 950px;
display: none;
}
#center {
width: 1000px;
height: 200px;
margin-left: 50px;
}
#left, #right, #middle {
float: left;
}
#center #left {
width: 333px;
height: 200px;
background: #D12121;
}
#center #middle {
width: 333px;
height: 200px;
background: #C1E80A;
}
#center #right {
width: 333px;
height: 200px;
background: #15D81F;
}
footer {
width: 1000px;
height: 100px;
background: #026AFE;
margin-left: 50px;
}
</style>
</head>
<body>
<header>
<nav class="nav_1">
<ul>
<li>nav_one</li>
<li>nav_two</li>
<li>nav_there</li>
<li>nav_four</li>
<li>nav_five</li>
</ul>
</nav>
</header>
<aside>
<div id="aside_1">
This is a small ad!
</div>
</aside>
<div id="center">
<menu id="left"></menu>
<div id="middle"></div>
<div id="right"></div>
</div>
<footer></footer>
</body>
<script type="text/javascript">
var aside_1 = document.getElementById('aside_1');
function show_aside_1() {
aside_1.style.display = 'block';
}
setTimeout(show_aside_1, 3000);
// setInterval(show_aside_1, 3000);
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html5
- html5
- html5 构造网页的新方式
- html5
- 探索Ionic过程中的一些亮点与各种坑整理
- H5性能优化方案
- HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系
- 【html5多媒体】自定义播放器（弹幕，水印，甚至在视频开头添加封面）
- Html5 Api 实现浏览器全屏
- html5实现多文件上传
- html5 video
- 利用HTML5云存储实现模拟对比投票效果
- html5学习笔记（二）
- 浅谈html5网页内嵌视频(转)
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
- HTML5 拖放实例
- 小强的HTML5移动开发之路（12）——从一个多媒体标签说起
- 小强的HTML5移动开发之路（12）——从一个多媒体标签说起