2021年11月29日，AdminLTE3 左側菜單

2021年11月29日，AdminLTE3 左側菜單+右側內容

來公司內部用的整合系統是PHP+Mysql, 但是想把PHP和mysql版本的升級到最新，原來老的代碼就不能使用了，所以要盡快升級代碼，考慮來考慮去，還是簡單的AdminLTE3+Bootstarp4+Jquery + Ajax + PHP后端，不考慮VUE了，感覺只是內部使用，簡單為好。。但是有很多東西需要邊做邊學了。。。項目起始日為2021年11月29日。以內場人員需求分析為主要項目開始學起, 到今天12月5號已經快一個禮拜了，遇到的問題很多，感覺還是找個地方記錄一些突破的難點，放棄在CSDN記錄了，還是頭條方便點。。

今天第一個是實現AdminLTE3 左側菜單+右側內容

HTML:

        <div class="sidebar">
          <nav class="mt-2">
            <ul
              class="nav nav-pills nav-sidebar flex-column"
              data-widget="treeview"
              role="menu"
              data-accordion="false"
            >
              <li class="nav-item has-treeview">
                <a href="#" class="nav-link">
                  <i class="nav-icon fas fa-tachometer-alt"></i>
                  <p>IE Tools <i class="right fas fa-angle-left"></i></p>
                </a>
                <ul class="nav-item nav-treeview has-treeview">
                  <li class="nav-item">
                    <a href="#" class="nav-link">
                      <i class="far fa-circle nav-icon"></i>
                      <p>
                        Inbuilding Analyse
                        <i class="right fas fa-angle-left"></i>
                      </p>
                    </a>
                    <ul class="nav nav-treeview">
                      <li class="nav-item">
                        <a
                          href="javascript：void(0)"
                          class="nav-link"
                          data="child_page/inb_basic_setup.html"
                        >
                          <i class="far fa-dot-circle nav-icon"></i>
                          <p>Basic Setup</p>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a
                          href="javascript：void(0)"
                          class="nav-link"
                          data="child_page/inb_anyalse_act.html"
                        >
                          <i class="far fa-dot-circle nav-icon"></i>
                          <p>Generate Report</p>
                        </a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
        </div>

Jquery :

秘HTML標簽中的偽元素與偽類：

它們的區別及應用場景深度解析

一、引言：揭開偽元素與偽類的神秘面紗

在Web前端開發的世界中，HTML作為網頁內容的基礎語言，其標簽元素的運用對于頁面構建至關重要。然而，HTML標簽的功能并非僅限于直觀呈現的元素本身，還存在著一種特殊的擴展手段——偽元素與偽類。它們如同HTML標簽的魔法附魔，賦予原本靜態的元素動態行為與視覺效果，極大地豐富了網頁設計的可能性。本文將深度解析偽元素與偽類的概念、區別以及在實際項目中的應用場景，輔以具體代碼示例，幫助您全面掌握這一強大工具。

二、基礎概念：偽元素與偽類的定義

1. 偽元素

**定義：** 偽元素是一種虛擬的HTML元素，它不存在于文檔樹中，但可以通過CSS樣式來創建和控制其外觀與行為。它們被用于插入額外的文本或生成新的可視化內容，通常以雙冒號`::`進行標識。

舉例：

css
p::before {
  content: "【注】";
  color: red;
}

上述代碼中，我們為`<p>`元素添加了一個`::before`偽元素，它會在每個段落開頭插入文本“【注】”，并賦予紅色字體顏色。這種技術常用于添加裝飾性元素、注釋標記等。

2. 偽類

**定義：** 偽類是一種特殊的狀態或條件，用于描述HTML元素在特定時刻或滿足某種邏輯條件時的樣式。它們通過單冒號`:`進行標識，作用于已存在于文檔樹中的真實元素上，無需改變DOM結構即可實現狀態切換。

舉例：

css
a:hover {
  color: blue;
  text-decoration: underline;
}

在這個例子中，我們為`<a>`元素定義了`:hover`偽類，當用戶鼠標懸停在鏈接上時，鏈接文字變為藍色并顯示下劃線，實現了交互式反饋。

三、核心差異：偽元素與偽類的區別

1. 存在形式

- **偽元素**：創建了實際不存在于HTML源碼中的新內容，如生成文本、圖形等。

- **偽類**：基于已有元素的不同狀態（如鼠標懸停、訪問歷史等）改變其樣式，不生成新內容。

2. 應用場景

- **偽元素**：主要用于添加裝飾性元素、生成內容提示、分隔符、引用符號等，增強內容的可讀性和美觀度。

- **偽類**：廣泛應用于交互反饋、導航菜單高亮、表單驗證狀態、列表項計數等，實現動態樣式變化。

3. 選擇器標識

- **偽元素**：使用雙冒號`::`進行標識，如`::before`、`::after`、`::first-letter`、`::first-line`等。

- **偽類**：使用單冒號`:`進行標識，如`:hover`、`:active`、`:focus`、`:visited`、`:nth-child()`等。

四、應用場景深度解析

1. 偽元素的應用

(a) 內容修飾與補充

css
blockquote::before,
blockquote::after {
  content: '"';
  font-size: 2em;
  line-height: 0.8;
  color: #999;
  vertical-align: middle;
}

blockquote::before {
  margin-right: 0.5em;
}

blockquote::after {
  margin-left: 0.5em;
}

上述代碼使用`::before`和`::after`偽元素為`<blockquote>`元素兩側添加引號，增強了內容的識別度。

(b) 清除浮動與分隔符

css
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

ul.list > li + li::before {
  content: "? ";
  color: #ccc;
}

第一個例子中，`.clearfix::after`創建一個空內容塊級元素，清除父元素內部浮動元素的影響。第二個例子則在無序列表相鄰`<li>`元素間插入點狀符號作為分隔符。

2. 偽類的應用

(a) 交互反饋

css
.nav-item:hover {
  background-color: #f5f5f5;
}

.nav-item:active {
  background-color: #e0e0e0;
}

上述代碼分別定義了`.nav-item`元素在鼠標懸停和激活（點擊）時的背景色變化，提升了導航菜單的用戶體驗。

(b) 表單驗證狀態

css
input:required::before {
  content: "*";
  color: red;
  margin-right: 0.5em;
}

input:invalid {
  border-color: red;
}

第一個規則為必填輸入框前添加紅色星號提示；第二個規則在輸入無效時改變輸入框邊框顏色，直觀反映表單驗證狀態。

css
ol li {
  counter-increment: list-item;
}

ol li::before {
  content: counter(list-item)". ";
}

ul.list > li:nth-child(odd) {
  background-color: #f9f9f9;
}

第一部分使用`counter-increment`和`::before`為有序列表自動添加序號；第二部分則為無序列表奇數項設置淺灰色背景，實現交替行效果。

五、結論：善用偽元素與偽類，提升前端設計與交互層次

偽元素與偽類作為CSS的強大武器，能讓我們在不修改HTML結構的前提下，靈活地為網頁添加豐富的視覺效果與交互反饋。理解兩者的核心差異，并熟練掌握各自的應用場景，是每位前端開發者進階之路的必備技能。希望本文對您深入理解與運用偽元素與偽類有所助益，助力您的Web項目更具表現力與用戶體驗。

例1: js原生

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>多級菜單</title>
<style type="text/css">
<!--
ul{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
li{
padding:1px; margin:0px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("li:has(ul)").click(function(e){
if(this==e.target){
if($(this).children().is(":hidden")){
//如果子項是隱藏的則顯示
$(this).css("list-style-image","url(minus.gif)")
.children().show();
}else{
//如果子項是顯示的則隱藏
$(this).css("list-style-image","url(plus.gif)")
.children().hide();
}
}
return false; //避免不必要的事件混繞
}).css("cursor","pointer").click(); //加載時觸發點擊事件

//對于沒有子項的菜單，統一設置
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});
</script>
</head>
<body>
<ul>
<li>第1章 Javascript簡介</li>
<li>第2章 Javascript基礎</li>
<li>第3章 CSS基礎
<ul>
<li>第3.1節 CSS的概念</li>
<li>第3.2節 使用CSS控制頁面
<ul>
<li>3.2.1 行內樣式</li>
<li>3.2.2 內嵌式</li>
</ul>
</li>
<li>第3.3節 CSS選擇器</li>
</ul>
</li>
<li>第4章 CSS進階
<ul>
<li>第4.1節 div標記與span標記</li>
<li>第4.2節 盒子模型</li>
<li>第4.3節 元素的定位
<ul>
<li>4.3.1 float定位</li>
<li>4.3.2 position定位</li>
<li>4.3.3 z-index空間位置</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

以上代碼也可改寫成： jquery框架編寫

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>多級菜單</title>
<style type="text/css">
<!--
ul{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
li{
padding:1px; margin:0px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("li:has(ul)").click(function(e){
if(this==e.target){
$(this).children().toggle();
$(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))
}
return false; //避免不必要的事件混繞
}).css("cursor","pointer").click(); //加載時觸發點擊事件

//對于沒有子項的菜單，統一設置
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});
</script>
</head>
<body>
<ul>
<li>第1章 Javascript簡介</li>
<li>第2章 Javascript基礎</li>
<li>第3章 CSS基礎
<ul>
<li>第3.1節 CSS的概念</li>
<li>第3.2節 使用CSS控制頁面
<ul>
<li>3.2.1 行內樣式</li>
<li>3.2.2 內嵌式</li>
</ul>
</li>
<li>第3.3節 CSS選擇器</li>
</ul>
</li>
<li>第4章 CSS進階
<ul>
<li>第4.1節 div標記與span標記</li>
<li>第4.2節 盒子模型</li>
<li>第4.3節 元素的定位
<ul>
<li>4.3.1 float定位</li>
<li>4.3.2 position定位</li>
<li>4.3.3 z-index空間位置</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

實例2：

在線咨詢

上一篇：Ionic開發（十四-2 配置文件plugin.xm
下一篇：如何找對業務G點, 體驗酸爽？PostgreSQL使

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。