css學習

第一個css程序

項目結構：

html文件

    <meta charset="UTF-8">
    <title>Title</title>
  <!--<style>   可以編寫css的代碼
  語法：
      選擇器{
          聲明1;
          聲明2;
          聲明3;
          .....
      }
   link ：  引入css文件
         相當於：
            <style>
                h1{
                    color: red;
                  }
    </style>
  -->
    <link rel="stylesheet" href="css/style.css">


  <h1>我是標題</h1>

css文件：

  h1{
    color: red;
}

CSS的優勢：

1. 內容和表現分離
2. 網頁結構表現統一，可以實現復用
3. 樣式十分豐富
4. 建議使用獨立於html的css文件
5. 利於SEO，容易被搜索引擎收錄

css的三種導入方式

html文件：

    <meta charset="UTF-8">
    <title>Title</title>
    <!--內部樣式-->
    <style>
        h1{
            color: green;
        }
    </style>
    <!--外部樣式-->
    <link rel="stylesheet" href="css/style.css">


    <!--優先級： 就近原則，哪個樣式離這個元素近，就用哪個-->
    <!--行內樣式：在標簽元素中，編寫一個style屬性，編寫樣式即可-->
    <h1>我是標題</h1>

css文件：

/*外部樣式*/
h1{
    color: yellow;
}

基本選擇器

1. 標簽選擇器: 選擇一類標簽 格式(標簽{})

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*標簽選擇器，會選擇這個頁面上所有的這個標簽
        color  : 字體顏色
        background-color  : 背景顏色
        border-radius  : 邊框圓潤度
        */
        h1{
            color: #e51010;
            background-color: aqua;
            border-radius: 20px;
        }
        /*
        font-size  : 字體大小

        */
        p{
            font-size: 30px;
        }
    </style>


    <h1>學java</h1>
    <h1>學java</h1>
    <p>你會發財</p>

2. 類選擇器:選擇所有class屬性一致的標簽，格式(.class的值{})

    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*類選擇器的格式  .class的值{}
        好處，可以讓多個標簽歸類，屬於同一個class，設置相同的屬性，可以復用
        */
        .c1{
            color: blue;
        }
        .c2{
            color: aqua;
        }
    </style>


  <h1 class="c1">標題1</h1>
  <h1 class="c2">標題1</h1>
  <h1 class="c1">標題1</h1>

  <p class="c1">p標簽</p>

3. id選擇器:全局唯一，格式(#id的值{})

    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id選擇器格式  #id的值{}
        id的值必須保證全局唯一
        不遵循就近原則，固定的
        id選擇器 > 類選擇器 > 標簽選擇器
        */
        #i1{
            color: #e51010;
        }
        .c1{
            color: aqua;
        }
        h1{
            color: green;
        }
    </style>


    <h1 id="i1">標題標簽</h1>
    <h1 class="c1">標題標簽</h1>
    <h1>標題標簽</h1>

層次選擇器

    <meta charset="UTF-8">
    <title>層次選擇器</title>

    <style>
        /*p{
            background-color: green;
        }*/
        /*后代選擇器 某一個元素的后面所有元素*/
        /*body p{
            background: #e51010;
        }*/
        /*子選擇器  只有后面的所有同級元素有效*/
        body>p{
            background: aqua;
        }
        /*兄弟選擇器  選擇某個元素后和它同一級的元素,只對下面的元素有效並且只有一個*/
        /*.active + p{
            background: green;
        }*/
        /*通用選擇器  當前選中元素的向下的所有同級元素*/
        /*.active~p{
            background: blue;
        }*/
    </style>


    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>

結構偽類選擇器

    <meta charset="UTF-8">
    <title>層次選擇器</title>

    <style>
        /*選擇ul下面的第一個li元素*/
        ul li:first-child{
            background: #e51010;
        }
        /*選擇ul下面的最后一個li元素*/
        ul li:last-child{
            background: blue;
        }
        /*選擇p1 ： 定位到父元素，選擇當前的第一個元素
        p:nth-child(1)  ： 選中p元素的父元素，選擇父級元素的第一個,並且是當前元素才會生效
        */
        p:nth-child(1){
            background: aqua;
        }
        /*選中父類元素里面第二個類型為p的元素*/
        p:nth-of-type(2){
            background: green;
        }
    </style>


    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

屬性選擇器

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            text-align: center;
            border-radius: 10px;
            background-color: aqua;
            color: blue;
            text-decoration: none;
            margin-right: 10px;
            font: bold 20px/50px Arial;
        }
        /*選中a標簽里面帶有id屬性的元素   語法 ： a[屬性名或者屬性名=屬性值]{}
        這里面的 = 表示絕對等於
        *=  包含這個元素
        ^=  表示以什么開頭
        $=  表示以什么結尾
        */
        /*a[id]{
            background-color: yellow;
        }*/
       /* a[id=first]{
            background-color: #e51010;
        }*/
        /*選中class中含有links的元素*/
        /*a[class*="links"]{
            background-color: yellow;
        }*/
        /*選中href中以http開頭的元素*/
        /*a[href^=http]{
            background-color: yellow;
        }*/
        /*選中href中以pdf結尾的元素*/
        a[href$=pdf]{
            background-color: yellow;
        }
    </style>


<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="https:" class="links item first" target="_blank" title="test">2</a>
    <a href="image/123.html" class="links item">3</a>
    <a href="image/123.png" class="links item">4</a>
    <a href="image/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="abc/a.pdf" class="links item">7</a>
    <a href="/ad.pdf" class="links item">8</a>
    <a href="abd.doc" class="links item">9</a>
    <a href="djw.doc" class="links item last">10</a>
</p>

效果如下圖:

字體樣式

    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    font-family  : 表示字體
    font-size  : 表示字體大小
    font-weight  : 表示字體形狀，粗體，斜體等
    color  : 表示字體顏色
    -->
    <style>
        body{
            font-family: 楷體;
            color: #e51010;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>


    <h1>原神</h1>
    <p class="p1">
    《原神》是由上海米哈游制作發行的一款開放世界冒險游戲，於2017年1月底立項 [29]  ，原初測試於2019年6月21日開啟 [1]  ，再臨測試於2020年3月19日開啟 [2]  ，啟程測試於2020年6月11日開啟 [3]  ，PC版技術性開放測試於9月15日開啟，公測於2020年9月28日開啟 [4]  。在數據方面，同在官方服務器的情況下，iOS、PC、Android平台之間的賬號數據互通，玩家可以在同一賬號下切換設備。
    </p>
    <p>
    游戲發生在一個被稱作“提瓦特”的幻想世界，在這里，被神選中的人將被授予“神之眼”，導引元素之力。玩家將扮演一位名為“旅行者”的神秘角色，在自由的旅行中邂逅性格各異、能力獨特的同伴們，和他們一起擊敗強敵，找回失散的親人——同時，逐步發掘“原神”的真相 [5]  。
    </p>

文本樣式

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        color :字體顏色，后跟參數可以為：
                                單詞
                                RGB  參數為0~255，0~255，0~255
                                RGBA 參數為0~255，0~255，0~255，0~1 最后一個參數表示透明度
        text-align :排版 后跟參數有:
                                center 居中
                                right 靠右
                                left 靠左
        */
        h1{
            color: rgba(0,255,0,0.2);
            text-align: center;
        }
        /*text-indent: 2em;  段落首行縮進，縮進兩個字符 或者也可以為px，即縮進兩個像素*/
        .p1{
            text-indent: 2em;
        }
        /*line-height  行高，如果行高和塊的高度一致，就可以上下居中*/
        .p2{
            background-color: yellow;
            height: 300px;
            line-height: 150px;
        }
        /*下划線*/
        .l1{
            text-decoration: underline;
        }
        /*中划線*/
        .l2{
           text-decoration: line-through;
        }
        /*上划線*/
        .l3{
            text-decoration: overline;
        }
        /*超鏈接去除下划線*/
        a{
            text-decoration: none;
        }
        /*
        水平對其，，需要參照物，a,b
        */
        img,span{
            vertical-align: middle;
        }
    </style>


    <a href="">123</a>
    <p class="l1">123122</p>
    <p class="l2">123122</p>
    <p class="l3">123122</p>
    <h1>原神</h1>
    <p class="p1">
        《原神》是由上海米哈游制作發行的一款開放世界冒險游戲，於2017年1月底立項 [29]  ，原初測試於2019年6月21日開啟 [1]  ，再臨測試於2020年3月19日開啟 [2]  ，啟程測試於2020年6月11日開啟 [3]  ，PC版技術性開放測試於9月15日開啟，公測於2020年9月28日開啟 [4]  。在數據方面，同在官方服務器的情況下，iOS、PC、Android平台之間的賬號數據互通，玩家可以在同一賬號下切換設備。
    </p>
    <p class="p2">
        游戲發生在一個被稱作“提瓦特”的幻想世界，在這里，被神選中的人將被授予“神之眼”，導引元素之力。玩家將扮演一位名為“旅行者”的神秘角色，在自由的旅行中邂逅性格各異、能力獨特的同伴們，和他們一起擊敗強敵，找回失散的親人——同時，逐步發掘“原神”的真相 [5]  。
    </p>

    <img src="images/2.png" alt="">
    <span>cececececececececece</span>

超鏈接偽類

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默認顏以及去除下划線*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠標懸停到上面的狀態*/
        a:hover{
            color: blue;
        }
        /*鼠標按住未釋放的狀態*/
        a:active{
            color: #e51010;
        }
        /*text-shadow 陰影效果  參數依次為：陰影顏色  水平位移  垂直位移  陰影半徑*/
        #price{
            text-shadow: #00e5e1 10px 0px 2px;
        }
    </style>


<a href="#">
    <img src="images/2.png" alt="">
</a>
<p>
    <a href="#">碼出高效：Java開發手冊.pdf</a>
</p>
<p>
    <a href="#">作者：孤盡老師</a>
</p>
<p id="price">
    ￥99
</p>

列表

html文件

    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">


<div id="nav">
    <h2 class="title">全部商品分類</h2>
    <ul>
        <li>
            <a href="#">圖書</a>
            <a href="#">音像</a>
            <a href="#">數字商品</a>
        </li>
        <li>
            <a href="#">家用電器</a>
            <a href="#">手機</a>
            <a href="#">數碼</a>
        </li>
        <li>
            <a href="#">電腦</a>
            <a href="#">辦公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家裝</a>
            <a href="#">廚具</a>
        </li>
        <li>
            <a href="#">服飾鞋帽</a>
            <a href="#">個性化妝</a>
        </li>
        <li>
            <a href="#">禮品箱包</a>
            <a href="#">鍾表</a>
            <a href="#">珠寶</a>
        </li>
        <li>
            <a href="#">食品飲料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票務</a>
        </li>
    </ul>
</div>

css文件

#nav{
    width: 255px;
    background:#828a91;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 35px;
    /*  顏色  圖片 圖片位置 平鋪方式*/
    background: red url("../images/2.png") 230px 10px no-repeat;
}
/*
列表前面默認實心圓點
list-style ：
            none  去掉圓點
            circle  空心圓
            decimal  數字
            square  實心正方形
*/
ul li{
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/2.png");
    background-repeat: no-repeat;
    background-position: 188px 5px;
}

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

背景

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*border 設置邊框  參數為  邊框的寬度 邊框的樣式（solid 實線） 邊框的顏色*/
        div{
            width: 1080px;
            height: 720px;
            border-radius: 20px;
            border: 20px solid red;
            background-image: url("images/2.png");
            /*默認是全部平鋪的*/
        }
        .div1{
            /*水平平鋪*/
            background-repeat: repeat-x;
        }
        .div2{
            /*垂直平鋪*/
            background-repeat: repeat-y;
        }
        .div3{
            /*不平鋪*/
            background-repeat: no-repeat;
        }
    </style>


    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>

盒子模型

1. 邊框

    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      /*body 總有一個默認的外邊距 margin:*px  一般會初始化為0*/
      margin: 0px;
    }
    h2{
      font-size: 16px;
      background-color: #aee3bf;
      line-height: 30px;
      color: white;
    }
    /*border : 粗細 樣式 顏色*/
    #box{
      width: 300px;
      border: 1px solid red;
    }
    form{
      background-color: #aee3bf;
    }
    /*選擇父類元素里面第一個為div的元素里面的input標簽*/
    div:nth-of-type(1)>input{
      border: 3px solid black;
    }
    /*選擇父類元素里面第二個為div的元素里面的input標簽*/
    div:nth-of-type(2)>input{
      border: 2px dashed aqua;
    }
    /*選擇父類元素里面第三個為div的元素里面的input標簽*/
    div:nth-of-type(3)>input{
      border: 1px dashed black;
    }
  </style>


<div id="box">
  <h2>會員登錄</h2>
  <form action="#" method="get">
    <div>
      <span>用戶名：</span>
      <input type="text">
    </div>
    <div>
      <span>密碼：</span>
      <input type="password">
    </div>
    <div>
      <span>郵箱：</span>
      <input type="text">
    </div>
  </form>
</div>

2.內外邊距

    <meta charset="UTF-8">
    <title>Title</title>
    <!--外邊距的妙用  居中元素
        margin:0 auto;
    -->
    <style>
        body{
            /*body 總有一個默認的外邊框 margin:8px*/
            margin: 0px;
        }
        /*外邊距
        margin: 0; 代表上下左右都為零
        margin: 0 1; 代表上下為0 左右為1
        margin: 0 1 2 3; 代表上為0  右為1 下為2 左為3  順時針旋轉
        */
        h2{
            font-size: 16px;
            background-color: #aee3bf;
            line-height: 30px;
            color: white;
            margin: 1px 2px 3px 4px;
        }
        /*border : 粗細 樣式 顏色*/
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        form{
            background-color: #aee3bf;
        }
        /*選擇父類元素里面第一個為div的元素里面的input標簽
        padding  內邊距 與外邊距用法一致
        */
        div:nth-of-type(1)>input{
            border: 3px solid black;
            padding: 10px;
        }
        /*選擇父類元素里面第二個為div的元素里面的input標簽*/
        div:nth-of-type(2)>input{
            border: 2px dashed aqua;
        }
        /*選擇父類元素里面第三個為div的元素里面的input標簽*/
        div:nth-of-type(3)>input{
            border: 1px dashed black;
        }
    </style>


<div id="box">
    <h2>會員登錄</h2>
    <form action="#" method="get">
        <div>
            <span>用戶名：</span>
            <input type="text">
        </div>
        <div>
            <span>密碼：</span>
            <input type="password">
        </div>
        <div>
            <span>郵箱：</span>
            <input type="text">
        </div>
    </form>
</div>

圓角邊框

1.邊框圓角

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        border-radius 圓角邊距
        border-radius: 50px;  上下左右都為50px
        border-radius: 50px 20px; 左上右下為50px 右上左下為20px
        border-radius: 50px 20px 10px 5px; 從左上開始順時針旋轉分配
        */
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px 20px 10px 5px;
        }
    </style>


<div>

</div>

2.半圓

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            background-color: red;
            border-radius: 50px 50px 0 0 ;
        }
    </style>


<div></div>

盒子陰影

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*box-shadow 盒子陰影 x偏移量 y偏移量 陰影半徑 陰影顏色*/
            box-shadow: 10px 10px 100px yellow;
        }
    </style>


<div></div>

display(塊元素與行內元素的轉換)

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        div本為塊元素  使用 display: inline;后為行內元素
        span本為行內元素  使用 display: block;后為塊元素
        inline-block  既為行內元素也為塊元素
        none  使該元素消失
        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: none;
        }
    </style>


    <div>div塊元素</div>
    <span>span行內元素</span>

float(浮動)

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px solid red;
        }
        .layer1{
            border: 1px dashed blue;
            display: inline-block;
            float: left;
        }
        .layer2{
            border: 1px dashed #e17113;
            display: inline-block;
            float: left;
        }
        .layer3{
            border: 1px dashed #40c40d;
            display: inline-block;
            float: left;
        }
        .layer4{
            border: 1px dashed #86fc07;
            font-size: 16px;
            line-height: 20px;
            display: inline-block;
        }
    </style>


<div id="father">
    <div class="layer1"><img src="images/1.png" alt=""></div>
    <div class="layer2"><img src="images/2.png" alt=""></div>
    <div class="layer3"><img src="images/3.png" alt=""></div>
    <div class="layer4">
        浮動的盒子可以向左浮，也可以向右浮
    </div>

</div>

解決父級元素塌陷問題

父級元素塌陷問題即子元素浮動起來后超出父級元素闊起來的范圍
方案一：
增加父級元素高度
方案二：
在最底下增加一個空的div，然后給該div增加屬性

<div class="clear"></div>

.clear{
      clear: both;
      margin: 0;
      padding: 0;
  }

方案三：
在父級元素增加 overflow: hidden;屬性

#father{
    border: 1px solid red;
    overflow: hidden;
}

方案四：
父類添加一個偽類

#father:after{
      content: '';
      display: block;
      clear: both;
  }

具體代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px solid red;
            /*overflow: hidden;*/
        }
        #father:after{
            content: '';
            display: block;
            clear: both;
        }
        .layer1{
            border: 1px dashed blue;
            display: inline-block;
            float: left;
        }
        .layer2{
            border: 1px dashed #e17113;
            display: inline-block;
            float: left;
        }
        .layer3{
            border: 1px dashed #40c40d;
            display: inline-block;
            float: right;
        }
        /*
        clear: right;  右側不允許有浮動元素
        clear: left;  左側不允許有浮動元素
        clear: both;  兩側不允許有浮動元素
        */
        .layer4{
            border: 1px dashed #86fc07;
            font-size: 16px;
            line-height: 20px;
            display: inline-block;
            float: right;
        }
        /*.clear{*/
        /*    clear: both;*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*}*/
    </style>
</head>
<body>
<div id="father">
    <div class="layer1"><img src="images/1.png" alt=""></div>
    <div class="layer2"><img src="images/2.png" alt=""></div>
    <div class="layer3"><img src="images/3.png" alt=""></div>
    <div class="layer4">
        浮動的盒子可以向左浮，也可以向右浮
    </div>
    <!--<div class="clear"></div>-->
</div>
</body>
</html>

相對位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--
  相對定位：相對於原來的自己的位置進行偏移
  -->
  <style>
    body{
      padding: 10px;
    }
    div{
      margin: 10px;
      padding: 5px;
      font-size: 15px;
      line-height: 25px;
    }
    #father{
      border: 1px solid red;
    }
    #first{
      background-color: blue;
      border: 1px dashed blue;
      position: relative; /*相對定位*/
      top: 20px;  /*相對於自己的頂上加二十*/
      left: 20px; /*相對於自己的左邊加二十*/
    }
    #second{
      background-color: #e8a323;
      border: 1px dashed #e8a323;
    }
    #third{
      background-color: #17de32;
      border: 1px dashed #17de32;
      position: relative;
      bottom: 20px;  /*相對於自己的底部加二十*/
      right: 20px;   /*相對於自己的右部加二十*/
    }
  </style>
</head>
<body>
<div id="father">
  <div id="first">第一個盒子</div>
  <div id="second">第二個盒子</div>
  <div id="third">第三個盒子</div>
</div>
</body>
</html>

方塊擺放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 1px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            background-color: #d7cc43;
            line-height: 100px;
            text-decoration: none;
            text-align: center;
            display: block;
        }
        a:hover{
            background-color: blue;
        }

        #i2{
            position: relative;
            bottom: 100px;
            left: 200px;
        }
        #i3{
            position: relative;
            bottom: 100px;
            left: 100px;
        }
        #i4{
            position: relative;
            bottom: 100px;
        }
        #i5{
            position: relative;
            bottom: 200px;
            left: 200px;
        }

    </style>
</head>
<body>
    <div id="father">
        <a id="i1" href="#">鏈接1</a>
        <a id="i2" href="#">鏈接2</a>
        <a id="i3" href="#">鏈接3</a>
        <a id="i4" href="#">鏈接4</a>
        <a id="i5" href="#">鏈接5</a>
    </div>
</body>
</html>

絕對定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 15px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
        }
        #first{
            background-color: blue;
            border: 1px dashed blue;
        }
        /*絕對定位：
        1.沒有父級元素定位的前提下，相對於瀏覽器定位
        2.假設父級元素存在定位，經常會相對於父級元素進行偏移
        3.在父級元素范圍內移動
        相對於父級元素或者瀏覽器，進行指定位置的移動，不會繼續存在於原來的位置
        */
        #second{
            background-color: #e8a323;
            border: 1px dashed #e8a323;
            position: absolute;
            right: 30px;/*相對於瀏覽器的右邊30個像素*/
        }
        #third{
            background-color: #17de32;
            border: 1px dashed #17de32;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一個盒子</div>
    <div id="second">第二個盒子</div>
    <div id="third">第三個盒子</div>
</div>
</body>
</html>

固定位置

<!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;
            right: 100px;
            bottom: 0;
        }
        div:nth-of-type(2){/*fixed：固定定位，在瀏覽器中 定死，不再改變位置*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(3){/*fixed：固定定位，在瀏覽器中 定死，不再改變位置*/
            width: 50px;
            height: 50px;
            position: fixed;
            right: 0;
            bottom: 60px;
        }
        div a{
            display: block;
            height: 50px;
            width: 50px;
            background-color: #00e5e1;
            text-decoration: none;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <a name="top"></a>
    <div>div1</div>
    <div>div2</div>
    <!--使用錨鏈接可以實現返回頂部的功能-->
    <div>
        <a href="#top">頂部</a>
    </div>
</body>
</html>

z-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="content">
        <ul>
            <li><img src="images/1.png" alt=""></li>
            <li class="tipText">學習使人長壽</li>
            <li class="tipBg"></li>
            <li>時間：2088-02-23</li>
            <li>地點：冥王星</li>
        </ul>
    </div>
</body>
</html>

CSS文件

#content{
    width: 199px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border:1px solid red;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父級元素相對定位*/
ul{
    position: relative;
}
.tipText,.tipBg{
    width: 199px;
    height: 25px;
    position: absolute;
    top: 154px;
}
.tipBg{
    background: #000;
    opacity: 0.5; /*設置背景透明度*/
}
.tipText{
    color: #f9fcf9;

    /*z-index: 1;設置層級，使得字體可以在背景的上層顯示 最低為0 不設上限*/
}