如何在HTML文件中调用CSS和Javascript？

时间：2016-06-02 21:32:37

标签： javascript html css

对于CSS和JavaScript，我是一个相当新的人。我发现了一个整齐的倒数计时器添加到我的网站，但我不确定如何将它添加到我想要的位置。

您可以在此处查看计时器：https://jsfiddle.net/ft8zoghr/1/

CSS：

html,body{margin:0px;padding:0px}
#cdt a img{border:0}
#cdt .demo{position:absolute;z-index:999;right:0;top:0}
#cdt #ie-fix{display:none}
#cdt .digit{background-image:url(https://d3qhtuwg866bv9.cloudfront.net/oc-sprite?bg_color=00000000&date_label=&encoding=png&font=Kelly+Slab&font_push_down=0.01&height=90&overlay_size=700%2C180&quality=0.95&renderer=v1&scale=1.124&shadow=1&shadow_blur=4&shadow_color=ffffff77&shadow_y=0&style=TemplateDigits01&text_align=center&title=&txt_color=ffffffFF&unit_labels=DAYS%2CHOURS%2CMINUTES%2CSECONDS&use_overlay=1&width=393);background-repeat:no-repeat;width:34px}
#cdt .digit-0{background-position:-315px -450px}
#cdt .digit-1{background-position:0px -405px}
#cdt .digit-2{background-position:-315px -360px}
#cdt .digit-3{background-position:0px -315px}
#cdt .digit-4{background-position:-315px -270px}
#cdt .digit-5{background-position:0px -225px}
#cdt .digit-6{background-position:-315px -180px}
#cdt .digit-7{background-position:0px -135px}
#cdt .digit-8{background-position:-315px -90px}
#cdt .digit-9{background-position:0px -45px}
#cdt .digit-x{width:17px;background-position:-730px -64px}
#cdt.widget-wrapper{width:393px;height:90px;position:relative;margin:auto}
#cdt .content-wrapper{width:100%;height:100%;background-position:0 -40px}
#cdt .spr{background-image:url(https://d29am0ph5s0t8u.cloudfront.net/production/cdt/widgets/sprites/image/1405744/oc-sprite.png?version=57509bf5-6)}@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)
{#cdt .spr{background-image:url(https://d29am0ph5s0t8u.cloudfront.net/production/cdt/widgets/sprites/retina_image/1405744/oc-sprite.png?version=57509bf5-6);background-size:899px 202px}}
#cdt .counter-wrapper{width:374px;height:45.0px;margin-left:19px}
#cdt .counter-wrapper .counter-item{height:48px;float:left}
#cdt .counter-wrapper .counter-group{height:67px;float:left;position:relative;overflow:hidden}
#cdt .counter-group .unit-label{position:absolute;height:25px;width:67px;left:0;top:46px}
#cdt .days .unit-label{background-position:-393px -128px}
#cdt .hours .unit-label{background-position:-461px -128px}
#cdt .minutes .unit-label{background-position:-528px -128px}
#cdt .seconds .unit-label{background-position:-596px -128px}
#cdt .header{height:19px;width:100%}

HTML：

<div id="cdt" class='widget-wrapper'>
<div class='content-wrapper spr'>
        <div class='header'>
        </div>
        <div class='counter-wrapper'>

            <div class='days counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>
            <div class='counter-item'></div>
            <div class='hours counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>
            <div class='counter-item'></div>
            <div class='minutes counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>
            <div class='counter-item'></div>
            <div class='seconds counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>

        </div>
    </div>
</div>

使用Javascript：

Too long to put here

在我的网站文件中，我使用适当的编码创建了count.css文件和count.js文件。我只是想知道我必须将它们放在我的网站index.html文件中，以便显示该计数器。

非常感谢！

5 个答案:

答案 0 :(得分：1)

我想一些1分钟的研究可以解决这个问题但是你走了：

将它放在你的 - 标签中：

<link rel="stylesheet" href="count.css">

这就在你关闭之前--Tag：

<script src="count.js"></script>

答案 1 :(得分：0)

将它们放在页脚中。应该最后加载脚本才能正常运行。不是这个案子，但更安全，然后抱歉。

<script src = "example.js"></script>

答案 2 :(得分：0)

不完全确定您要问的是什么，但是您想要将html放在<body>标签

的某个地方

实施例

    <!DOCTYPE html>
    <html>
    <head>
      <!--css and js stuff-->
      <link rel="stylesheet" href="count.css">
    </head>
    <body>
      <!--THE HTML GOES HERE-->
      <script src="count.js"></script>
    </body>
    </html>

答案 3 :(得分：0)

你必须按照以下方式做点什么：

std::pair

答案 4 :(得分：0)

最好在html标签关闭后添加js，最好是在body标签关闭之前。否则，如果执行脚本时HTML尚未就绪，则会出现错误。把你放在头标签之间。

<html>
<head>
<link rel="stylesheet" href="count.css">
</head>
<body>
<div id="cdt" class='widget-wrapper'>
<div class='content-wrapper spr'>
        <div class='header'>
        </div>
        <div class='counter-wrapper'>

            <div class='days counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>
            <div class='counter-item'></div>
            <div class='hours counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>
            <div class='counter-item'></div>
            <div class='minutes counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>
            <div class='counter-item'></div>
            <div class='seconds counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="count.js"></script>
</body>
</html>
相关问题
最新问题