Question

我指的是这个网站，以了解如何在CSS中实现侧边菜单：http://purecss.io/layouts/side-menu/

我没有成功。我的网页上方有一个 > ，只有在实现链接提供的两个源代码后才会显示。但它并没有变得互动。为了使其响应，我需要声明该行以启用ui.js代码，但我遇到了这个问题。 The webpage/

我宣布：

`<!DOCTYPE html>
<!<script type="text/css" src="Scripts/main.css"></script>>
<script src="ui.js"></script>
<html>
    <head>
        <script src="ui.js"></script>
        <style>
                body {background-color:black}
                h1   {color:azure}
                p    {color:whitesmoke; border:2px solid whitesmoke; padding: 10px;}
        }</style>
        <link rel="stylesheet" type="text/css" href="side-menu.css" media="screen" />
    </head>
    <h1>
        Home
    </h1>
    <p>
        Your momma!
    </p>
    <div>
        <button id="btnAdd" class="btn btn-small">Add</button>
        <button id="btnClear" class="btn btn-small">Clear</button>
    </div>
</html>`

它并没有变得活跃。任何想法都将不胜感激！

Answer 1

您的示例不是有效的HTML - 我建议修复错误并重新尝试。

您有多个<script>个标记指向同一个文件。

HTML标记以<tag>开头，以</tag>结尾。评论从。

加载CSS时，您需要使用<link>标记，而不是<script>标记。

<html>标记中除了单个<head>和单个<body>

之外，不应该直接存在任何内容

你的代码，整理一下，看起来像这样：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="Scripts/main.css" />
        <link rel="stylesheet" type="text/css" href="side-menu.css" media="screen" />
        <script src="ui.js"></script>
        <style>

body {
    background-color:black;
}
h1 {
    color:azure;
}
p {
    color:whitesmoke;
    border:2px solid whitesmoke;
    padding: 10px;
}

        </style>
    </head>
    <body>
        <h1>Home</h1>
        <p>Your momma!</p>
        <div>
            <button id="btnAdd" class="btn btn-small">Add</button>
            <button id="btnClear" class="btn btn-small">Clear</button>
        </div>
    </body>
</html>

正确的缩进很重要，因为它可以帮助您发现错误。例如，在您的内联<style>元素中，您有一个太多的结束括号}。浏览器仍然会尽力理解你所拥有的东西，但这种＆＃34;额外支撑＆＃34;会导致各种难以发现的错误。

Answer 2

看起来有些拼写错误/语法错误。删除`开头和结尾的`，第一个＆lt;！和第二个＆gt;哪里有＆gt;＆gt;＆gt;然后再试一次。

`<!DOCTYPE html>
<!<script type="text/css" src="Scripts/main.css"></script>>

此外，前2个脚本标记应移动到head部分。并且你在那里有一个重复的ui.js脚本标签..所以只需要一个。

Answer 3

您的代码中存在一些基本错误：

正文标记在哪里？
html标签之外的脚本标签!!!
CSS样式不正确（额外尾随花括号）

.JS拒绝启用菜单

3 个答案: