我使用了一个名为embedit的插件在我的wordpress中使用自定义html，javascript和CSS。原始代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-darkness/jquery-ui.css" />
<style>
.calculator>td{
border-bottom: 0px;
border-top: 0px;
}
input.dark[type=text] {
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border:1px solid rgba(31, 161, 5, 1);
text-align: center;
background: #000000;
behavior: url(/pie/PIE.htc);
color: #10c90d;
height: 20px;
width: 35px;
}
#container {
width:300px;
height:320px;
z-index:4;
-webkit-transform: rotate(10deg) skew(0,0) translate(0%,-5px);
-moz-transform: rotate(10deg) skew(0,0) translate(0%,-5px);
-o-transform: rotate(10deg) skew(0,0) translate(0%,-5px);
transform: rotate(10deg) skew(0,0) translate(0%,-5px);
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
}
input[type=text].dark:focus {
box-shadow: 0 0 9px rgba(31, 161, 5, 1);
-webkit-box-shadow: 0 0 9px rgba(31, 161, 5, 1);
-moz-box-shadow: 0 0 9px rgba(31, 161, 5, 1);
}
.report{
margin-top:-100px;
margin-left:70%;
}
.main{
background: rgb(0,155,5); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOWIwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDY4MTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(#9BD91A, #54750E); /* FF3.6+ */
background: -webkit-gradient(#9BD91A, #54750E); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#9BD91A, #54750E); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#9BD91A, #54750E); /* Opera 11.10+ */
background: -ms-linear-gradient(#9BD91A, #54750E); /* IE10+ */
background: linear-gradient(#9BD91A, #54750E); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9BD91A', endColorstr='#54750E',GradientType=0 ); /* IE6-8 */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
color:#ffffff;
border-color: #000000;
border-width: 100px;
-webkit-box-shadow: inset 2px 2px 21px 21px rgba(0, 0, 0, .4);
box-shadow: inset 2px 2px 21px 21px rgba(0, 0, 0, .4);
-moz-box-shadow: inset 2px 2px 21px 21px rgba(0, 0, 0, .4);
width: 100%;
}
.pointer{
cursor: pointer;
}
.half{
width: 50%;
}
.full{
width: 100%;
}
.tape{
position: relative;
top:-40px;
left:50px;
width: 130px;
height: 35px;
background-color:#fff;
opacity:0.6;
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 1px 0px #cccccc;
-moz-box-shadow: 0px 0px 1px 0px #cccccc;
box-shadow: 0px 0px 1px 0px #cccccc;
-webkit-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
-moz-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
-o-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
}
.paper {
padding:25px 25px 40px;
margin:0 auto 20px auto;
align:center;
line-height:1.5;
border:0;
border-radius:3px;
background: #F9EFAF;
background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
background: -moz-linear-gradient(#F9EFAF, #F7E98D);
background: -o-linear-gradient(#F9EFAF, #F7E98D);
background: -ms-linear-gradient(#F9EFAF, #F7E98D);
background: linear-gradient(#F9EFAF, #F7E98D);
box-shadow:0 4px 6px rgba(0,0,0,0.1);
transition:box-shadow 0.5s ease;
font-smoothing:subpixel-antialiased;
width:220px;
height:260px;
}
.calculator{
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
height: 700px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<div class="calculator">
<div class="main">
<h1>Solar Payback Calculator</h1>
<table>
<form><tr><td colspan="9"><h2>Roof Size</h2></td></tr><tr><td>
Width: </td><td class="pointer" onclick="subtractwidth();">- </td><td colspan="2" width="500"><div id="slider1"></div></td><td class="pointer" onclick="addwidth();"> + </td><td>
Length: </td><td class="pointer" onclick="subtractlength();">- </td><td colspan="2" width="500"><div id="slider2"></div></td><td class="pointer" onclick="addlength();">
+</td></tr><tr><td></td><td></td><td>
<input type="text" id="roof_width" onKeyUp="calculate();" class="slider_input1 dark" value="0"/>m</td><td></td><td></td><td></td><td></td><td>
<input type="text" id="roof_length" onKeyUp="calculate();" class="slider_input2 dark" value="0"/>m</td></tr>
<tr><td>
Electricity Bill: </td><td class="pointer" onclick="subtractbill();">- </td><td colspan="7" width="500"><div id="slider3"></div></td><td onclick="addbill();" class="pointer">
+</td></tr><tr><td></td><td></td><td>
£<input type="text" id="electricity_bill" onKeyUp="calculate();" class="slider_input3 dark" value="0"/></td></tr>
</form>
</table>
<table class="full"><tr><td>
<table class="half">
<tr><td>Area of the roof: </td><td></td><td><span id="roof_area"></span><span id="unit_area"></span></td></tr>
<tr><td>Number of Solar Panels: </td><td></td><td><span id="no_solar_panel"></span></td></tr>
<tr><td>System Cost: </td><td></td><td><span id="system_cost"></span></td></tr>
<tr><td>Annual System Output: </td><td></td><td><span id="system_output"></span></td></tr>
<tr><td>FIT Estimate: </td><td></td><td><span id="fit_estimate"></span></td></tr>
</table></td>
<td><table class="half">
<tr><td>Export FiT: </td><td></td><td><span id="export_fit"></span></td></tr>
<tr><td>Savings from using Solar Energy: </td><td></td><td><span id="savings"></span></td></tr>
<tr><td>Total Annual Yields: </td><td></td><td><span id="total_annual_yield"></span></td></tr>
<tr><td>Payback time in years: </td><td></td><td><span id="payback_time"></span></td></tr>
<tr><td>Profit over 20 years: </td><td></td><td><span id="profit"></span></td></tr>
</table></td></tr>
</table>
<script>
$("#slider1").slider({
range: "min",
value: 0,
step: 0.01,
min: 0,
animate: true,
max: 10,
slide: function( event, ui ) {
$( ".slider_input1" ).val( ui.value );
calculate();
//$( ".slider_input" ).val( ui.value );
}
});
$(".slider_input1").change(function () {
var value = this.value
$("#slider1").slider("value", parseInt(value));
calculate();
});
$("#slider2").slider({
range: "min",
value: 0,
step: 0.01,
min: 0,
animate: true,
max: 10,
slide: function( event, ui ) {
$( ".slider_input2" ).val( ui.value );
calculate();
//$( ".slider_input" ).val( ui.value );
}
});
$(".slider_input2").change(function () {
var value = this.value
$("#slider2").slider("value", parseInt(value));
calculate();
});
$(".slider_input2").change(function () {
var value = this.value
$("#slider2").slider("value", parseInt(value));
calculate();
});
$("#slider3").slider({
range: "min",
value: 0,
step: 1,
min: 0,
animate: true,
max: 3000,
slide: function( event, ui ) {
$( ".slider_input3" ).val( ui.value );
calculate();
//$( ".slider_input" ).val( ui.value );
}
});
$(".slider_input3").change(function () {
var value = this.value
$("#slider3").slider("value", parseInt(value));
calculate();
});
var calculate = function(){
var roof_length = document.getElementById('roof_length').value;
var roof_width = document.getElementById('roof_width').value;
var electricity_bill= document.getElementById('electricity_bill').value;
roof_length = parseInt(roof_length);
roof_width = parseInt(roof_width);
electricity_bill = parseInt(electricity_bill);
if (roof_length<0 || roof_width<0 || electricity_bill<0){
roof_length = Math.abs(roof_length);
roof_width = Math.abs(roof_width);
electricity_bill = Math.abs(electricity_bill);
document.getElementById('roof_length').value=roof_length;
document.getElementById('roof_width').value=roof_width;
document.getElementById('electricity_bill').value=electricity_bill;
}
var roof_area = roof_length*roof_width;
roof_area = roof_area.toFixed(2);
if(isNaN(roof_area)){
document.getElementById('roof_area').innerHTML="Invalid Input";
document.getElementById('unit_area').innerHTML="";
}else{
document.getElementById('roof_area').innerHTML=roof_area;
document.getElementById('unit_area').innerHTML=" m<sup>2</sup>";
}
var no_solar_panel = roof_area/1.676675;
no_solar_panel = Math.floor(no_solar_panel);
if(isNaN(no_solar_panel)){
document.getElementById('no_solar_panel').innerHTML="Invalid Input";
}else if(no_solar_panel<16){
document.getElementById('no_solar_panel').innerHTML=no_solar_panel;
}else{
var no_solar_panel = 16;
document.getElementById('no_solar_panel').innerHTML=no_solar_panel;
}
var system_cost = no_solar_panel*500;
if(isNaN(system_cost)){
document.getElementById('system_cost').innerHTML="Invalid Input";
}else{
document.getElementById('system_cost').innerHTML="£" + system_cost;
}
var system_output = no_solar_panel*256;
if(isNaN(system_output)){
document.getElementById('system_output').innerHTML="Invalid Input";
}else{
document.getElementById('system_output').innerHTML=system_output + " kWh";
}
var fit_estimate = (system_output*0.1544);
fit_estimate = fit_estimate.toFixed(2);
if(isNaN(fit_estimate)){
document.getElementById('fit_estimate').innerHTML="Invalid Input";
}else{
document.getElementById('fit_estimate').innerHTML="£" + fit_estimate;
}
var annual_electricity_used = electricity_bill/0.18;
if(system_output>annual_electricity_used){
var left_over = system_output-annual_electricity_used;
left_over = left_over.toFixed(2);
}else{
var left_over = 0;
}
var export_fit = left_over*0.045;
export_fit = export_fit.toFixed(2);
if(isNaN(export_fit)){
document.getElementById('export_fit').innerHTML="Invalid Input";
}else{
document.getElementById('export_fit').innerHTML="£" + export_fit;
}
if(left_over>0){
var savings = annual_electricity_used*0.18;
savings = savings.toFixed(2);
}else if(left_over<=0){
var savings = system_output*0.18;
savings = savings.toFixed(2);
}
if(isNaN(savings)){
document.getElementById('savings').innerHTML="Invalid Input";
}else{
document.getElementById('savings').innerHTML="£" + savings;
}
savings = parseInt(savings);
fit_estimate = parseInt(fit_estimate);
export_fit = parseInt(export_fit);
var total_annual_yield = (savings+fit_estimate)+export_fit;
if(isNaN(total_annual_yield)){
document.getElementById('total_annual_yield').innerHTML="Invalid Input";
}else{
document.getElementById('total_annual_yield').innerHTML="£" + total_annual_yield;
}
var payback_time = system_cost/total_annual_yield;
payback_time = Math.ceil(payback_time);
if(isNaN(payback_time)){
document.getElementById('payback_time').innerHTML="Invalid Input";
}else{
document.getElementById('payback_time').innerHTML=payback_time + " Years";
}
var profit = (total_annual_yield*20)-system_cost;
if(isNaN(profit)){
document.getElementById('profit').innerHTML="Invalid Input";
}else{
document.getElementById('profit').innerHTML="£" + profit;
}
if(isNaN(roof_width) || isNaN(roof_length) || isNaN(electricity_bill)){
document.getElementById('report').innerHTML='<h1>Invalid Input</h1>';
}else{
document.getElementById('report').innerHTML='<div id="container"><div class="paper"><div class="tape"></div><h1>Report:</h1><span class="report-content">With your roof size of <span id="report_roof_area">_____</span> m<sup>2</sup>, you can fit <span id="report_no_solar_panel">_____</span> solar panels for £<span id="report_system_cost">_____</span>.<br />Saving you £<span id="report_savings">____</span> each year on your bill!<br />Making £<span id="report_total_annual_yield">_____</span> each year and £<span id="report_profit">____</span> profit over 20 years.</span></div><!--end paper--></div><!--end container-->';
document.getElementById('report_roof_area').innerHTML=roof_area;
document.getElementById('report_no_solar_panel').innerHTML=no_solar_panel;
document.getElementById('report_system_cost').innerHTML=system_cost;
document.getElementById('report_savings').innerHTML=savings;
document.getElementById('report_total_annual_yield').innerHTML=total_annual_yield;
document.getElementById('report_profit').innerHTML=profit;
}
}
var subtractwidth = function(){
var roof_width = document.getElementById('roof_width').value;
roof_width = parseInt(roof_width);
var roof_width = roof_width-1;
document.getElementById('roof_width').value=roof_width;
}
var addwidth = function(){
var roof_width = document.getElementById('roof_width').value;
roof_width = parseInt(roof_width);
var roof_width = roof_width+1;
document.getElementById('roof_width').value=roof_width;
calculate();
}
var subtractlength = function(){
var roof_length = document.getElementById('roof_length').value;
roof_length = parseInt(roof_length);
var roof_length = roof_length-1;
document.getElementById('roof_length').value=roof_length;
calculate();
}
var addlength = function(){
var roof_length = document.getElementById('roof_length').value;
roof_length = parseInt(roof_length);
var roof_length = roof_length+1;
document.getElementById('roof_length').value=roof_length;
calculate();
}
var subtractbill = function(){
var electricity_bill= document.getElementById('electricity_bill').value;
electricity_bill = parseInt(electricity_bill);
var electricity_bill = electricity_bill-10;
document.getElementById('electricity_bill').value=electricity_bill;
calculate();
}
var addbill = function(){
var electricity_bill= document.getElementById('electricity_bill').value;
electricity_bill = parseInt(electricity_bill);
var electricity_bill = electricity_bill+10;
document.getElementById('electricity_bill').value=electricity_bill;
calculate();
}
document.getElementById('roof_length').value=0;
document.getElementById('roof_width').value=0;
document.getElementById('electricity_bill').value=0;
</script>
</div>
<div class="report" id="report">
<div id="container"><div class="paper"><div class="tape"></div><h1>Please Input Values</h1></div><!--end paper--></div><!--end container-->
</div>
</div>
</body>
</html>
没有wordpress，它看起来像：http://www.asifslab.com/solarpanel.html 但是当我将它添加到wordpress时，它看起来像：bit.ly/Yvn2vv 遗憾的是，jquery-ui滑块不起作用，而且风格完全混乱。 此外，html不适合内容区域（报告覆盖页脚）。 如何解决这个问题。有人可以帮忙吗？
答案 0 :(得分：0)
你的wordpress网站的CSS适用于你使用插件添加的自定义HTML代码，这就是为什么样式都搞砸了，也可能是为什么滑块不工作（我没有验证那一点）。
答案 1 :(得分：0)
使用iframe而不是使用插件。
<iframe src="http://www.asifslab.com/solarpanel.html">
并应用一些造型。 （根据您的需要调整这些。）
iframe {
width: 100%;
margin: auto;
height: 600px;
display: block;
}
澄清你的问题是什么;你有两套没有相互制作的款式。因此，Wordpress会覆盖窗口小部件上的样式。将它放在iframe中会使所有内容保持独立，因此窗口小部件不会影响博客样式，并且博客不会影响窗口小部件。和谐。
答案 2 :(得分：0)
AS gotson说，你的wordpress主题的css覆盖了自定义页面上的一些内容。您可能希望使用带前缀的唯一类而不是使用常规标记，并在修复宽度容器中创建它，该容器与您正在使用的wordpress模板相同。
#sp_Container{ //apply style }
而不是
#container{ //apply style }
另外，请确保定位该容器内的每个声明。
#sp_Container .class1{ //apply style }
#sp_Container .class2{ //apply style }
#sp_Container .class3{ //apply style }
P.S。容器需要一个位置：相对;所以你可以确保结果说明不会离它太远（如果它设置在一个位置：绝对;）。