在< p>中设置#clickhere标记的样式元素不起作用。 [英] Styling the #clickhere tag in the <p> element is not working.
本文介绍了在< p>中设置#clickhere标记的样式元素不起作用。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法移动#ClickHere超过200px
I am not able to move the #ClickHere over 200px
<html>
<head>
</head>
<body bgcolor=grey onload=zoom1()>
-----------------------------------------------------------------------------------
<p id=ClickHere>Click Here</p>
<h1> Press F11 to "Full Screen"</h1>
<style>
#ClickHere
{position: absolute;
left: 200px;
font-size: 200%;
}
------------------------------------------------------------------------------------
h1
{
position: absolute;
top:0px;
right: 20px;
}
</style>
<div id="icons" style="position:relative; top: 40px; left: 10px;">
<a href=http://www.rocketeergames.com/site/rcrplay id=RedCrudible target="GameFrame" id=RedCrucible onclick=resize100();zoom1();>
<img src=http://www.html5gamedevs.com/uploads/monthly_2016_10/250x200_RCR_Icon.jpg.5bbab715ee1cac0f137fc6ab1d292ff7.jpg width=100px height=90px> </a>
</div>
<div id="icons" style="position:relative; top:40px; left: 0px;">
<a href=http://www.nplay.com/BeGone/ target="GameFrame" id="BeGone" onclick=resize110();zoom1();>
<img src=http://www.nplay.com/images/screenshots/BeGoneLogo_Alpha.png width=100px height=97px></a>
</div>
<div id="icons" style="position:relative; top:42px; left: 0px;">
<a href=http://www.runescape.com/game-applet target="GameFrame" id="runescape" onclick=resize100();zoom1();>
<h2>RuneScape</h2></a>
</div>
<div id="icons" style="position:relative; top: 50px; left: 0px;">
<a href=http://www.cybernations.net target="GameFrame" id=CyberNations onclick=resize120();zoom1();>
<img src=http://forums.cybernations.net/uploads/monthly_2016_04/5711b1c07f9fa_CNForumsLogo.png.bef9f16bba1b069da85939151be66b88.png width=116px height=72px></a>
</div>
<div id="icons" style="position:relative; top:60px; left:2px;">
<a href=http://www.miniclip.com/games/heli-attack-2/en/ target="GameFrame" id="HelliAttack2" onclick=resize80();zoom2();>
<img src=http://allheliattackgames.com/Heli%20attack%202.jpg width=116px height=72px></a></div>
<div id="icons" style="position:relative; top:70px; left:0px;">
<a href=http://www.littlewargame.com/play/ target="GameFrame" id="LittleWarGame" onclick=resize115();zoom1();>
<img src=https://lh3.ggpht.com/3moSQ5RdwQj2yRGiFJ6Q9mVAebyD8iXiTut6B08vz7-y1c6WlMk9nXdAw5wRzT3n3g=h900 width=120px height=85px></a>
</div>
<div id="icons" style="position:relative; top:80px; left: 0px;">
<a href=http://www.drakensang.com/ target="GameFrame" id="Drakensang" onclick=resize100();zoom1();>
<img src=http://www.giga.de/wp-content/uploads/2014/12/drakensang-online-titelbild.jpeg width=118px height=75px></a>
</div>
<div id="icons" style="position:relative; top:90px; left: 0px;">
<a href=http://www.realmofthemadgod.com/ target="GameFrame" id="RealmOfTheMadGod">
<img src=http://i.imgur.com/oo7ZNVs.jpg?1 width=118px height=75px></a>
</div>
<div id="icons" style="position:absolute; top:60px; right:20px;">
<a href=http://www.agar.io target="GameFrame" id="Agario" onclick="return resize100()";>
<img src=https://lh3.googleusercontent.com/P-7CZ6UljBidkrQnoCe8I4V_p3g7-GqrnwvqLyDa25aeojHSm7NRMLoNcAfnGdk0wV8=w300 width=100px height=90px></a></div>
<div id="icons" style="position:absolute; top:155px; right:12px;">
<a href=http://play.treasurearena.com/ target="GameFrame" id="TreasurArena" onclick=resize100();zoom1();>
<img src=http://www.mxplay.net/images_new/TreasureArena.png width=115px height=85px></a>
</div>
<div id="icons" style="position:absolute; top:245.2px; right:16px;">
<a href=http://www.thewayoftheninja.org/nv2.html target="GameFrame" id="thewayoftheninja" onclick=resize100();zoom1();>
<img src=http://www.thewayoftheninja.org/images/n%2B_XBLA_15.gif width=100px height=70px></a>
</div>
<div id="icons" style="position:absolute; top:320px; right:17px;">
<a href=http://www.miniclip.com/games/fancy-pants-adventure-2/en/focus/ target="GameFrame" id="FancyPants" >
<img src=http://2.bp.blogspot.com/-GiFRJojNewE/VD2FJ-B6N6I/AAAAAAAAEOI/0iIbLnNPiW0/s1600/FancyPantsAdventureWorld3.png id=Fancy width=102px height=66px onclick=resize80();zoom13();>
</a></div>
<script>
function zoom1() {
document.getElementById("HCB_comment_box").style.transform = "scale(.5)";
}
</script>
<div id="HCB_comment_box" style="position:absolute; top:150px; right:35%;">
<a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div>
<link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/default/skin.css" />
<script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={ };} (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((window.hcb_user && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&opts=470&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
</div>
</body>
</html>
我尝试过：
What I have tried:
<html>
<head>
</head>
<body bgcolor=grey onload=zoom1()>
<p id=ClickHere>Click Here</p>
<h1> Press F11 to "Full Screen"</h1>
<style>
#ClickHere
{position: absolute;
left: 200px;
font-size: 200%;
}
h1
{
position: absolute;
top:0px;
right: 20px;
}
</style>
推荐答案
<style>
#ClickHere
{position: absolute;
left: 200px;
font-size: 200%;
}
------------------------------------------------------------------------------------
h1
{
position: absolute;
top:0px;
right: 20px;
}
</style>属于< head> .. 。< / head> 部分而不是< body> ...< / body> 。此外，html被自上而下解释，所以如果之后允许样式，它将不会向后应用。
Belongs the <head>...</head> section and not the <body>...</body>. Also, html is interpreted top down, so if style was allowed after, it would not apply backwards.
我认为HTML看起来没问题。唯一的问题我注意到#clickhere风格中有一个ascii字符，请参考图片。
p style ascii char [ ^ ]
您应该在JSFiddle中看到ascii字符。删除ascii字符后该样式有效。
没有ascii代码的p样式 [ ^ ]
p style with ascii code（Not working） [ ^ ]
我还建议遵循@Graeme_Grant建议来安排HTML相应地标记。
I think the HTML look OK. Only issue I noticed is there is a ascii character in the #clickhere style, refer to the image.
p style ascii char[^]
You should see the ascii character in JSFiddle. The style works after removing the ascii character.
p style without ascii code[^]
p style WITH ascii code (Not working)[^]
I would also suggest to follow @Graeme_Grant recommendation to arrange the HTML tag accordingly.
这篇关于在< p>中设置#clickhere标记的样式元素不起作用。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
