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

最新推荐文章于 2022-10-27 14:14:10 发布

「已注销」

最新推荐文章于 2022-10-27 14:14:10 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/zhonghua_csdn/article/details/89877937

版权

前言：这是我之前在看后盾网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>

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