如何在html中僅使用css和javascript

我有以下html，javascript和css代碼，但是，不要如何使它可以使我在運行程序時最終使用html。我聽說過在html的頭部引用它，但是，不要怎麼做，也不要在哪裏上傳.js或.css文件。如何在html中僅使用css和javascript

jsfiddle.net/tq7h99fo/3/

來源

2017-06-17 user3696953

我完全被你的問題困惑不解。 – ceejayoz

你把Javascript語言，<script>標籤，並在<style>標籤CSS。

<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>

來源

2017-06-17 01:08:55 Barmar

謝謝，這是最簡單的格式！ – user3696953

這是在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>

來源

2017-06-17 01:11:58

您可以創建任何文本編輯器的HTML文件（只是將其保存爲html的）。當您擁有CSS時，您可以將它放入<style>標記中，也可以將它放在同一個文件中，也可以將它放在.css文件中。您可以通過<link rel="stylesheet" href="LINK TO .CSS FILE' />鏈接CSS文件。同樣，您可以將JavaScript放在<script>標記中，或將其放入.js文件中。通過將src屬性添加到腳本標記鏈接JavaScript文件，所以<script src="LINK TO JS">

來源

2017-06-17 01:12:27

如何在html中僅使用css和javascript

回答

相關問題