前端练手html5,每日一点前端-4-html5小练习

前言：这是我之前在看后盾网html5视频时做的一些小样例，现在我把我认为一些有意思的东西拿出来跟大家分享一下，还望多多指教。

1.datalist标签，这个标签制作的下拉可省了不少事呢……此处注意input里的list=“li”与datalist里的id=“li”。

datalist使用展示.gif

贴上一段简短的代码：

请输入姓名：

张三

李四

王五

2.div的拖拽，这个效果可以做出一些跟随鼠标在浏览器内移动的有意思的东西。

效果如图显示：

div跟随鼠标移动.gif

贴上代码:

#one{background-color: red;height: 30px;width: 30px;position: absolute;}

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";

}

}

}

3.progress标签

progress标签进度条.gif

贴上代码：

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

);

}

4.部分在页面布局上的标签

网页布局标签

贴上代码：

*,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;}

我是网页的header！

首页

首页

首页

hGroupH1标题

hGroupH2标题

这里是artical的文章内容！ 这里是artical的文章内容！ 这里是artical的文章内容！

这里是artical的文章内容！ 这里是artical的文章内容！ 这里是artical的文章内容！

这里是artical的文章内容！ 这里是artical的文章内容！ 这里是artical的文章内容！

这是文章的侧边栏！

网页的底部！

由于这些东西是之前做的了，现在也并没什么有感觉的地方，就自己看看复习复习，然后拿出来分享分享……