2021年11月29日，AdminLTE3 左側(cè)菜單

2021年11月29日，AdminLTE3 左側(cè)菜單+右側(cè)內(nèi)容

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

今天第一個(gè)是實(shí)現(xiàn)AdminLTE3 左側(cè)菜單+右側(cè)內(nèi)容

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標(biāo)簽中的偽元素與偽類：

它們的區(qū)別及應(yīng)用場(chǎng)景深度解析

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

在Web前端開發(fā)的世界中，HTML作為網(wǎng)頁(yè)內(nèi)容的基礎(chǔ)語(yǔ)言，其標(biāo)簽元素的運(yùn)用對(duì)于頁(yè)面構(gòu)建至關(guān)重要。然而，HTML標(biāo)簽的功能并非僅限于直觀呈現(xiàn)的元素本身，還存在著一種特殊的擴(kuò)展手段——偽元素與偽類。它們?nèi)缤琀TML標(biāo)簽的魔法附魔，賦予原本靜態(tài)的元素動(dòng)態(tài)行為與視覺效果，極大地豐富了網(wǎng)頁(yè)設(shè)計(jì)的可能性。本文將深度解析偽元素與偽類的概念、區(qū)別以及在實(shí)際項(xiàng)目中的應(yīng)用場(chǎng)景，輔以具體代碼示例，幫助您全面掌握這一強(qiáng)大工具。

二、基礎(chǔ)概念：偽元素與偽類的定義

1. 偽元素

**定義：** 偽元素是一種虛擬的HTML元素，它不存在于文檔樹中，但可以通過CSS樣式來(lái)創(chuàng)建和控制其外觀與行為。它們被用于插入額外的文本或生成新的可視化內(nèi)容，通常以雙冒號(hào)`::`進(jìn)行標(biāo)識(shí)。

舉例：

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

上述代碼中，我們?yōu)閌<p>`元素添加了一個(gè)`::before`偽元素，它會(huì)在每個(gè)段落開頭插入文本“【注】”，并賦予紅色字體顏色。這種技術(shù)常用于添加裝飾性元素、注釋標(biāo)記等。

2. 偽類

**定義：** 偽類是一種特殊的狀態(tài)或條件，用于描述HTML元素在特定時(shí)刻或滿足某種邏輯條件時(shí)的樣式。它們通過單冒號(hào)`:`進(jìn)行標(biāo)識(shí)，作用于已存在于文檔樹中的真實(shí)元素上，無(wú)需改變DOM結(jié)構(gòu)即可實(shí)現(xiàn)狀態(tài)切換。

舉例：

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

在這個(gè)例子中，我們?yōu)閌<a>`元素定義了`:hover`偽類，當(dāng)用戶鼠標(biāo)懸停在鏈接上時(shí)，鏈接文字變?yōu)樗{(lán)色并顯示下劃線，實(shí)現(xiàn)了交互式反饋。

三、核心差異：偽元素與偽類的區(qū)別

1. 存在形式

- **偽元素**：創(chuàng)建了實(shí)際不存在于HTML源碼中的新內(nèi)容，如生成文本、圖形等。

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

2. 應(yīng)用場(chǎng)景

- **偽元素**：主要用于添加裝飾性元素、生成內(nèi)容提示、分隔符、引用符號(hào)等，增強(qiáng)內(nèi)容的可讀性和美觀度。

- **偽類**：廣泛應(yīng)用于交互反饋、導(dǎo)航菜單高亮、表單驗(yàn)證狀態(tài)、列表項(xiàng)計(jì)數(shù)等，實(shí)現(xiàn)動(dòng)態(tài)樣式變化。

3. 選擇器標(biāo)識(shí)

- **偽元素**：使用雙冒號(hào)`::`進(jìn)行標(biāo)識(shí)，如`::before`、`::after`、`::first-letter`、`::first-line`等。

- **偽類**：使用單冒號(hào)`:`進(jìn)行標(biāo)識(shí)，如`:hover`、`:active`、`:focus`、`:visited`、`:nth-child()`等。

四、應(yīng)用場(chǎng)景深度解析

1. 偽元素的應(yīng)用

(a) 內(nèi)容修飾與補(bǔ)充

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>`元素兩側(cè)添加引號(hào)，增強(qiáng)了內(nèi)容的識(shí)別度。

(b) 清除浮動(dòng)與分隔符

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

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

第一個(gè)例子中，`.clearfix::after`創(chuàng)建一個(gè)空內(nèi)容塊級(jí)元素，清除父元素內(nèi)部浮動(dòng)元素的影響。第二個(gè)例子則在無(wú)序列表相鄰`<li>`元素間插入點(diǎn)狀符號(hào)作為分隔符。

2. 偽類的應(yīng)用

(a) 交互反饋

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

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

上述代碼分別定義了`.nav-item`元素在鼠標(biāo)懸停和激活（點(diǎn)擊）時(shí)的背景色變化，提升了導(dǎo)航菜單的用戶體驗(yàn)。

(b) 表單驗(yàn)證狀態(tài)

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

input:invalid {
  border-color: red;
}

第一個(gè)規(guī)則為必填輸入框前添加紅色星號(hào)提示；第二個(gè)規(guī)則在輸入無(wú)效時(shí)改變輸入框邊框顏色，直觀反映表單驗(yàn)證狀態(tài)。

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`為有序列表自動(dòng)添加序號(hào)；第二部分則為無(wú)序列表奇數(shù)項(xiàng)設(shè)置淺灰色背景，實(shí)現(xiàn)交替行效果。

五、結(jié)論：善用偽元素與偽類，提升前端設(shè)計(jì)與交互層次

偽元素與偽類作為CSS的強(qiáng)大武器，能讓我們?cè)诓恍薷腍TML結(jié)構(gòu)的前提下，靈活地為網(wǎng)頁(yè)添加豐富的視覺效果與交互反饋。理解兩者的核心差異，并熟練掌握各自的應(yīng)用場(chǎng)景，是每位前端開發(fā)者進(jìn)階之路的必備技能。希望本文對(duì)您深入理解與運(yùn)用偽元素與偽類有所助益，助力您的Web項(xiàng)目更具表現(xiàn)力與用戶體驗(yàn)。

例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>多級(jí)菜單</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")){
//如果子項(xiàng)是隱藏的則顯示
$(this).css("list-style-image","url(minus.gif)")
.children().show();
}else{
//如果子項(xiàng)是顯示的則隱藏
$(this).css("list-style-image","url(plus.gif)")
.children().hide();
}
}
return false; //避免不必要的事件混繞
}).css("cursor","pointer").click(); //加載時(shí)觸發(fā)點(diǎn)擊事件

//對(duì)于沒有子項(xiàng)的菜單，統(tǒng)一設(shè)置
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});
</script>
</head>
<body>
<ul>
<li>第1章 Javascript簡(jiǎn)介</li>
<li>第2章 Javascript基礎(chǔ)</li>
<li>第3章 CSS基礎(chǔ)
<ul>
<li>第3.1節(jié) CSS的概念</li>
<li>第3.2節(jié) 使用CSS控制頁(yè)面
<ul>
<li>3.2.1 行內(nèi)樣式</li>
<li>3.2.2 內(nèi)嵌式</li>
</ul>
</li>
<li>第3.3節(jié) CSS選擇器</li>
</ul>
</li>
<li>第4章 CSS進(jìn)階
<ul>
<li>第4.1節(jié) div標(biāo)記與span標(biāo)記</li>
<li>第4.2節(jié) 盒子模型</li>
<li>第4.3節(jié) 元素的定位
<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>多級(jí)菜單</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(); //加載時(shí)觸發(fā)點(diǎn)擊事件

//對(duì)于沒有子項(xiàng)的菜單，統(tǒng)一設(shè)置
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});
</script>
</head>
<body>
<ul>
<li>第1章 Javascript簡(jiǎn)介</li>
<li>第2章 Javascript基礎(chǔ)</li>
<li>第3章 CSS基礎(chǔ)
<ul>
<li>第3.1節(jié) CSS的概念</li>
<li>第3.2節(jié) 使用CSS控制頁(yè)面
<ul>
<li>3.2.1 行內(nèi)樣式</li>
<li>3.2.2 內(nèi)嵌式</li>
</ul>
</li>
<li>第3.3節(jié) CSS選擇器</li>
</ul>
</li>
<li>第4章 CSS進(jìn)階
<ul>
<li>第4.1節(jié) div標(biāo)記與span標(biāo)記</li>
<li>第4.2節(jié) 盒子模型</li>
<li>第4.3節(jié) 元素的定位
<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>

實(shí)例2：

在線咨詢

上一篇：Ionic開發(fā)（十四-2 配置文件plugin.xm
下一篇：如何找對(duì)業(yè)務(wù)G點(diǎn), 體驗(yàn)酸爽？PostgreSQL使

您的項(xiàng)目需求

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