大家好,
有一个问题,来源于这里,
<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 内部,在 并内联添加样式,但这不起作用。
提前谢谢你。
我认为您正在寻找html的基本结构,在html中您可以包含<style>
和<script>
标签。
但是您可以将样式和脚本放在单独的文件中,并在 html 中引用, 请参阅脚本和样式属性。
<!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>
您可以在两种情况下解决问题:
第一:(不建议这样做,但你可以这样做(
你把你的风格类
放入标签中并将您的代码 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 放入新文件 CSS 并使用 <link rel="stylesheet" href="link_to_css_file">
添加此文件。
这
对于考试:
<body>
<head>
<link rel="stylesheet" href="link_to_css_file">
<script src="link_to_file_js"></script>
</head>
...
</body>
最好为 CSS 和 Script 创建单独的文件,并使用以下代码行将其实现到您的网页上。
.CSS:
<head>
<link rel="stylesheet" src="assets/css/main.css" type="text/css" />
</head>
脚本:
<script type="text/javascript" src="assets/js/main.js"></script>