網(wǎng)絡(luò)工程師進(jìn)階篇·堆疊實(shí)例

節(jié)課我們講到了關(guān)于堆疊的原理，以及一些基本的配置模式，接下來(lái)我們就結(jié)合實(shí)際的例子好好探討一下關(guān)于堆疊的信息。

因?yàn)槿A為的模擬器設(shè)備并不支持堆疊的創(chuàng)建和使用，所以我們今天使用H3C的模擬器進(jìn)行一個(gè)實(shí)驗(yàn)，如果想要實(shí)驗(yàn)環(huán)境的同學(xué)可以自行去H3C的官方網(wǎng)站或者單播我獲取模擬器的使用。

本次的實(shí)驗(yàn)環(huán)境，我們使用堆疊+鏈路聚合的方式，但是注意，H3C中對(duì)于堆疊的取名不同于思科的VSS和華為的ISTACK以及CSS，他的名字叫做IRF。

上方兩臺(tái)設(shè)備使用業(yè)務(wù)口進(jìn)行堆疊，千萬(wàn)記住，堆疊的時(shí)候中間一定要使用10G的端口，在H3C 云實(shí)驗(yàn)室中使用XGE來(lái)表示，否則會(huì)無(wú)法進(jìn)行業(yè)務(wù)堆疊。

1、指定一個(gè)堆疊域，默認(rèn)的堆疊域?yàn)?，我們需要保證堆疊的設(shè)備都在同一個(gè)堆疊域中。

2、因?yàn)榭紤]到設(shè)備堆疊之后，因?yàn)橛脕?lái)標(biāo)識(shí)不同的接口序列，避免出現(xiàn)兩個(gè)設(shè)備都是G0/0/1—G0/0/1,所以我們首先要指定一個(gè)堆疊編號(hào)，本次實(shí)驗(yàn)環(huán)境中，將SW2的編號(hào)修改為2。

使用irf member 1 renumber 2 將1修改為2，注意，此時(shí)先save保存，然后reboot重啟一下，否則不生效。

3、將交換機(jī)的物理端口，統(tǒng)一shutdown一下。

4、進(jìn)入模擬的堆疊口，將左側(cè)的物理口加入進(jìn)組中,注意，SW2不要寫(xiě)錯(cuò)了，此時(shí)是2/0/1接口了。

5、此時(shí)可以將物理口給開(kāi)啟了，注意，開(kāi)啟后立即去保存配置。

6、為了保證SW_1一定能成為主設(shè)備，調(diào)整優(yōu)先級(jí)為最大的32。

7、最后一步，將IRF的進(jìn)程在全局下激活。

8、稍等片刻，此時(shí)SW_2會(huì)自動(dòng)同步SW_1的配置文件。

此時(shí)堆疊成功，SW_2對(duì)外顯示會(huì)變?yōu)橐慌_(tái)設(shè)備，在主設(shè)備或者從設(shè)備做的配置會(huì)瞬間同步過(guò)去，比如我在主設(shè)備創(chuàng)建VLAN 100，

從設(shè)備會(huì)瞬間同步。

-------------------------我是分割線(xiàn)-----------------------

· 此時(shí)我們會(huì)發(fā)現(xiàn)，堆疊已經(jīng)成功，現(xiàn)在我們做一下鏈路聚合，使用上面模擬的一臺(tái)設(shè)備和下方的設(shè)備做鏈路聚合。

· 注意，做完之后一定要人為的手工開(kāi)啟端口，否則鏈路聚合無(wú)法啟動(dòng)，此時(shí)做完后查看現(xiàn)象。

· 兩個(gè)接口都是轉(zhuǎn)發(fā)狀態(tài)，實(shí)驗(yàn)效果完成。

· 總結(jié)：堆疊的時(shí)候首先創(chuàng)建堆疊域，修改設(shè)備接口編號(hào)，保存，重啟，然后關(guān)閉接口，假如堆疊口中，開(kāi)啟端口，配置主設(shè)備的優(yōu)先級(jí)，然后保存配置，全局下開(kāi)啟堆疊功能。

· 我是新盟國(guó)sir，如果想要了解更多關(guān)于網(wǎng)絡(luò)方向的知識(shí)，可以直接單播我。

· 走你！

這里是云端源想IT，幫你輕松學(xué)IT”

嗨~ 今天的你過(guò)得還好嗎？

有些時(shí)候

為了看到光明

你必須冒險(xiǎn)闖入黑暗之中

- 2024.03.29 -

CSS定位屬性是用于控制網(wǎng)頁(yè)中元素位置的一種方式，它能夠讓元素在頁(yè)面上精準(zhǔn)地落在我們想要的位置。

在CSS中，定位（Positioning）是控制元素在頁(yè)面上如何定位和顯示的一種機(jī)制。它主要包括四種屬性：靜態(tài)定位（static）、相對(duì)定位（relative）、絕對(duì)定位（absolute）、固定定位（fixed）。

每種定位方式都有其獨(dú)特的特點(diǎn)和使用場(chǎng)景，下面將分別介紹這幾種定位屬性。

一、Static（靜態(tài)定位）

靜態(tài)定位是元素的默認(rèn)定位方式，元素按照正常的文檔流進(jìn)行排列。在靜態(tài)定位狀態(tài)下，不能配合top、bottom、left、right來(lái)改變?cè)氐奈恢谩?/p>

可以用于取消元素之前的定位設(shè)置。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<style>
.static {
background-color: lightblue;
padding: 100px;
}
</style>
</head>
<body>

<div>這是一個(gè)靜態(tài)定位的元素。</div>

</body>
</html>

二、Fixed（固定定位）

固定定位使元素相對(duì)于瀏覽器窗口進(jìn)行定位，即使頁(yè)面滾動(dòng)，元素也會(huì)保持在固定的位置。

固定定位的元素會(huì)脫離正常的文檔流。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
/* 給整個(gè)頁(yè)面設(shè)置高度，出滾動(dòng)條以便觀(guān)察 */
height: 5000px;
}
div{
width: 100px;
height: 100px;
background-color: blue;
/* 固定定位 */
position: fixed;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

運(yùn)行結(jié)果：

移動(dòng)前

移動(dòng)后

比如我們經(jīng)常看到的網(wǎng)頁(yè)右下角顯示的“返回到頂部”，就可以用固定定位來(lái)實(shí)現(xiàn)。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
position: relative;
}
.content {
/* 頁(yè)面內(nèi)容樣式 */
}
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body style="height: 5000px;">
<div>
</div>
<button id="backToTop" onclick="scrollToTop()">返回頂部</button>
<script>
function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>
</body>
</html>

運(yùn)行結(jié)果：

三、Relative（相對(duì)定位）

相對(duì)定位是將元素對(duì)于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位，通過(guò)設(shè)置邊移屬性top、bottom、left、right，使指定元素相對(duì)于其正常位置進(jìn)行偏移。如果沒(méi)有定位偏移量，對(duì)元素本身沒(méi)有任何影響。

不使元素脫離文檔流，空間會(huì)保留，不影響其他布局。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:relative;/*相對(duì)定位*/
left:100px;/*向右偏移100px*/
top:-50px;/*向上偏移50px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>

運(yùn)行結(jié)果：

沒(méi)使用相對(duì)定位之前是這樣的：

使用相對(duì)定位后：相對(duì)于原來(lái)的位置向右偏移了100px，向上偏移50px。

雖然它的位置發(fā)生了變化，但它在標(biāo)準(zhǔn)文檔流中的原位置依然保留。

四、Absolute（絕對(duì)定位）

絕對(duì)定位使元素相對(duì)于最近的非 static 定位祖先元素進(jìn)行定位。如果沒(méi)有這樣的元素，則相對(duì)于初始包含塊（initial containing block）。絕對(duì)定位的元素會(huì)脫離正常的文檔流。

如果該元素為內(nèi)聯(lián)元素，則會(huì)變成塊級(jí)元素，可直接設(shè)置其寬和高的值（讓內(nèi)聯(lián)具備快特性）；
如果該元素為塊級(jí)元素，使其寬度根據(jù)內(nèi)容決定。（讓塊具備內(nèi)聯(lián)的特性）

<style>
.wrap{
width:500px;
height:400px;
border: 2px solid red;
}
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:absolute;/*絕對(duì)定位*/
left:100px;/*向右偏移100px*/
top:30px;/*向下偏移30px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;

}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

將第二個(gè)設(shè)置為絕對(duì)定位后，它脫離了文檔流可以定位到頁(yè)面的任何地方，在標(biāo)準(zhǔn)文檔流中的原有位置會(huì)空出來(lái)，所以第三個(gè)會(huì)排到第一個(gè)下面。

第二個(gè)相對(duì)于它的父元素向右偏移100，向下偏移30。

想要快速入門(mén)前端開(kāi)發(fā)嗎？推薦一個(gè)前端開(kāi)發(fā)基礎(chǔ)課程，這個(gè)老師講的特別好，零基礎(chǔ)學(xué)習(xí)無(wú)壓力，知識(shí)點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！云端源想

五、z-index（層級(jí)順序的改變）

層疊順序決定了元素之間的堆疊順序。z-index 屬性用于設(shè)置元素的層疊順序。具有較高 z-index 值的元素會(huì)覆蓋具有較低 z-index 值的元素。

注意：

默認(rèn)值是0
數(shù)值越大層越靠上
不帶單位
沒(méi)有最大值和最小值
可以給負(fù)數(shù)

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:nth-of-type(1){
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
}
div:nth-of-type(2){
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
div:nth-of-type(3){
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>

</body>
</html>

運(yùn)行結(jié)果：

可以看到，最后一個(gè)div依然存在，但是看不見(jiàn)了，原因就是我們改變了z-index屬性值。

以上就是CSS定位屬性的介紹了，通過(guò)這些定位屬性，可以靈活地控制網(wǎng)頁(yè)中元素的位置和堆疊順序。

在實(shí)際應(yīng)用中，CSS定位屬性的使用需要考慮到整體布局和用戶(hù)體驗(yàn)。合理運(yùn)用這些定位技巧，可以讓你的網(wǎng)頁(yè)不僅美觀(guān)，而且易于使用和維護(hù)。記住，好的設(shè)計(jì)總是細(xì)節(jié)和功能的完美結(jié)合。

我們下期再見(jiàn)！

END

文案編輯|云端學(xué)長(zhǎng)

文案配圖|云端學(xué)長(zhǎng)

內(nèi)容由：云端源想分享

言

CSS3引入了強(qiáng)大的動(dòng)畫(huà)功能，使得開(kāi)發(fā)者能夠在不依賴(lài)JavaScript的情況下創(chuàng)建豐富的視覺(jué)動(dòng)效。本文將深入探討CSS3動(dòng)畫(huà)的核心概念、主要特性以及如何通過(guò)關(guān)鍵幀動(dòng)畫(huà)和過(guò)渡效果實(shí)現(xiàn)各類(lèi)動(dòng)畫(huà)效果。

1. CSS3動(dòng)畫(huà)基礎(chǔ)知識(shí)

1.1 過(guò)渡（Transition）

過(guò)渡是CSS3中最為基礎(chǔ)的動(dòng)畫(huà)形式之一，它定義了一個(gè)元素在兩種狀態(tài)之間變化時(shí)的速度曲線(xiàn)和時(shí)間間隔。

/* 基本語(yǔ)法 */
.element {
  transition: property duration timing-function delay;
}

/* 示例 */
.button {
  background-color: red;
  transition: background-color 0.5s ease-in-out;
}

在這個(gè)例子中，當(dāng).button的background-color屬性發(fā)生變化時(shí)，將會(huì)在0.5秒內(nèi)平滑過(guò)渡。

1.2 關(guān)鍵幀動(dòng)畫(huà)（Keyframes）

關(guān)鍵幀動(dòng)畫(huà)允許我們自定義更復(fù)雜的動(dòng)畫(huà)序列，包括多個(gè)中間狀態(tài)。

/* 定義關(guān)鍵幀動(dòng)畫(huà) */
@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* 應(yīng)用動(dòng)畫(huà) */
.element {
  animation: fadeInOut 2s infinite;
}

上述代碼定義了一個(gè)名為fadeInOut的關(guān)鍵幀動(dòng)畫(huà)，該動(dòng)畫(huà)讓元素從透明度0漸變至1再回到0，整個(gè)動(dòng)畫(huà)循環(huán)持續(xù)2秒，并且無(wú)限重復(fù)。

2. 動(dòng)畫(huà)屬性與值

animation-name: 指定要使用的@keyframes規(guī)則名稱(chēng)。
animation-duration: 設(shè)置動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的時(shí)間。
animation-timing-function: 控制動(dòng)畫(huà)速度曲線(xiàn)，如ease, linear, ease-in, ease-out等。
animation-delay: 動(dòng)畫(huà)開(kāi)始前等待的時(shí)間。
animation-iteration-count: 動(dòng)畫(huà)播放次數(shù)，可以設(shè)置為具體數(shù)字或infinite表示無(wú)限循環(huán)。
animation-direction: 控制定向性動(dòng)畫(huà)是否應(yīng)該在每次迭代中反向播放，默認(rèn)為normal，即每次迭代按相同的順序播放。
animation-fill-mode: 規(guī)定在動(dòng)畫(huà)執(zhí)行之前和之后的狀態(tài)，例如forwards可以讓動(dòng)畫(huà)在結(jié)束后保持最后一個(gè)關(guān)鍵幀的樣式。

3. 高級(jí)應(yīng)用及技巧

動(dòng)畫(huà)同步與堆疊: 可以通過(guò)給不同的動(dòng)畫(huà)屬性設(shè)置不同值來(lái)控制多個(gè)動(dòng)畫(huà)的同時(shí)運(yùn)行或堆疊。
CSS動(dòng)畫(huà)事件監(jiān)聽(tīng): 利用JavaScript的transitionend和animationend事件可以捕獲動(dòng)畫(huà)結(jié)束時(shí)觸發(fā)的動(dòng)作。
使用will-change屬性: 提升動(dòng)畫(huà)性能，提前告知瀏覽器哪些屬性即將改變并可能需要?jiǎng)?chuàng)建層以便優(yōu)化渲染。

4. 實(shí)戰(zhàn)案例

示例1 - 圖片淡入淡出滾動(dòng)效果

.image-slide {
  opacity: 0;
  transition: opacity 0.5s;
  will-change: opacity;
  
  /* 當(dāng)圖片進(jìn)入可視區(qū)域時(shí)觸發(fā)動(dòng)畫(huà) */
  &.is-visible {
    opacity: 1;
  }
}

示例2 - 旋轉(zhuǎn)動(dòng)畫(huà)

.rotate {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

總結(jié)起來(lái)，CSS3動(dòng)畫(huà)功能強(qiáng)大且靈活，通過(guò)過(guò)渡和關(guān)鍵幀動(dòng)畫(huà)，我們可以輕松構(gòu)建豐富多樣的網(wǎng)頁(yè)動(dòng)態(tài)效果，提升用戶(hù)體驗(yàn)并增強(qiáng)交互性。隨著對(duì)CSS3動(dòng)畫(huà)特性的深入理解和掌握，開(kāi)發(fā)者能夠更加自如地運(yùn)用這些技術(shù)來(lái)創(chuàng)作富有創(chuàng)意和吸引力的Web界面。

在線(xiàn)咨詢(xún)

上一篇：單頁(yè)網(wǎng)站設(shè)計(jì)指南
下一篇：PHP中使用DOMDocument來(lái)處理HTML、XML文檔

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

網(wǎng)絡(luò)工程師進(jìn)階篇·堆疊實(shí)例

一、Static（靜態(tài)定位）

二、Fixed（固定定位）

三、Relative（相對(duì)定位）

四、Absolute（絕對(duì)定位）

五、z-index（層級(jí)順序的改變）

言

1. CSS3動(dòng)畫(huà)基礎(chǔ)知識(shí)

1.2 關(guān)鍵幀動(dòng)畫(huà)（Keyframes）

2. 動(dòng)畫(huà)屬性與值

3. 高級(jí)應(yīng)用及技巧

4. 實(shí)戰(zhàn)案例

您的項(xiàng)目需求