如何仅在 html 中使用 css 和 javascript [重复]答案

【问题标题】：How to use css and javascript in html only [duplicate]如何仅在 html 中使用 css 和 javascript [重复]
【发布时间】：2017-06-17 09:13:51
【问题描述】：

我有以下 html、javascript 和 css 代码，但是，我不知道如何制作它，这样我最终只能在运行程序时使用 html。我听说在你的 html 的头部引用它，但是不知道怎么做，也不知道我可以在哪里上传 .js 或 .css 文件。

jsfiddle.net/tq7h99fo/3/

【问题讨论】：

我完全被你的问题弄糊涂了。

标签： javascript html css

【解决方案1】：

您将 Javascript 放在 <script> 标记中，将 CSS 放在 <style> 标记中。

<html>
<head>
<style>
* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative;}

.large {
    width: 175px; height: 175px;
    position: absolute;
    border-radius: 100%;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
    0 0 7px 7px rgba(0, 0, 0, 0.25), 
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);

    background: url('http://i.imgur.com/m57F6tb.png') no-repeat;
  //background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
    display: none;
}

.small { display: block; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

    var native_width = 0;
    var native_height = 0;

    $(".magnify").mousemove(function(e){
        if(!native_width && !native_height)
        {
            var image_object = new Image();
            image_object.src = $(".small").attr("src");
            native_width = image_object.width;
            native_height = image_object.height;
        }
        else
        {
            var magnify_offset = $(this).offset();
            var mx = e.pageX - magnify_offset.left;
            var my = e.pageY - magnify_offset.top;

            if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
            {
                $(".large").fadeIn(100);
            }
            else
            {
                $(".large").fadeOut(100);
            }
            if($(".large").is(":visible"))
            {
                var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
                var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
                var bgp = rx + "px " + ry + "px";

                var px = mx - $(".large").width()/2;
                var py = my - $(".large").height()/2;

                $(".large").css({left: px, top: py, backgroundPosition: bgp});
            }
        }
    })
})
</script>
</head>
<body>
<div class="magnify">
    <div class="large"></div>
    <img class="small" src="http://i.imgur.com/m57F6tb.png" width="200"/>
</div>

<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
</body>
</html>

【讨论】：

谢谢，这是最简单的格式！

【解决方案2】：

这是在 HTML 文件中导入 CSS 和 JS 的正常结构。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/file1.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <!-- body content -->
  </body>
  <script src="js/file2.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>

【讨论】：

【解决方案3】：

您可以使用任何文本编辑器创建 HTML 文件（只需将其保存为 .html）。当您拥有 CSS 时，您可以通过将其放在 <style> 标记内将其放在同一个文件中，也可以将其放在 .css 文件中。您可以通过<link rel="stylesheet" href="LINK TO .CSS FILE' /> 链接CSS 文件。同样，您可以将 JavaScript 放在 <script> 标记中或将其放在 .js 文件中。通过将 src 属性添加到 script 标签来链接 JavaScript 文件，因此 <script src="LINK TO JS">

【讨论】：