link rel=alternate缃戠珯鏇挎崲鍔熻兘

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了link rel=alternate缃戠珯鏇挎崲鍔熻兘相关的知识，希望对你有一定的参考价值。

鏍囩锛?a href='http://www.mamicode.com/so/1/%e6%96%87%e4%bb%b6' title='鏂囦欢'>鏂囦欢   each   tom   java   import   js浠ｇ爜   get   ima   nta   

姝ゆ柟娉曞€熷姪HTML rel灞炴€х殑alternate灞炴€у€煎疄鐜般€?/strong>

<link href="reset.css" rel="stylesheet" type="text/css">
                
<link href="default.css" rel="stylesheet" type="text/css" title="榛樿">
<link href="red.css" rel="alternate stylesheet" type="text/css" title="绾㈣壊">
<link href="green.css" rel="alternate stylesheet" type="text/css" title="缁胯壊">

涓婇潰4涓?code style="margin: 0px; padding: 0px;"><link>鍏冪礌锛屽叡鍑虹幇浜?涓笉鍚屾€ц川鐨凜SS鏍峰紡鏂囦欢鍔犺浇锛?/p>

  • 娌℃湁title灞炴€э紝rel灞炴€у€间粎浠呮槸stylesheet鐨?code style="margin: 0px; padding: 0px;"><link>鏃犺濡備綍閮戒細鍔犺浇骞舵覆鏌擄紝濡俽eset.css锛?/li>
  • 鏈塼itle灞炴€э紝rel灞炴€у€间粎浠呮槸stylesheet鐨?code style="margin: 0px; padding: 0px;"><link>浣滀负榛樿鏍峰紡CSS鏂囦欢鍔犺浇骞舵覆鏌擄紝濡俤efault.css锛?/li>
  • 鏈塼itle灞炴€э紝rel灞炴€у€煎悓鏃跺寘鍚玜lternate stylesheet鐨?code style="margin: 0px; padding: 0px;"><link>浣滀负澶囬€夋牱寮廋SS鏂囦欢鍔犺浇锛岄粯璁や笉娓叉煋锛屽red.css鍜実reen.css

瀹炵幇妗堜緥锛?/strong>

css浠ｇ爜锛?/strong>

/* default.css涓?*/
.box {
    outline: 5px solid;
    outline-offset: -5px;
}
/* red.css涓?*/
.box {
    background-color: #cd0000;
    color: #fff;
}
/* gren.css涓?*/
.box {
    background-color: green;
    color: orange;
}

HTML浠ｇ爜锛?/strong>

<link href="reset.css" rel="stylesheet" type="text/css">
                 
<link href="default.css" rel="stylesheet" type="text/css" title="榛樿">
<link href="red.css" rel="alternate stylesheet" type="text/css" title="绾㈣壊">
<link href="green.css" rel="alternate stylesheet" type="text/css" title="缁胯壊">
 
<div class="box">
    <img src="../201808/book.jpg">
    <p>鑳屾櫙鑹叉槸锛熸枃瀛楅鑹叉槸锛?lt;/p>
</div>
<p>
    閫夋嫨鏍峰紡锛?
    <input id="default" type="radio" name="skin" value="default.css" checked><label for="default">榛樿</label>
    <input id="red" type="radio" name="skin" value="red.css"><label for="red">绾㈣壊</label>
    <input id="green" type="radio" name="skin" value="green.css"><label for="green">缁胯壊</label>
</p>

JS浠ｇ爜锛?/strong>

var eleLinks = document.querySelectorAll(鈥榣ink[title]鈥?;
var eleRadios = document.querySelectorAll(鈥榠nput[type="radio"]鈥?;
[].slice.call(eleRadios).forEach(function (radio) {
    radio.addEventListener(鈥榗lick鈥? function () {
        var value = this.value;
        [].slice.call(eleLinks).forEach(function (link) {
            link.disabled = true;
            if (link.getAttribute(鈥榟ref鈥? == value) {
                link.disabled = false;
            }
        });
    });
});

 

 

姝ゆ柟娉曞€熷姪HTML rel灞炴€х殑alternate灞炴€у€煎疄鐜般€?/strong>

<link href="reset.css" rel="stylesheet" type="text/css">
                
<link href="default.css" rel="stylesheet" type="text/css" title="榛樿">
<link href="red.css" rel="alternate stylesheet" type="text/css" title="绾㈣壊">
<link href="green.css" rel="alternate stylesheet" type="text/css" title="缁胯壊">

涓婇潰4涓?code style="margin: 0px; padding: 0px;"><link>鍏冪礌锛屽叡鍑虹幇浜?涓笉鍚屾€ц川鐨凜SS鏍峰紡鏂囦欢鍔犺浇锛?/p>

  • 娌℃湁title灞炴€э紝rel灞炴€у€间粎浠呮槸stylesheet鐨?code style="margin: 0px; padding: 0px;"><link>鏃犺濡備綍閮戒細鍔犺浇骞舵覆鏌擄紝濡俽eset.css锛?/li>
  • 鏈塼itle灞炴€э紝rel灞炴€у€间粎浠呮槸stylesheet鐨?code style="margin: 0px; padding: 0px;"><link>浣滀负榛樿鏍峰紡CSS鏂囦欢鍔犺浇骞舵覆鏌擄紝濡俤efault.css锛?/li>
  • 鏈塼itle灞炴€э紝rel灞炴€у€煎悓鏃跺寘鍚玜lternate stylesheet鐨?code style="margin: 0px; padding: 0px;"><link>浣滀负澶囬€夋牱寮廋SS鏂囦欢鍔犺浇锛岄粯璁や笉娓叉煋锛屽red.css鍜実reen.css

瀹炵幇妗堜緥锛?/strong>

css浠ｇ爜锛?/strong>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* default.css涓?*/
.box {
    outline: 5px solid;
    outline-offset: -5px;
}
/* red.css涓?*/
.box {
    background-color: #cd0000;
    color: #fff;
}
/* gren.css涓?*/
.box {
    background-color: green;
    color: orange;
}

HTML浠ｇ爜锛?/strong>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href="reset.css" rel="stylesheet" type="text/css">
                 
<link href="default.css" rel="stylesheet" type="text/css" title="榛樿">
<link href="red.css" rel="alternate stylesheet" type="text/css" title="绾㈣壊">
<link href="green.css" rel="alternate stylesheet" type="text/css" title="缁胯壊">
 
<div class="box">
    <img src="../201808/book.jpg">
    <p>鑳屾櫙鑹叉槸锛熸枃瀛楅鑹叉槸锛?lt;/p>
</div>
<p>
    閫夋嫨鏍峰紡锛?/code>
    <input id="default" type="radio" name="skin" value="default.css" checked><label for="default">榛樿</label>
    <input id="red" type="radio" name="skin" value="red.css"><label for="red">绾㈣壊</label>
    <input id="green" type="radio" name="skin" value="green.css"><label for="green">缁胯壊</label>
</p>

JS浠ｇ爜锛?/strong>

1
2
3
4
5
6
7
8
9
10
11
12
13
var eleLinks = document.querySelectorAll(鈥榣ink[title]鈥?/code>);
var eleRadios = document.querySelectorAll(鈥榠nput[type="radio"]鈥?/code>);
[].slice.call(eleRadios).forEach(function (radio) {
    radio.addEventListener(鈥榗lick鈥?/code>, function () {
        var value = this.value;
        [].slice.call(eleLinks).forEach(function (link) {
            link.disabled = true;
            if (link.getAttribute(鈥榟ref鈥?/code>) == value) {
                link.disabled = false;
            }
        });
    });
});

 

以上是关于link rel=alternate缃戠珯鏇挎崲鍔熻兘的主要内容，如果未能解决你的问题，请参考以下文章

妗嗘灦鍋ュ．鎬т紭鍖栵紝鐜鍙橀噺绫伙紝姝ｅ垯鏇挎崲excel

python鍑芥暟

鐢∟ginx绂佹鍥藉IP璁块棶鎴戠殑缃戠珯...

Linux绯荤粺鍩虹鐭ヨ瘑鐩綍銆佸厓鏁版嵁銆佽蒋纭摼鎺ャ€佹枃浠剁鐞嗗懡浠ゃ€乿im鏌ユ壘鏇挎崲銆乿imtab缂╄繘

web鍓嶇鐩稿叧缃戠珯

pwn 濂界殑鑱旂郴缃戠珯