HTML代码在JSFiddle中有效，但在网站上却没有？

时间：2013-07-07 00:37:11

标签： html jsfiddle

我正在为我的网站编写新的布局。我不得不承认，我不是很擅长，但我正在学习。

无论如何，它在JSFiddle http://jsfiddle.net/x5LCM/1上看起来很棒但是，在我的实际网站上，它看起来像这样：http://moonmilk.info/testing.php。

请问有人可以解决问题吗？

    <html>

<head>

<style type="style/css">

body {
background-image: url(http://img153.imageshack.us/img153/8743/6qjf.jpg);
background-repeat: repeat;
color: #FFFFFF;
font-family: Tahoma;
font-size: 11px;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-transform: none;
text-align: justify;
z-index: 1;
}

/* ------ CONTENT ------ */

#header {
background-image: url(http://img515.imageshack.us/img515/5951/krdy.png);
background-position: center;
width: 800px;
height:396px;
top: 100px;
padding-right: 50%;
padding-left: 50%;
background-repeat: no-repeat;
position: absolute;
z-index: 3;
}

#main {
background-image: url(http://img28.imageshack.us/img28/1921/tbvl.png);
background-size: 790px 1000px;
background-repeat: repeat;
background-position: center;
height: 1000px;
width: 790px;
top: 490px;
margin-left: 50%;
margin-right: 50%;
padding-left: 5px;
padding-right: 5px;
position: absolute;
z-index: 2;
}


#navigation {
height: 30px;
width: 850px;
top: 50px;
position: absolute;
margin-left: 50%;
margin-right: 50%;
z-index: 4;
}

#name {
font-family: Great Vibes;
font-size: 48pt;
color: #FFFFFF;
padding-right: 50%;
padding-left: 50%;
position: absolute;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-transform: none;
text-align: justify;
text-shadow: 1px 1px 1px #F2D889;
z-index: 5;
}

/* ------ HEADINGS ------ */

h1 {
background-color: #F2D889;
height: 20px;
width: 780px;
margin-bottom: 0px;
margin-top: 0px;
color: #220709;
font-family: Courier New;
font-size: 18px;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-transform: lowercase;
text-align: center;
margin-left: auto;
margin-right: auto;
}

h2 {
margin-top: 0px;
margin-bottom: 0px;
height: 9px;
color: #F2D889;
font-family: Silkscreen;
font-size: 6pt;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-transform: lowercase;
text-align: center;
}

h3 {
color: #F2D889;
font-family: Courier New;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-transform: lowercase;
text-align: center;
}

/* ------ TEXT FORMATIONS ------ */

b, strong    {
color: #8B0A13;
font-family: Segoe UI;
letter-spacing: 1px;
font-size: 9px;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-transform: uppercase;
}

i, em {
color: #FFFFFF;
font-family: Courier New;
font-size: 11px;
font-style: italic;
font-weight: normal;
text-decoration: none;
text-transform: lowercase;
}

u {
color: #8B0A13;
font-family: Times New Roman;
font-size: 10px;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-transform: lowercase;
border-bottom: 1px dashed #FFFFFF;
}

/* ------ FONTS ------ */

@font-face {
font-family: Silkscreen;
src: url();
}

@font-face {
font-family: Great Vibes;
src: url();
}


/* ------ LINKS & NAVIGATION ------ */

a:link, a:active, a:visited {
color: #F2D889;
font-family: Courier New;
font-size: 11px;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-transform: none;
}

a:hover {
color: #FFFFFF;
font-family: Courier New;
font-size: 11px;
font-style: italics;
font-weight: normal;
text-decoration: none;
text-transform: none;
} 

.menu, a.menu:link, a.menu:active, a.menu:visited {
color: #F2D889;
width: 145px;
background-color: #8B0A13;
font-family: Verdana, Arial, "Helvetica", sans-serif;
font-size: 9px;
font-style: normal;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
display: block; 
line-height: 14px;
text-align: left;
}

a.menu:hover {
color: #FFFFFF;
width: 145px;
background-image: url(http://img153.imageshack.us/img153/8743/6qjf.jpg);
font-family: Verdana, Arial, "Helvetica", sans-serif;
font-size: 9px;
font-style: normal;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
display: block; 
line-height: 14px;
text-align: left;
}

.number    {
color: #8B0A13;
}           


/* ------ MISC ------ */

input, textarea, select {
background-color: #F2D889;
border: 1px solid #220709;
color: #8B0A13;
font-weight: bold;
font-family: Verdana, Arial, "Helvetica", sans-serif;
font-size: 9px;
}

input:focus, textarea:focus, select:focus {
background-color: #FFFFFF;
border: 1px solid #220709;
color: #8B0A13;
}

.input {
width: 300px;
}

blockquote {    
color:#FFFFFF;
width: 400px;   
font-family: Silkscreen;
letter-spacing:-1px;
padding: 5px;   
font-size: 10px;   
text-align: justify; 
border-left: 1px dotted;
border-right: 1px dotted;
border-top: 1px dotted;
border-bottom: 1px dotted;
border-color: #F2D889;   
} 

::-webkit-scrollbar { 
height: 10px; 
width: 10px; 
}

::-webkit-scrollbar-thumb {
background: #8B0A13;
-webkit-border-radius: 5px;
height: 50px;
}

::-webkit-scrollbar-track {
background-color: inherit;
}    

ul {
list-style-type:none;
margin: 0;
padding: 0px;
}

li {
display:inline;
padding-right: 5px;
padding-left: 5px;
}

td {
text-align:center;
}

</style>

</head>

<body>

<div id="header"></div>
<div id="navigation">
<ul><li><a href="http://moonmilk.info/"><img src="http://img153.imageshack.us/img153/2222/xhce.png"></a></li>
<li><a href="http://moonmilk.info/"><img src="http://img29.imageshack.us/img29/6840/34ak.png"></a></li>
<li><a href="http://moonmilk.info/"><img src="http://img819.imageshack.us/img819/7406/9pir.png"></a></li>
<li><a href="http://moonmilk.info/"><img src="http://img585.imageshack.us/img585/2416/epgy.png"></a></li>
<li><a href="http://moonmilk.info/"><img src="http://img62.imageshack.us/img62/1461/pc4h.png"></a></li>
<li><a href="http://moonmilk.info/"><img src="http://img854.imageshack.us/img854/9633/0o85.png"></a></li>
<li><a href="http://moonmilk.info/"><img src="http://img855.imageshack.us/img855/4103/uc3a.png"></a></li></ul>
</div>

<div id="main">
<h3><center>
<table border="0" width="800px" cellpadding="0" cellspacing="3" align="center">
<tr>
<td width="19%">info</td>
<td width="19%">updates</td>
<td width="19%">disclaimer</td>
<td width="19%">cbox</td>
<td width="19%">affies</td>
</tr>
</table>
</center></h3>

<center>
<table border="0" width="800px" cellpadding="0" cellspacing="3" align="center">
<tr>
<td width="19%">
<b>Owner:</b> Karan<br>
<b>Site Name:</b> Moon Milk<br>
<b>Opened:</b> July 2013<br>
<b>Layout:</b> Version 2<br>
<b>Best Viewed:</b> Google Chrome<br>
<b>Hosted By:</b> <a href="http://000webhost.com">000webhost</a>
</td>

<td width="19%">
<div style="height:200px;width:160px;overflow:scroll;border:1px solid #F2D889;">
<center>updates</center>
</div>
</td>

<td width="19%">
Unless stated otherwise, everything on this website has been made by the owner of this website. Please do not redistribute or claim as your own. All credits can be found <a href="http://moonmilk.info/sitely/credits.php">here</a>. Should you find anything that is yours and has not been credited properly, please <a href="http://moonmilk.info/contact.php">contact me</a>.
</td>

<td width="19%">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="150" height="175" src="http://www4.cbox.ws/box/?boxid=4184102&amp;boxtag=11fnqm&amp;sec=main" marginheight="2" marginwidth="2" 

scrolling="auto" allowtransparency="yes" name="cboxmain4-4184102" style="border: 0px solid;" id="cboxmain4-4184102"></iframe></div>
<div><iframe frameborder="0" width="150" height="75" src="http://www4.cbox.ws/box/?boxid=4184102&amp;boxtag=11fnqm&amp;sec=form" marginheight="2" marginwidth="2" 

scrolling="no" allowtransparency="yes" name="cboxform4-4184102" style="border: 0px solid;border-top:0px" id="cboxform4-4184102"></iframe></div>
</div>
<!-- END CBOX -->
</td>

<td width="19%">
<a href="http://fallenhalo.org" target="_blank" class="menu"><span class="number">001</span> FallenHalo</a>
<a href="http://moonmilk.info" target="_blank" class="menu"><span class="number">002</span> INVITE ONLY</a>
<a href="http://moonmilk.info" target="_blank" class="menu"><span class="number">003</span> INVITE ONLY</a>
<div style="height:100px;width:143px;overflow:scroll;border:1px solid #F2D889;">
<a href="http://bitterwizard.urbanscandal.net/" target="_blank">Bitterwizard</a><br>
<a href="http://dirtyysinn.info/" target="_blank">DirtyySinn</a><br>
<a href="http://felicitefics.blogspot.sg/" target="_blank">Felicitefics</a><br>
<a href="http://smilingscarlet.three-words.net/" target="_blank">SmilingScarlet</a><br>
<a href="http://tessell4te.net/" target="_blank">Tessell4te</a><br>
<a href="http://xtheweeknd.ambizione.net/" target="_blank">Xtheweeknd</a><br>
<a href="http://moonmilk.info" target="_blank">apply in cbox</a><br>
<a href="http://moonmilk.info" target="_blank">apply in cbox</a><br>
<a href="http://moonmilk.info" target="_blank">apply in cbox</a><br>
<a href="http://moonmilk.info" target="_blank">apply in cbox</a><br>
<a href="http://moonmilk.info" target="_blank">apply in cbox</a><br>
<a href="http://moonmilk.info" target="_blank">apply in cbox</a>
</center>
</div>
<a href="http://moonmilk.info/sitely/affiliation.php" target="_blank">click here for my affie button</a>
</td>
</tr>
</table>
</center>

<h1>heading</h1>
<h2>heading 2</h2>
<center><b>bold</b> <i>italics</i> <u>underline</u><br>
<blockquote>hello</blockquote>
<textarea>hello</textarea></center>
<br><br>

</div>

</body>
</html>

2 个答案:

答案 0 :(得分：0)

页面未加载样式表。如果你检查任何应该有内容的东西的元素，它就不会被呈现。

答案 1 :(得分：0)

您需要将类型设置为text / css而不是style / css

从

改变

<style type="style/css">

到

<style type="style/css">

干杯！

相关问题
最新问题