網絡工程師進階篇·堆疊實例

節課我們講到了關于堆疊的原理，以及一些基本的配置模式，接下來我們就結合實際的例子好好探討一下關于堆疊的信息。

因為華為的模擬器設備并不支持堆疊的創建和使用，所以我們今天使用H3C的模擬器進行一個實驗，如果想要實驗環境的同學可以自行去H3C的官方網站或者單播我獲取模擬器的使用。

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

上方兩臺設備使用業務口進行堆疊，千萬記住，堆疊的時候中間一定要使用10G的端口，在H3C 云實驗室中使用XGE來表示，否則會無法進行業務堆疊。

1、指定一個堆疊域，默認的堆疊域為0，我們需要保證堆疊的設備都在同一個堆疊域中。

2、因為考慮到設備堆疊之后，因為用來標識不同的接口序列，避免出現兩個設備都是G0/0/1—G0/0/1,所以我們首先要指定一個堆疊編號，本次實驗環境中，將SW2的編號修改為2。

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

3、將交換機的物理端口，統一shutdown一下。

4、進入模擬的堆疊口，將左側的物理口加入進組中,注意，SW2不要寫錯了，此時是2/0/1接口了。

5、此時可以將物理口給開啟了，注意，開啟后立即去保存配置。

6、為了保證SW_1一定能成為主設備，調整優先級為最大的32。

7、最后一步，將IRF的進程在全局下激活。

8、稍等片刻，此時SW_2會自動同步SW_1的配置文件。

此時堆疊成功，SW_2對外顯示會變為一臺設備，在主設備或者從設備做的配置會瞬間同步過去，比如我在主設備創建VLAN 100，

從設備會瞬間同步。

-------------------------我是分割線-----------------------

· 此時我們會發現，堆疊已經成功，現在我們做一下鏈路聚合，使用上面模擬的一臺設備和下方的設備做鏈路聚合。

· 注意，做完之后一定要人為的手工開啟端口，否則鏈路聚合無法啟動，此時做完后查看現象。

· 兩個接口都是轉發狀態，實驗效果完成。

· 總結：堆疊的時候首先創建堆疊域，修改設備接口編號，保存，重啟，然后關閉接口，假如堆疊口中，開啟端口，配置主設備的優先級，然后保存配置，全局下開啟堆疊功能。

· 我是新盟國sir，如果想要了解更多關于網絡方向的知識，可以直接單播我。

· 走你！

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

有些時候

為了看到光明

你必須冒險闖入黑暗之中

- 2024.03.29 -

CSS定位屬性是用于控制網頁中元素位置的一種方式，它能夠讓元素在頁面上精準地落在我們想要的位置。

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

每種定位方式都有其獨特的特點和使用場景，下面將分別介紹這幾種定位屬性。

一、Static（靜態定位）

靜態定位是元素的默認定位方式，元素按照正常的文檔流進行排列。在靜態定位狀態下，不能配合top、bottom、left、right來改變元素的位置。

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

代碼示例：

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

<div>這是一個靜態定位的元素。</div>

</body>
</html>

二、Fixed（固定定位）

固定定位使元素相對于瀏覽器窗口進行定位，即使頁面滾動，元素也會保持在固定的位置。

固定定位的元素會脫離正常的文檔流。

示例代碼：

<!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{
/* 給整個頁面設置高度，出滾動條以便觀察 */
height: 5000px;
}
div{
width: 100px;
height: 100px;
background-color: blue;
/* 固定定位 */
position: fixed;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

運行結果：

移動前

移動后

比如我們經常看到的網頁右下角顯示的“返回到頂部”，就可以用固定定位來實現。

<!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 {
/* 頁面內容樣式 */
}
#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>

運行結果：

三、Relative（相對定位）

相對定位是將元素對于它在標準流中的位置進行定位，通過設置邊移屬性top、bottom、left、right，使指定元素相對于其正常位置進行偏移。如果沒有定位偏移量，對元素本身沒有任何影響。

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

代碼示例：

<!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;/*相對定位*/
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>

運行結果：

沒使用相對定位之前是這樣的：

使用相對定位后：相對于原來的位置向右偏移了100px，向上偏移50px。

雖然它的位置發生了變化，但它在標準文檔流中的原位置依然保留。

四、Absolute（絕對定位）

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

如果該元素為內聯元素，則會變成塊級元素，可直接設置其寬和高的值（讓內聯具備快特性）；
如果該元素為塊級元素，使其寬度根據內容決定。（讓塊具備內聯的特性）

<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;/*絕對定位*/
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>

將第二個設置為絕對定位后，它脫離了文檔流可以定位到頁面的任何地方，在標準文檔流中的原有位置會空出來，所以第三個會排到第一個下面。

第二個相對于它的父元素向右偏移100，向下偏移30。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

五、z-index（層級順序的改變）

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

注意：

默認值是0
數值越大層越靠上
不帶單位
沒有最大值和最小值
可以給負數

代碼示例：

<!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>

運行結果：

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

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

在實際應用中，CSS定位屬性的使用需要考慮到整體布局和用戶體驗。合理運用這些定位技巧，可以讓你的網頁不僅美觀，而且易于使用和維護。記住，好的設計總是細節和功能的完美結合。

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

言

CSS3引入了強大的動畫功能，使得開發者能夠在不依賴JavaScript的情況下創建豐富的視覺動效。本文將深入探討CSS3動畫的核心概念、主要特性以及如何通過關鍵幀動畫和過渡效果實現各類動畫效果。

1. CSS3動畫基礎知識

1.1 過渡（Transition）

過渡是CSS3中最為基礎的動畫形式之一，它定義了一個元素在兩種狀態之間變化時的速度曲線和時間間隔。

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

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

在這個例子中，當.button的background-color屬性發生變化時，將會在0.5秒內平滑過渡。

1.2 關鍵幀動畫（Keyframes）

關鍵幀動畫允許我們自定義更復雜的動畫序列，包括多個中間狀態。

/* 定義關鍵幀動畫 */
@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* 應用動畫 */
.element {
  animation: fadeInOut 2s infinite;
}

上述代碼定義了一個名為fadeInOut的關鍵幀動畫，該動畫讓元素從透明度0漸變至1再回到0，整個動畫循環持續2秒，并且無限重復。

2. 動畫屬性與值

animation-name: 指定要使用的@keyframes規則名稱。
animation-duration: 設置動畫完成一個周期所花費的時間。
animation-timing-function: 控制動畫速度曲線，如ease, linear, ease-in, ease-out等。
animation-delay: 動畫開始前等待的時間。
animation-iteration-count: 動畫播放次數，可以設置為具體數字或infinite表示無限循環。
animation-direction: 控制定向性動畫是否應該在每次迭代中反向播放，默認為normal，即每次迭代按相同的順序播放。
animation-fill-mode: 規定在動畫執行之前和之后的狀態，例如forwards可以讓動畫在結束后保持最后一個關鍵幀的樣式。

3. 高級應用及技巧

動畫同步與堆疊: 可以通過給不同的動畫屬性設置不同值來控制多個動畫的同時運行或堆疊。
CSS動畫事件監聽: 利用JavaScript的transitionend和animationend事件可以捕獲動畫結束時觸發的動作。
使用will-change屬性: 提升動畫性能，提前告知瀏覽器哪些屬性即將改變并可能需要創建層以便優化渲染。

4. 實戰案例

示例1 - 圖片淡入淡出滾動效果

.image-slide {
  opacity: 0;
  transition: opacity 0.5s;
  will-change: opacity;
  
  /* 當圖片進入可視區域時觸發動畫 */
  &.is-visible {
    opacity: 1;
  }
}

示例2 - 旋轉動畫

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

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

總結起來，CSS3動畫功能強大且靈活，通過過渡和關鍵幀動畫，我們可以輕松構建豐富多樣的網頁動態效果，提升用戶體驗并增強交互性。隨著對CSS3動畫特性的深入理解和掌握，開發者能夠更加自如地運用這些技術來創作富有創意和吸引力的Web界面。

在線咨詢

上一篇：單頁網站設計指南
下一篇：PHP中使用DOMDocument來處理HTML、XML文檔