Javascript 奇怪的颜色显示出来，不是'；t在我的样式表上_Javascript_Jquery_Html_Css

Javascript 奇怪的颜色显示出来，不是'；t在我的样式表上

javascript jquery html css

Javascript 奇怪的颜色显示出来，不是'；t在我的样式表上,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在页面中添加一个表，但我无法让我的服务器显示很多更改，它决定我的背景颜色为黑色和灰色。我删除了索引和样式表中的每一种颜色，对于我的第一个div，它仍然是黑色背景，当单击链接时，我的所有文本都无法阅读，因为它被这种炭色覆盖。我已经在这上面浪费了好几个小时，但我仍然不知道为什么我的div和图像不会变大，我的背景色也不会改变 HTML是 <meta charset="UTF-8"/> <link href="http://localhost/st

我试图在页面中添加一个表，但我无法让我的服务器显示很多更改，它决定我的背景颜色为黑色和灰色。我删除了索引和样式表中的每一种颜色，对于我的第一个div，它仍然是黑色背景，当单击链接时，我的所有文本都无法阅读，因为它被这种炭色覆盖。我已经在这上面浪费了好几个小时，但我仍然不知道为什么我的div和图像不会变大，我的背景色也不会改变

HTML是

        <meta charset="UTF-8"/>
        <link href="http://localhost/stylesheet.css" type="text/css" rel="stylesheet">
        <link href="http://localhost/mary/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
    <!DOCTYPE><HTML>
    <head>
        <title>Mary Bishop</title>
    <script type="text/javascript" src="http://localhost/jscript.js"></script>
        <script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"></script>
    </head>

<body>
<div id="content">
    <div id="list">
    <ul>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li style="font-family:Andale Mono"><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li style="font-family:fantasy"><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li style="font-family: Bitstream Vera Sans Mono"><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</div> 
</div>


    <div id="background">
            <div class="col1">stuff1            
            </div>
            <div class="col1">stuff2  
            </div>  
            <div class="col1">stuff3
            </div>
            <br />
            <br />
            <div class="col2">
                <ol>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ol>   
            </div>
            <div class="col2">
                <ol>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ol>
            </div>
            <div class="col2">more stuff</div>

    </div>
</body>
</html>

（你可以看到，我甚至去掉了链接的悬停颜色，它仍然在那里！）

JQuery是

$(document).ready(function () {
    var element = $('#list a');
    var offset = 0;
    var stepping = 0.03;
    var list = $('#list');
    var $list = $(list);
        $list.mousemove(function (e) {
            var topOfList = $list.eq(0).offset().top;
            var listHeight = $list.height();
            stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1;
});
for (var i = element.length - 1; i >= 0; i--) {
    element[i].elemAngle = i * Math.PI * 2 / element.length;
        }
    setInterval(render, 30);
function render() {
    for (var i = element.length - 1; i >= 0; i--) {
        var angle = element[i].elemAngle + offset;
            x = 120 + Math.sin(angle) * 10;
            y = 45 + Math.cos(angle) * 40;
            size = Math.round(40 - Math.sin(angle) * 20);
                var elementCenter = $(element[i]).width() / 2;
                var leftValue = (($list.width() / 2) * x / 100 - elementCenter) + "px"
                    $(element[i]).css("fontSize", size + "pt");
                    $(element[i]).css("opacity", size / 100);
                    $(element[i]).css("zIndex", size);
                    $(element[i]).css("left", leftValue);
                    $(element[i]).css("top", y + "%");
                }
                offset += stepping;
            }
});

$(function(){
    $('#list').click(function(){
        $(this).hide();
        $('#background').show("explode", 500);
        });
});

我通过JSFIDLE运行了它，得到了同样的结果，所以我知道这不是我的服务器，而是我的代码：（请帮助，我对这一点无能为力。挫折甚至无法描述我现在的感受。）（

你能给我们链接JSFIDLE吗？为什么在DOCTYPE上面有meta和link标记？我首先创建了一个JSFIDLE，在关闭body标记之前，将meta和link标记放在HTML的head部分和script标记中。对不起，我想我在复制时跳过了它，它转换了一些行。首先是DOCTYPE，然后是meta和link标记脚本标记位于head部分，这不会有多大帮助，但当这种情况发生在我身上时（通常是这样），我只将所有内容剥离为HTML，然后逐个类/id添加回CSS类/id。最后逐行添加js。

$(document).ready(function () {
    var element = $('#list a');
    var offset = 0;
    var stepping = 0.03;
    var list = $('#list');
    var $list = $(list);
        $list.mousemove(function (e) {
            var topOfList = $list.eq(0).offset().top;
            var listHeight = $list.height();
            stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1;
});
for (var i = element.length - 1; i >= 0; i--) {
    element[i].elemAngle = i * Math.PI * 2 / element.length;
        }
    setInterval(render, 30);
function render() {
    for (var i = element.length - 1; i >= 0; i--) {
        var angle = element[i].elemAngle + offset;
            x = 120 + Math.sin(angle) * 10;
            y = 45 + Math.cos(angle) * 40;
            size = Math.round(40 - Math.sin(angle) * 20);
                var elementCenter = $(element[i]).width() / 2;
                var leftValue = (($list.width() / 2) * x / 100 - elementCenter) + "px"
                    $(element[i]).css("fontSize", size + "pt");
                    $(element[i]).css("opacity", size / 100);
                    $(element[i]).css("zIndex", size);
                    $(element[i]).css("left", leftValue);
                    $(element[i]).css("top", y + "%");
                }
                offset += stepping;
            }
});

$(function(){
    $('#list').click(function(){
        $(this).hide();
        $('#background').show("explode", 500);
        });
});