第一次使用vscode

第一次使用vscode时,提前下载一个浏览器,火狐、谷歌等都可以。
汉化vscode在扩展里面chinese,下载简体中文包,会提示你重启,或者自己手动重启。

在任意盘创建一个文件夹,用vscode打开,在文件夹下创建一个后缀名为.html的文件,随便写一个代码。那就好心的我来给个例子吧。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 300px;
            height: 100px;
            border: 1px solid #321654;
            margin: 100px auto;
            line-height: 100px;
            position: relative;
            overflow: hidden;
        }

        #oul {
            width: 510px;
            /* border: 1px solid orange;          加上边框就不行了 */
            margin-top: 25px;
            text-align: center;
            position: absolute;
        }

        #oul li {
            height: 50px;
            width: 50px;
            border: 1px solid yellow;
            background-color: yellow;
            margin-right: 50px;
            line-height: 50px;
            float: left;
        }

        .arr span {
            height: 10px;
            width: 10px;
            border: 1px solid blue;
            margin-left: 500px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul id="oul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

    <script>
        var Oul = document.getElementById("oul");
        var nowLeft = 0;
        Oul.style.width = Oul.offsetWidth * 2 + "px";
        Oul.innerHTML += Oul.innerHTML;

        setInterval(function () {
            nowLeft = Oul.offsetLeft;
            if (nowLeft == -Oul.offsetWidth / 2) {
                Oul.style.left = 0;
            } else {
                Oul.style.left = nowLeft - 10 + "px";
            }
        }, 64)
    </script>
</body>

</html>

你不得用浏览器观看效果吗,因此你首先得下载一个插件:open in browser。安装后可能会出现问题,打开浏览器失败。因此,得在安装的这个插件右下方的设置里,点击其他版本,下载1.1.0。
还是会有可能出现另一个问题,提示你出现错误,可能是你修改了默认浏览器。按照正常的流程一般不会出现莫名其妙的问题。


版权声明:本文为meng_yang_原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。