私は時々、Web サイト、特に複雑に見える Web サイトを「リバース エンジニアリング」しようとするのが好きです。そうすることで、他の開発者が使用するテクニックを学ぶのに役立つと感じています。
私は最近、リーグ・オブ・レジェンドのウェブサイトを見たいと思っていました。私が最初に試みたのは、彼らがサイトのヘッド/ナビゲーション画像をどのように配置したかを確認することでした. 私はFirefoxを使用しているので、「右クリック->検査」機能を使用しました。そうこうしているうちに見つけたのが
<html>..........
<body class="not-front not-logged-in page-node node-type-lc-article no-sidebars i18n-en pvpnetbar">
<style> … </style>
<div id="lol-header" class="i18n-en" role="banner">
<div class="section clearfix">
<div id="lol-header-sitename">
<a id="site-name" class="hidden-text" alt="Home" rel="home" title="Home" href="http://na.leagueoflegends.com/"> … </a>
</div>
......</html>
CSS Url プロパティを持つ div は「lol-header」であり、その値は
url("../img/lol-header-sprite.png")
スラッシュの前に 2 つのドットがある場合は、親ディレクトリに移動することを意味します。これで、URL が「 http://na.leagueoflegends.com/learn/new_user_guide 」であるかどうかがわかります。相対 URL はhttp://na.leagueoflegends.com/img/lol-header-sprite.pngである必要があります。 ...しかし、これは機能しません。また、メイン ページにいる場合は、同じ相対 URL を持っています。
それはどうしてですか？Webコーディングについてはかなりの知識があると思っていましたが、ちょっと迷っています:-\