2. 程式人生 > 其它 >LRU 快取機制

LRU 快取機制

阿新 • • 發佈：2021-06-29

1、什麼是CSS

如何學習？

  1. CSS是什麼
  2. CSS怎麼用（快速入門）
  3. CSS選擇器（重點+難點）
  4. 美化網頁（文字，陰影，超連結，列表，漸變...）
  5. 盒子模型
  6. 浮動
  7. 定位
  8. 網頁動畫（特效效果）

1.1、什麼是CSS

Cascading Style Sheet層疊級聯樣式表

CSS:表現（美化網頁）

字型，顏色，邊距，高度，寬度，背景圖片，網頁定位，網頁浮動...

1.2、發展史

CSS1.0

CSS2.0 DIV（塊）+CSS，HTML與CSS結構分離的思想，網頁變得簡單，SEO

CSS2.1 浮動，定位

CSS3.0 圓角，陰影，動畫... 瀏覽器相容性~

1.3、快速入門

style

基本入門

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--規範，<style>可以編寫css的程式碼，每一個宣告，最好使用分號結尾
    語法：
        選擇器{
            宣告1;
            宣告2;
            宣告3;
        }
    -->
    <style>
        h1{
            color: red ;
        }
    </style>
</head>
<body>

<h1>我是標題</h1>
</body>
</html>

建議使用這種規範

css的優勢

  1. 內容與表現分離
  2. 網頁結構表現統一，可以實現複用
  3. 樣式十分的豐富
  4. 建議使用獨立於html的css檔案
  5. 利於SEO(Search Engine Optimization)，容易被搜尋引擎收錄！

1.4、CSS的三種匯入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--內部樣式-->
    <style>
        h1{
            color: green;
        }
    </style>

    <!--外部樣式-->
    <link rel="stylesheet" href="css/style.css">


</head>


<body>
<!--優先順序：就近原則-->
<!--行內樣式：在標籤元素中，編寫一個style屬性，編寫樣式即可-->
<h1 style="color: red;">我是標題</h1>
</body>
</html>

拓展：外部樣式兩種寫法

  • 連結式

    html

 <!--外部樣式-->
 <link rel="stylesheet" href="css/style.css">

  • 匯入式

    @import是CSS2.1特有的

<style>
    @import url("css/style.css");
</style>

2、選擇器

作用：選擇頁面上的某一個或者某一類元素

2.1、基本選擇器

  1. 標籤選擇器：選擇一類標籤 標籤{}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*標籤選擇器的格式 標籤名{}*/
        h1{
            color: red;
            background: #3da03d;
            border-radius: 76px;
        }

        p{
            font-size: 80px;
        }

    </style>
</head>
<body>

<h1>edgar學Java</h1>
<h1>嗶哩嗶哩大學</h1>
<p>聽狂神說</p>

</body>
</html>

  2. 類 選擇器 class：選擇所有class屬性一致的標籤，跨標籤 .類名{}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    /*類選擇器的格式 .class的名稱{}
      好處，可以多個標籤歸類，是同一個class，可以複用
    */
    .edgar{
        color: red;
    }

    .ding{
        color: green;
    }
</style>
<body>

<h1 class="edgar">標題1</h1>
<h1 class="edgar">標題2</h1>
<h1 class="ding">標題3</h1>

<p class="edgar">聽狂神說</p>
</body>
</html>

  3. id 選擇器：全域性唯一！#id名{}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*id選擇器：id必須保證全域性唯一
      #id名稱{}
      優先順序：
      不遵循就近原則，固定的
      id選擇器>class選擇器>標籤選擇器
    */
    #edgar{
        color: red;
    }
</style>

<body>

<h1 id="edgar">標題1</h1>
<h1>標題2</h1>
<h1>標題3</h1>
<h1>標題4</h1>
</body>
</html>

優先順序：id>class>標籤

2.2、層次選擇器

  1. 後代選擇器：在某個元素的後面 祖爺爺 爺爺 爸爸 你
/*後代選擇器*/
body p{
    background: red;
}
  1. 子選擇器，一代 兒子
/*子選擇器*/
body>p{
    background: red;
}
  1. 相鄰兄弟選擇器
/*相鄰兄弟選擇器：只有一個，相鄰（向下）*/
.active + p{
    background: red;
}
  1. 通用選擇器
/*通用兄弟選擇器，當前選中元素的向下的所有兄弟元素*/
.active~p{
    background: red;
}

2.3、結構偽類選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*ul的第一個元素*/
        ul li:first-child{
            background: red;
        }

        /*ul的最後一個元素*/
        ul li:last-child{
            background: green;
        }
        /*選中p1：定位到父元素，選擇父級元素的第一個子元素，且子元素的型別與當前元素型別一樣（數字代表第幾個，不區分型別）
        p的父元素是body，body下的第一個子元素為p1，且p1是<p>標籤，型別一致
        */
        p:nth-child(1){
            background: antiquewhite;
        }

        /*選中父元素，下的p元素的第二個 （數字代表第幾個，區分型別）*/
        p:nth-of-type(2){
            background: aqua;
        }

       /* a:hover{
            background: #a11c1c;
        }*/
    </style>
</head>
<body>
  <!--<a href="">a1</a>-->
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
  </ul>
</body>
</html>

2.4、屬性選擇器（常用）

id和class的結合~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #2700ff;
            text-align: center;
            color: aliceblue;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Airal;
        }
        /*標籤[屬性名=屬性值]{}
          = 絕對等於
          *= 包含這個元素
          ^=以這個開頭
          $=以這個結尾
        */
        /*存在id屬性的元素 a[]{}*/
        /*a[id]{
            background: yellow;
        }*/
        /*id=first的元素*/
        /*a[id=first]{
            background: yellow;
        }*/
        /*class 中有links的元素*/
        /*a[class*="links"]{
            background: yellow;
        }*/
        /*選中href中以http開頭的元素*/
        /*a[href^="http"]{
            background: yellow;
        }*/
        /*a[href$="pdf"]{
            background: yellow;
        }*/
    </style>
</head>
<body>


<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="https://www.cnblogs.com/edgarstudy/" class="links item active">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.jpg" class="links item">4</a>
    <a href="images/123.png" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

3、美化網頁

3.1、為什麼要美化網頁

  1. 有效的傳遞頁面資訊
  2. 美化網頁，頁面漂亮，才能吸引使用者
  3. 凸顯頁面的主題
  4. 提高使用者的體驗

span標籤：重點要突出的字，使用span套起來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>

歡迎學習<span id="title1">java</span>

</body>
</html>

3.2、字型樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        font-family:字型風格
        font-size：字型大小
        font-weight：字型粗細
        color：字型顏色
    -->
    <style>
        body {
            font-family: "Arial Black",楷體;
            color: #2700ff;
        }

        h1 {
            font-size: 50px;
        }

        .p1 {
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>故事介紹</h1>
<p class="p1">
    平靜安詳的元泱境界，每隔333年，總會有一個神祕而恐怖的異常生物重生，它就是魁拔！魁拔的每一次出現，都會給元泱境界帶來巨大的災難！即便是天界的神族，也在劫難逃。在天地兩界各種力量的全力打擊下，魁拔一次次被消滅，但又總是按333年的週期重新出現。魁拔紀元1664年，天神經過精確測算後，在魁拔甦醒前一刻對其進行毀滅性打擊。但誰都沒有想到，由於一個差錯導致新一代魁拔成功地逃脫了致命一擊。很快，天界魁拔司和地界神聖聯盟均探測到了魁拔依然生還的跡象。因此，找到魁拔，徹底消滅魁拔，再一次成了各地熱血勇士的終極目標。
</p>

<p>
    在偏遠的獸國窩窩鄉，蠻大人和蠻吉每天為取得象徵成功和光榮的妖俠紋耀而刻苦修煉，卻把他們生活的村莊攪得雞犬不寧。村民們絞盡腦汁把他們趕走。一天，消滅魁拔的徵兵令突然傳到窩窩鄉，村長趁機慫恿蠻大人和蠻吉從軍參戰。然而，在這個一切都憑紋耀說話的世界，僅憑蠻大人現有的一塊冒牌紋耀，不要說參軍，就連住店的資格都沒有。受盡歧視的蠻吉和蠻大人決定，混上那艘即將啟程去消滅魁拔的巨型戰艦，直接挑戰魁拔，用熱血換取至高的榮譽。
</p>

<p>
    Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or
    bends with the remover to remove:O no! it is an ever-fixed markThat looks on tempests and is never shaken;It is the
    star to every wandering bark,Whose worth's unknown, although his highth be takenLove's not Time's fool, though rosy
    lips and cheeksWithin his bending sickle's compass come:Love alters not with his brief hours and weeks,But bears it
    out even to the edge of doom.If this be error and upon me proved,I never writ, nor no man ever loved.】
</p>
</body>
</html>

3.3、文字樣式

  1. 顏色 color rgb rgba
  2. 文字對齊方式 text-align
  3. 首行縮排 text-indent: 2em;
  4. 行高 line-height: 300px;
  5. 裝飾 text-decoration
  6. 文字圖片水平對齊 vertical-align: middle
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    顏色：
        單詞
        RGB 0~F
        RGBA A（透明度）:0~1
        text-align:排版，居中
        text-indent: 2em;   段落首行縮排
        行高和塊的高度一致，就可以上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #2700ff;
            height: 30px;
            line-height: 30px;
        }
        /*中劃線*/
        .l1{
            text-decoration: line-through;
        }
        /*上劃線*/
        .l2{
            text-decoration: overline;
        }
        /*下劃線*/
        .l3{
            text-decoration: underline;
        }
        /*超連結去下劃線*/
        a{
            text-decoration: none;
        }

        /*水平對齊~ 參照物*/
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>

<a href="">123</a>
<p class="l1">123456</p>
<p class="l2">123456</p>
<p class="l3">123456</p>

<h1>故事介紹</h1>
<p class="p1">
    平靜安詳的元泱境界，每隔333年，總會有一個神祕而恐怖的異常生物重生，它就是魁拔！魁拔的每一次出現，都會給元泱境界帶來巨大的災難！即便是天界的神族，也在劫難逃。在天地兩界各種力量的全力打擊下，魁拔一次次被消滅，但又總是按333年的週期重新出現。魁拔紀元1664年，天神經過精確測算後，在魁拔甦醒前一刻對其進行毀滅性打擊。但誰都沒有想到，由於一個差錯導致新一代魁拔成功地逃脫了致命一擊。很快，天界魁拔司和地界神聖聯盟均探測到了魁拔依然生還的跡象。因此，找到魁拔，徹底消滅魁拔，再一次成了各地熱血勇士的終極目標。
</p>

<p>
    在偏遠的獸國窩窩鄉，蠻大人和蠻吉每天為取得象徵成功和光榮的妖俠紋耀而刻苦修煉，卻把他們生活的村莊攪得雞犬不寧。村民們絞盡腦汁把他們趕走。一天，消滅魁拔的徵兵令突然傳到窩窩鄉，村長趁機慫恿蠻大人和蠻吉從軍參戰。然而，在這個一切都憑紋耀說話的世界，僅憑蠻大人現有的一塊冒牌紋耀，不要說參軍，就連住店的資格都沒有。受盡歧視的蠻吉和蠻大人決定，混上那艘即將啟程去消滅魁拔的巨型戰艦，直接挑戰魁拔，用熱血換取至高的榮譽。
</p>

<p class="p3">
    Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or
    bends with the remover to remove:O no! it is an ever-fixed markThat looks on tempests and is never shaken;It is the
    star to every wandering bark,Whose worth's unknown, although his highth be takenLove's not Time's fool, though rosy
    lips and cheeksWithin his bending sickle's compass come:Love alters not with his brief hours and weeks,But bears it
    out even to the edge of doom.If this be error and upon me proved,I never writ, nor no man ever loved
</p>

<br/>
<br/>
<p>
    <img src="image/1.jpg" alt="">
    <span>edgar學java</span>
</p>

</body>
</html>

3.4、陰影

/*text-shadow:陰影顏色，水平偏移，垂直偏移，陰影半徑*/
#price{
    text-shadow: aqua 10px 10px 2px;
}

3.5、超連結偽類

正常情況下，a a:hover

/*預設的顏色*/
a{
    text-decoration: none;
    color: #000000;
}
/*滑鼠懸浮的狀態（只需要記住 :hover）*/
a:hover{
    color: orange;
    font-size: 30px;
}
 /*滑鼠按住未釋放的狀態*/
a:active{
    color: #008000;
}

3.6、列表

/*ul{
    background: #a0a0a0;
}*/
/*
list-style:
    none:去掉原點
    circle：空心圓
    decimal：數字
    square：正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7、背景

背景顏色

背景圖片

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("image/1.jpg");
        /*預設是全部平鋪的repeat*/
    }
    .div1{
        background-repeat: repeat-x;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

練習：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分類</h2>
    <ul>
        <li><a href="#">圖書</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">數字商品</a></li>
        <li><a href="#">家用電器</a>&nbsp;&nbsp;<a href="#">手機</a>&nbsp;&nbsp;<a href="#">數碼</a></li>
        <li><a href="#">電腦</a>&nbsp;&nbsp;<a href="#">辦公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家裝</a>&nbsp;&nbsp;<a href="#">廚具</a></li>
        <li><a href="#">服飾鞋帽</a>&nbsp;&nbsp;<a href="#">個性化妝</a></li>
        <li><a href="#">禮品箱包</a>&nbsp;&nbsp;<a href="#">鐘錶</a>&nbsp;&nbsp;<a href="#">珠寶</a></li>
        <li><a href="#">食品飲料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票務</a></li>
    </ul>
</div>

</body>
</html>

style.css

#nav{
    width: 300px;
    background:#a0a0a0;
}

.title{
    font-size: 18px;
    font-weight: bold;
    line-height: 35px;
    /*顏色，圖片，位置，平鋪方式*/
    background: red url("../image/c.jpg") 270px 13px no-repeat;
}

/*ul{
    background: #a0a0a0;
}*/
/*
list-style:
    none:去掉原點
    circle：空心圓
    decimal：數字
    square：正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../image/b.jpg");
    background-repeat: no-repeat;
    background-position: 229px 6px;
}

a{
    font-size: 14px;
    text-decoration: none;
    color: #000;
}

a:hover{
    color: orange;
    text-decoration: underline;
}

效果圖：

3.8、漸變

建議使用grabient去實現漸變，自己寫的不一定好看~

<style>
    body{
        background-color: #4158D0;
        background-image: linear-gradient(97deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    }
</style>

4、盒子模型

4.1、什麼是盒子模型

margin：外邊距

border：邊框

padding：內邊距

​

盒子的計算方式：你這個元素到底多大？

margin+border+padding+內容寬度

4.2、邊框

  1. 邊框的粗細
  2. 邊框的樣式：虛線、實線
  3. 邊框的顏色
/*border 粗細 樣式 顏色*/
#box{
    width: 300px;
    border: 1px solid red;
}

4.3、內外邊距

/*內外邊距：順時針旋轉*/
input{
    margin: 1px 2px 3px 4px;
    padding: 1px 2px 3px 4px;
}

4.4、圓角邊框

<!--
圓圈：圓角一般需要大於半徑！
border-radius：順時針旋轉
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        border-radius: 100px 100px 100px 100px;
    }
</style>

4.5、盒子陰影

<!--
box-shadow：顏色，水平偏移，垂直偏移，陰影半徑
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        box-shadow: yellow 10px 10px 2px;
    }
</style>

5、浮動

5.1、標準文件流

塊級元素：獨佔一行

h1~h6 p div 列表...

行內元素：不獨佔一行

span a img strong....

行內元素 可以包含在塊級元素中，反之，則不可以~

5.2、display

<!--
block 塊元素
inline 行內元素
inline-block 是塊元素，但是可以內聯，在一行
none 不顯示
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
</style>

這個也是一種實現行內元素排列的一種方式，但是我們很多情況下使用float

5.3、float

左右浮動 float

div{
    margin: 10px;
    padding: 5px;
}

#father{
    border: 1px solid black;
}

.layer01{
    border: 1px dashed #F00 ;
    display: inline-block;
    float: right;
}

.layer02{
    border: 1px dashed #F00 ;
    display: inline-block;
    float: right;
}

.layer03{
    border: 1px dashed #F00;
    display: inline-block;
    float: right;
}

5.4、父級邊框塌陷的問題

clear

/*
clear：right右側不允許有浮動元素
clear:left左側不允許有浮動元素
clear:both兩側不允許有浮動元素
clear：none
*/

解決方案：

  1. 增加父級元素的高度
#father{
    border: 1px solid black;
    height:1000px;
}
  1. 增加一個空的div標籤，清除浮動
<div class="clear"></div>

.clear{
    margin: 0;
    padding: 0;
    clear: both;
}
  1. overflow
在父級元素增加一個 overflow:hidden
  1. 父類新增一個偽類after
#father:after{
    content: '';
    display: block;
    clear: both;
}

小結

  1. 增加父級元素的高度

    簡單，假設元素有了固定的高度，就會被限制

  2. 增加一個空的div標籤，清除浮動

    簡單，程式碼中儘量避免空div

  3. overflow

    簡單，下拉的一些場景避免使用

  4. 父類新增一個偽類：after（推薦）

    寫法稍顯複雜，但是沒有副作用，推薦使用

5.5、對比

  • display

    方向不可以控制

  • float

    浮動起來的話會脫離標準文件流，所以要解決父級邊框塌陷的問題~

6、定位

6.1、相對定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相對定位
		position: relative;
        相對於自己原來的位置進行偏移~
    -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid black;
        }
        #first{
            border: 1px dashed brown;
            background: red;
            position: relative;
            top: -20px;
        }
        #second{
            border: 1px dashed brown;
            background: red;
            position: relative;
            right: -20px;
        }
        #third{
            border: 1px dashed brown;
            background: red;
            position: relative;
            left: -20px;
        }
        #fourth{
            border: 1px dashed brown;
            background: red;
            position: relative;
            bottom: -20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一個盒子</div>
    <div id="second">第二個盒子</div>
    <div id="third">第三個盒子</div>
    <div id="fourth">第四個盒子</div>
</div>

</body>
</html>

相對定位：position:relative;

相對於原來的位置，進行指定的偏移，相對定位的話，它任然在標準文件流中，原來的位置會被保留

想向那個方向移動，數值用負數即可，好記~

top: -20px;
right: -20px;
left: -20px;
bottom: -20px;

6.2、絕對定位

定位：基於XXX定位，上下左右~

  1. 沒有父級元素的情況下，相對於瀏覽器定位
  2. 假設父級元素存在定位，我們通常會相對於父級元素進行偏~
  3. 在父級元素範圍內移動

相對於父級或瀏覽器的位置，進行指定的偏移，絕對定位的話，它不存在標準文件流中，原來的位置不會被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--絕對定位
		position: absolute;
    -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid black;
            padding: 0;
            position: relative;
        }
        #first{
            border: 1px dashed brown;
            background: red;
        }
        #second{
            border: 1px dashed brown;
            background: red;
        }
        #third{
            border: 1px dashed brown;
            background: red;
        }
        #fourth{
            border: 1px dashed brown;
            background: red;
            position: absolute;
            right:30px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一個盒子</div>
    <div id="second">第二個盒子</div>
    <div id="third">第三個盒子</div>
    <div id="fourth">第四個盒子</div>
</div>

</body>
</html>

6.3、固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;/*絕對定位：相對於瀏覽器*/
            bottom: 0;
            right: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;/*fixed，固定定位*/
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>
</body>
</html>

6.4、z-index

圖層~

z-index：預設是0，最高無限~，0在最底層

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="image/bg.jpg" alt=""></li>
        <li class="tipText">學習微服務，找狂神</li>
        <li class="tipBg"></li>
        <li>時間：2099-01-01</li>
        <li>地點：月球一號基地</li>
    </ul>
</div>
</body>
</html>

body,div,ul,li{
    margin: 0px;
    padding: 0px;
}

#content{
    width: 370px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border:1px solid black;
}
/*父級元素的相對定位*/
ul{
    position: relative;
}

.tipText,.tipBg{
    position: absolute;
    top:218px;
    width: 370px;
    height: 22px;
}

.tipText{
    color: white;
    z-index: 999;/*圖層：最低為0*/
}

.tipBg{
    background: #a0a0a0;
    /*opacity: 0.5;*//*背景透明度*/
}

相關推薦

Java實現簡單LRU快取機制的方法

一、什麼是 LRU 演算法 就是一種快取淘汰策略。 計算機的快取容量有限，如果快取滿了就要刪除一些內容，給新內容騰位置。但問題是，刪除哪些內容呢？我們肯定希望刪掉哪些沒什麼用的快取，而把有用的資料繼續留在快取

LeetCode146 LRU快取機制

運用你所掌握的資料結構，設計和實現一個 LRU (最近最少使用) 快取機制。它應該支援以下操作： 獲取資料 get 和 寫入資料 put 。

LRU快取機制

方法一：Map加雙向連結串列 class LRUCache { class Node { public int key, val; Node pre,next; public Node() {}

leetcode-----146. LRU快取機制

連結：https://leetcode-cn.com/problems/lru-cache/ 程式碼 /* * @lc app=leetcode.cn id=146 lang=cpp

leetcode刷題筆記一百四十六題 LRU快取機制

leetcode刷題筆記一百四十六題LRU快取機制 源地址：146. LRU快取機制 問題描述： 運用你所掌握的資料結構，設計和實現一個LRU (最近最少使用) 快取機制。它應該支援以下操作： 獲取資料 get 和 寫入資料 put 。

【力扣】146. LRU快取機制

運用你所掌握的資料結構，設計和實現一個 LRU (最近最少使用) 快取機制。它應該支援以下操作： 獲取資料 get 和 寫入資料 put 。

每天1題演算法題（11）- LRU快取機制

運用你所掌握的資料結構，設計和實現一個 LRU (最近最少使用) 快取機制。它應該支援以下操作： 獲取資料 get 和 寫入資料 put 。

LeetCode Notes_#146 LRU快取機制

LeetCode Notes_#146 LRU快取機制LeetCode Contents 題目解答方法1複雜度分析方法2 題目 解答

LRU快取機制的實現

LRU快取機制的實現 LRU代表最近最少使用，當用戶新增資料時應在快取中刪除最久沒被使用的資料項，具體要求可以參考leetcode

LRU 快取機制

題目： 　　 思路： 　　 1 運用LinkedHashMap 已經實現好的LRU 　　　　繼承 LinkedHashMap 重寫 removeEldestEntry 方法 當size() > capatity 返回true

[LeetCode 146.] LRU 快取機制

LeetCode 146. LRU快取機制 題目描述 運用你所掌握的資料結構，設計和實現一個 LRU (最近最少使用) 快取機制 。

leetcode LRU快取機制 中等

雙向連結串列維護 pair<key, value>，每次用到的一個 key 都把它放到連結串列頭部，容量滿時刪除連結串列尾部節點即可。

【LeetCode】146. LRU 快取機制

146. LRU 快取機制 題目描述 運用你所掌握的資料結構，設計和實現一個 LRU (最近最少使用) 快取機制 。

Leetcode 146. LRU 快取機制

前言 快取是一種提高資料讀取效能的技術，在計算機中cpu和主記憶體之間讀取資料存在差異，CPU和主記憶體之間有CPU快取，而且在記憶體和硬碟有記憶體快取。當主存容量遠大於CPU快取，或磁碟容量遠大於主存時，哪些資

LRU快取機制-力扣146題

首先選擇結構是雜湊雙鏈表，字典結構{key:node},雙鏈表結構如圖所示，（這裡添加了偽頭和偽尾節點，方便刪除新增節點）

LRU快取機制-python

問題： # 運用你所掌握的資料結構，設計和實現一個 LRU (最近最少使用) 快取機制 。 # ###實現 LRUCache 類： # ##LRUCache(int capacity) 以正整數作為容量 capacity 初始化 LRU 快取 #int get(int key) 如果關鍵字

LeetCode146-LRU快取機制

得寫五遍才能記住 題目： 運用你所掌握的資料結構，設計和實現一個LRU (最近最少使用) 快取機制 。

【每日一題】【模擬】2021年11月11日--LRU 快取機制

運用你所掌握的資料結構，設計和實現一個 LRU (最近最少使用) 快取機制 。實現 LRUCache 類：

leetcode146.LRU快取機制

leetcode146.LRU快取機制 題目 運用你所掌握的資料結構，設計和實現一個LRU (最近最少使用) 快取機制 。

146. LRU 快取機制

146. LRU 快取機制 （1）直接使用LinkedHashMap package 連結串列; import java.util.LinkedHashMap;