每日一点前端-4-html5小练习
2017-02-22 本文已影响829人
张中华
前言：这是我之前在看后盾网html5视频时做的一些小样例，现在我把我认为一些有意思的东西拿出来跟大家分享一下，还望多多指教。
1.datalist标签，这个标签制作的下拉可省了不少事呢……此处注意input里的list=“li”与datalist里的id=“li”。
datalist使用展示.gif
贴上一段简短的代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
请输入姓名：<input type="text" list="li"/>
<datalist id="li">
<option>
张三
</option>
<option>
李四
</option>
<option>
王五
</option>
</datalist>
</body>
</html>
2.div的拖拽，这个效果可以做出一些跟随鼠标在浏览器内移动的有意思的东西。
效果如图显示：
div跟随鼠标移动.gif
贴上代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#one{background-color: red;height: 30px;width: 30px;position: absolute;}
</style>
<script>
window.onload = function () {
var one = document.getElementById("one");
one.onmousedown = function () {
document.onmousemove = function (e){
one.style.left = e.clientX + "px";
one.style.top = e.clientY + "px";
}
}
}
</script>
</head>
<body>
<div id="one">
</div>
</body>
</html>
3.progress标签
progress标签进度条.gif
贴上代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function (){
var pro = document.getElementsByTagName("progress")[0];
var t = setInterval(
function (){
if (pro.value == 10){
clearInterval(t);
document.body.removeChild(pro);
var spans = document.createElement("span");
spans.innerHTML = "加载文成";
document.body.appendChild(spans);
}else{
pro.value++;
}
},1000
);
}
</script>
</head>
<body>
<progress min=0 max=10 value=5></progress>
</body>
</html>
4.部分在页面布局上的标签
网页布局标签
贴上代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*,a{margin:0px;padding:0px;list-style: none;text-decoration: none;}
header{width: 100%;height:100px;font-size: 20px;color:#909090;background-color: bisque;
text-align: center;line-height:100px;vertical-align:middle; }
section{float: left;width: 80%;height:300px;background-color: #323232;}
aside{float:left;width:20%;height:300px;}
.main{background-color: #909090;}
</style>
</head>
<body>
<header>
我是网页的header！
</header>
<div class="main">
<nav>
<a>首页</a>
<a>首页</a>
<a>首页</a>
</nav>
<section>
<hgroup>
<h1>hGroupH1标题</h1>
<h2>hGroupH2标题</h2>
</hgroup>
<artical>
这里是artical的文章内容！ 这里是artical的文章内容！ 这里是artical的文章内容！
这里是artical的文章内容！ 这里是artical的文章内容！ 这里是artical的文章内容！
这里是artical的文章内容！ 这里是artical的文章内容！ 这里是artical的文章内容！
</artical>
</section>
<aside>
这是文章的侧边栏！
</aside>
</div>
<footer>
网页的底部！
</footer>
</body>
</html>
由于这些东西是之前做的了，现在也并没什么有感觉的地方，就自己看看复习复习，然后拿出来分享分享……
