gpt4 book ai didi

网站上的 CSS Url 属性?

转载 作者:行者123 更新时间:2023-11-28 09:19:13 24 4
gpt4 key购买 nike

有时我喜欢尝试对网站进行“逆向工程”,尤其是那些看起来很复杂的网站。我觉得这样做会帮助我学习其他开发人员使用的技术。

最近想看看英雄联盟网站。我尝试的第一件事是查看他们如何放置网站的头像/导航图像。我使用 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")

我知道任何时候您在正斜杠前看到两个点都表示您转到父目录。现在,我可以查看 url 是否为“http://na.leagueoflegends.com/learn/new_user_guide”,然后相对 url 应为 http://na.leagueoflegends.com/img/lol-header-sprite.png“……但这不起作用。此外,如果您在主页上,它具有相同的相对 URL。

怎么可能呢?我以为我对网络编码很了解,但我有点迷路了:-\

最佳答案

您所指的页面会像这样加载 CSS 文件:

@import url('/sites/default/files/lol_global_elements/css/lol_global_elements.css');

CSS 规则本身是:

background: transparent url(../img/lol-header-sprite.png) 50% 0px no-repeat;

../ 表示相对于加载文件的路径上升一级。因此,以第一个 URL 开头,它将以:

http://na.leagueoflegends.com/sites/default/files/lol_global_elements/

然后它添加 img/lol-header-sprite.png 给你:

http://na.leagueoflegends.com/sites/default/files/lol_global_elements/img/lol-header-sprite.png

关于网站上的 CSS Url 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17092016/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com