加入HTML，CSS和JavaScript

-2

有一個問題，根源在這裏，

<div class="offer offer-blocked"> 
<img src="https://i.stack.imgur.com/b1oc4.jpg"></img> 
    <div class="fb-like" data-href="http://www.windows-help-support.com" data-send="false" data-width="450" data-show-faces="false"></div> 
<div id="fb-root"></div> 

    .offer-blocked { 
    position: relative; 
    display: inline-block; 
    &:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background-color: rgba(0,0,0,0.7); 
    top:0; 
    left:0; 
    } 
    img { 
    @width: 10px; 
    filter: blur(@width); 
    // Browser Specific 
    -webkit-filter: blur(@width); 
    -moz-filter: blur(@width); 
    -o-filter: blur(@width); 
    -ms-filter: blur(@width); 
    } 
    .fb-like { 
    z-index: 100; 
    position: absolute; 
    top: 30%; 
    left: 30%; 
    margin-left:-20px; 
    color: #fff; 
    } 
    .fb-like:after { 
    content:"Please click on the LIKE button to unlock the OFFER"; 
    display:'block'; 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 50px; 
    font-size: 25px; 
    font-family: verdana; 
    } 
} 

    jQuery(function() { 

    window.fbAsyncInit = function() { 
// Don't use my app id, use your own or it won't work! 
FB.init({appId: '134385103436857', status: true, cookie: true, xfbml: true}); 


    FB.Event.subscribe('edge.create', function(href, widget) { 
     console.dir(href); 
     console.dir(widget); 
    jQuery(".offer.offer-blocked").removeClass("offer-blocked"); 
    jQuery(".fb-like").hide(); 
    }); 
}; 
(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&      appId=134385103436857"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

``});

我需要做的就是把所有的代碼一起放入HTML什麼。這將在稍後的wordpress.COM網頁中進行。

試圖將代碼放入HTML中，並在內部添加樣式，但這不起作用。

預先感謝您。

來源

2017-06-19 Dimrak

你把你的CSS到標籤和JS到？你能解決你的問題嗎？ –

更好的是把樣式和腳本放到其他文件中 – KrisKK

我認爲你正在尋找的HTML的基本結構，在HTML中可以包括<style>和<script>標籤。

但是，您可以將樣式和腳本放在單獨的文件中並在html中引用，請參閱script和style屬性。

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      /*Your style here.*/ 
     </style> 
     <script type="text/javascript"> 
      //Your script goes here 
     </script> 
    </head> 
    <body> 
    </body> 
</html>

來源

2017-06-19 12:54:22

您可以在兩個情況下解決您的問題：
第一：（不推薦，但你可以做到這一點）
你把標籤的樣式類
並投入標記你的代碼的js爲波紋管

.offer-blocked { 
    position: relative; 
    display: inline-block; 
    &:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background-color: rgba(0,0,0,0.7); 
    top:0; 
    left:0; 
    } 
    img { 
    @width: 10px; 
    filter: blur(@width); 
    // Browser Specific 
    -webkit-filter: blur(@width); 
    -moz-filter: blur(@width); 
    -o-filter: blur(@width); 
    -ms-filter: blur(@width); 
    } 
    .fb-like { 
    z-index: 100; 
    position: absolute; 
    top: 30%; 
    left: 30%; 
    margin-left:-20px; 
    color: #fff; 
    } 
    .fb-like:after { 
    content:"Please click on the LIKE button to unlock the OFFER"; 
    display:'block'; 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 50px; 
    font-size: 25px; 
    font-family: verdana; 
    } 
} 

</style> 
<script> 
jQuery(function() { 

    window.fbAsyncInit = function() { 
// Don't use my app id, use your own or it won't work! 
FB.init({appId: '134385103436857', status: true, cookie: true, xfbml: true}); 


    FB.Event.subscribe('edge.create', function(href, widget) { 
     console.dir(href); 
     console.dir(widget); 
    jQuery(".offer.offer-blocked").removeClass("offer-blocked"); 
    jQuery(".fb-like").hide(); 
    }); 
}; 
(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&      appId=134385103436857"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

``}); 
</script> 

<div class="offer offer-blocked"> 
<img src="https://i.stack.imgur.com/b1oc4.jpg"></img> 
    <div class="fb-like" data-href="http://www.windows-help-support.com" data-send="false" data-width="450" data-show-faces="false"></div> 
<div id="fb-root"></div>

或第二方案是：
把你的js代碼到新的文件js和使用<script src="link_to_file_js"></script>添加此文件，並把你的CSS代碼對NE w文件css並使用<link rel="stylesheet" href="link_to_css_file">添加此文件。
這
對於examlpe：

<body> 
    <head> 
     <link rel="stylesheet" href="link_to_css_file"> 
     <script src="link_to_file_js"></script> 
    </head> 
    ... 
</body>

來源

2017-06-19 12:49:03 KrisKK

最好爲CSS和腳本創建單獨的文件，並使用以下代碼行將其實現到您的網頁上。

CSS：

<head> 
    <link rel="stylesheet" src="assets/css/main.css" type="text/css" /> 
</head>

腳本：

<script type="text/javascript" src="assets/js/main.js"></script>

來源

2017-06-19 13:01:51 MHamer5

加入HTML，CSS和JavaScript

回答

相關問題