CSS3

HTML+CSS+JavaScript

結構+表項+交互

如何學(xué)習？

CSS是什么
CSS怎么用（快速入門(mén)）
CSS選擇器（重點(diǎn)+難點(diǎn)）
美化網(wǎng)頁(yè)（文字、陰影、超鏈接、列表、漸變...）
盒子模型
浮動(dòng)
定位
網(wǎng)頁(yè)動(dòng)畫(huà)（特效效果）

1、初識CSS

1.1、什么是CSS

Cascading Style Sheet（層疊樣式表）

CSS：表現（美化網(wǎng)頁(yè)）

字體、顏色、邊距、高度、寬度、背景圖片、網(wǎng)頁(yè)定位、網(wǎng)頁(yè)浮動(dòng)...

1.2、發(fā)展史

CSS1.0

CSS2.0 DIV（塊）+CSS，HTML與CSS結構分離，網(wǎng)頁(yè)變得簡(jiǎn)單，利于SEO

CSS2.1 浮動(dòng)和定位

CSS3.0圓角邊框、陰影、動(dòng)畫(huà).... 瀏覽器兼容性

1.3、快速入門(mén)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    規范 <style></style>內可以編寫(xiě)html代碼,每一個(gè)聲明最好以分號結尾
        語(yǔ)法：
            選擇器{
                聲明1: ;
                聲明2: ;
                聲明3: ;
            }
-->
    <style>
        h1{
            color:red;
        }
    </style>
</head>
<body>
<h1>我是標題</h1>
</body>
</html>

建議使用這種規范

CSS優(yōu)勢：

內容和表現分離
網(wǎng)頁(yè)結構表現統一，可以實(shí)現復用
樣式十分豐富
建議使用獨立于HTML的css文件
利于SEO，容易被搜索引擎收錄

1.4、css的三種導入方式

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

    <!--2.內部樣式表-->
    <style>
        h1{
            color:green;
        }
    </style>
    
    <!--3.外部樣式-->
    <link rel="stylesheet" href="css/style.css">
    
</head>
<body>

<!--優(yōu)先級：就近原則-->

<!--1.行內樣式：在標簽元素中編寫(xiě)一個(gè)style屬性，編寫(xiě)樣式即可-->
<h1 style="color: red;">我是標題</h1>

</body>
</html>

拓展：外部樣式兩種寫(xiě)法：

鏈接式：

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

導入式：

@import是CSS2.1特有的

<!--導入式-->
<style>
    @import url("style.css");
</style>

2、選擇器

作用：選擇頁(yè)面上的某一種元素或者某一類(lèi)元素

2.1、基本選擇器

2.1.1、標簽選擇器

選擇一類(lèi)標簽

語(yǔ)法：

?<標簽名></標簽名>

?標簽名{

?聲明1：；

?聲明2：；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        /*標簽選擇器會(huì )選中頁(yè)面上的所有這個(gè)標簽*/
        h1{
            color: #dcff4f;
            background: deepskyblue;
            border-radius: 14px;
        }
        p{
            font-size: 80px;
        }
    </style>
    
</head>
<body>
    
    <h1>學(xué)Java</h1>
    <h1>學(xué)Java</h1>
    <p>狂神說(shuō)</p>
    
</body>
</html>

2.1.2、類(lèi)選擇器 class

選中所有class屬性一致的標簽，可以跨標簽

語(yǔ)法：

?.類(lèi)名{

?聲明1：；

?聲明2：；

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

    <style>
        /*類(lèi)選擇器格式：.class的名稱(chēng){}
            好處：可以多個(gè)標簽歸類(lèi)，是同一個(gè)class，可以復用
        */
        .one{
            color:wheat;
        }
        .two{
            color:red;
        }
        .three{
            
        }
    </style>

</head>
<body>

    <h1 class="one">標題1</h1>
    <h1 class="two">標題2</h1>
    <h1 class="three">標題3</h1>

</body>
</html>

2.1.3、id選擇器

全局唯一

語(yǔ)法：

?#id名{

?聲明1：；

?聲明2：；

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

    <style>
        /*id選擇器格式：#id名稱(chēng){} id必須保證全局唯一
            不遵循就近原則，固定的：id選擇器>類(lèi)選擇器>標簽選擇器
        */
        #one{
            color: aquamarine;
        }
        .style1{
            color:red;
        }
        h1{
            color: #dcff4f;
        }
    </style>

</head>
<body>

    <h1 id="one" class="style1">標題1</h1>
    <h1 class="style1">標題2</h1>
    <h1 class="style1">標題3</h1>
    <h1>標題4</h1>
    <h1>標題5</h1>

</body>
</html>

優(yōu)先級：不遵循就近原則，固定的：id選擇器>類(lèi)選擇器>標簽選擇器

2.2、層次選擇器

HTML

<body>

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

</body>

2.2.1、后代選擇器

在某個(gè)元素的后面：祖爺爺爺爺爸爸我

/*后代選擇器*/
body p{
    background: red;
}

2.2.2、子選擇器

只有當前選擇的下一代

/*子選擇器*/
body > p{
    background: blueviolet;
}

2.2.3、相鄰兄弟選擇器

同輩對下不對上，只有一個(gè)

/*相鄰兄弟選擇器*/
.active + p{
    background: cadetblue;
}

2.2.4、通用選擇器

當前選中元素的向下的所有元素

/*通用兄弟選擇器*/
.active ~ p{
    background: green;
}

2.3、結構偽類(lèi)選擇器

偽類(lèi)：條件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用class和id選擇器-->
    <style>

        /*ul的第一個(gè)子元素*/
        ul li:first-child{
            background: #dcff4f;
        }

        /*ul的第最后一個(gè)子元素*/
        ul li:last-child{
            background: blueviolet;
        }

        /*選中p1:定位到父元素，選中當前的第一個(gè)元素
        選中當前元素的父級元素，選中父級元素的第n個(gè)，但第n個(gè)元素必須是是當前元素，否則選不中
        */
        p:nth-child(3){
            background: cadetblue;
        }

        /*先選中當前元素的父級元素，然后選中父級元素的第n個(gè)和當前元素同類(lèi)型的元素*/
        p:nth-of-type(3){
            background: wheat;
        }

        /*鼠標移動(dòng)到上面會(huì )發(fā)生變化*/
        a:hover{
            background: black;
        }

    </style>
</head>
<body>

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

</body>
</html>

2.4、屬性選擇器（常用）

class+id結合

屬性名
屬性名 = 屬性值（正則）
**= 絕對等于 **
*= 包含
^= 以...開(kāi)頭
$= 以...結尾

<!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: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
    /* 
        1.屬性名
        2.屬性名=屬性值（正則）
        3.= 絕對等于   *=  包含
        4.^= 以...開(kāi)頭
        5.$= 以...結尾
    */
    /*選中存在id屬性的元素  a[]{} */
        a[id]{
            background: #2be24e;
        }

    /*選中id=first*/
        a[id=first]{
            background: #ff0b2f;
        }
    /*class中有link的*/
        a[class *= "link"]{
            background: cadetblue;
        }
    /*選中href中以http開(kāi)頭的*/
        a[href^=http]{
            background: #ff0b2f;
        }

    /* 選中href中以pdf結尾的*/
        a[href$=pdf]{
            background: #2be24e;
        }
    </style>
</head>
<body>

    <p class="demo">

        <a  class="link item first" id="first">1</a>
        <a href="" class="links item active" target="_blank" title="test">2</a>
        <a href="images/123.html" class="link item">3</a>
        <a href="images/123.png" class="link item">4</a>
        <a href="images/123.jpg" class="link item">5</a>
        <a href="abc" class="link item">6</a>
        <a href="/a.pdf" class="link item">7</a>
        <a href="/abc.pdf" class="link item">8</a>
        <a href="abc.doc" class="link item">9</a>
        <a href="abcd.doc" class="link item last">10</a>

    </p>


</body>
</html>

3、美化網(wǎng)頁(yè)元素

3.1、為什么要美化網(wǎng)頁(yè)

有效的傳遞頁(yè)面信息
美化網(wǎng)頁(yè)，頁(yè)面漂亮才能吸引用戶(hù)
凸顯頁(yè)面主題
提高用戶(hù)體驗

span標簽：重點(diǎn)要突出的字，使用span套起來(lái)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>

歡迎學(xué)習<span id="title1">java</span>
</body>
</html>

3.2、字體樣式

   <!--
        font-family:    字體
        font-size:  字體大小
        font-weight:    字體粗細
        color:  字體顏色
    -->
<style>
    body{
        font-family: "Arial Black", 楷體;
    }
    h1{
        font-size: 50px;
        color: #ff0b2f;
    }
    .p1{
        font-weight: bold;
    }
</style>

<!--字體風(fēng)格-->
<style>
    p{
        font: oblique bolder 16px "楷體" ;
    }
</style>

3.3、文本樣式

顏色color: rgb/rgba/單詞;
對齊方式text-align: center;水平居中
首行縮進(jìn)text-indent: 2em;
行高height: 300px;塊高

?line-height: 300px;行高

?行高和塊高度一致，就可以實(shí)現單行文本上下居中
裝飾劃線(xiàn)text-decoration:
文本圖片水平對齊 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: center;排版 水平居中
        text-indent: 2em;段落首行縮進(jìn)
        height: 300px;
        line-height: 300px;行高和塊高度一致，就可以上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;/*文本居中*/
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blue;
            height: 300px;
            line-height: 300px;
        }
        
        /*下劃線(xiàn)*/
        .l1{
            text-decoration: underline;
        }
        
        /*中劃線(xiàn)*/
        .l2{
            text-decoration: line-through;
        }
        
        /*上劃線(xiàn)*/
        .l3{
            text-decoration: overline;
        }
        
        /*超鏈接去下劃線(xiàn)*/
        a{
            text-decoration: none;
        }
        
        /*水平對齊 參照物， a b */
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <a href="">123</a>
    <p class="l1">123123</p>
    <p class="l2">123123</p>
    <p class="l3">123123</p>
    
    <h1>《魁拔》</h1>
    <p class="p1">
        是2008年北京青青樹(shù)動(dòng)漫科技有限公司以系列動(dòng)畫(huà)電影的第一部《魁拔之十萬(wàn)火急》為基礎，重新剪輯而成的TV動(dòng)畫(huà)。
        由王川執導，田博、馬華等編劇，劉婧犖，竹內順子等配音。
    </p>
    <p class="p3">
        TV版完整保留了電影的世界觀(guān)、人物設定、故事內容和情節主線(xiàn)，但重制了片頭曲。
        《魁拔妖俠傳》是魁拔系列電影的前傳，主要講述的是有關(guān)卡拉肖克潘家族的故事，與電影關(guān)系并不大。
        目前大家所說(shuō)的魁拔通常指魁拔系列動(dòng)畫(huà)電影。
    </p>
    
    <p>
        <img src="a.png" alt="">
        <span>jdlajsdajldjalsjd</span>
    </p>

</body>
</html>

3.4、超鏈接偽類(lèi)和陰影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默認顏色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠標懸浮的狀態(tài)*/
        a:hover{
            color: orange;
            font-size: 20px;
        }
        /*鼠標按住未釋放狀態(tài)*/
        a:active{
            color: #2be24e;
        }
        /*text-shadow:陰影顏色 水平偏移 垂直偏移 陰影半徑*/
        #price{
            text-shadow: cadetblue 5px 5px 1px;
        }
        
        p:hover{
            background: blueviolet;
        }

    </style>
</head>
<body>

    <a href="#">
        <img src="images/1.jpg" alt="">
    </a>
    <p>
        <a href="#">碼出高效：Java開(kāi)發(fā)手冊</a>
    </p>
    <p>
        <a href="#">作者：孤盡老師</a>
    </p>
    <p id="price">￥99</p>

</body>
</html>

3.5、列表

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

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #ff0b2f;
}
/*
list-style:
            none;去掉圓點(diǎn)
            circle；空心圓
            decimal：數字
            square：正方形
*/

/*ul{*/
/*    background: darkgrey;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

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

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

}

3.6、背景圖像

背景顏色

背景圖片

div{
    width: 1400px;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/1.jpg");
    /*默認平鋪*/
}
.div1{
    background-repeat: repeat-x;/*水平平鋪*/

}
.div2{
    background-repeat: repeat-y;/*豎直平鋪*/
}
.div3{
    background-repeat: no-repeat;/*不平鋪*/
}

3.7、漸變

推薦網(wǎng)站：https://www.grabient.com/

background-color: #FFFFFF;
background-image: linear-gradient(124deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);

4、盒子模型

4.1、什么是盒子

margan：外邊距
padding：內邊距
border：邊框

4.2、邊框

邊框的粗細
邊框的樣式
邊框的顏色

/*body總有一個(gè)默認的外邊距margin：8dp*/
body{
    margin: 0;
}
#app{
    width: 300px;
    border: 1px solid red;/*粗細 樣式 顏色*/
}
h2{
    font-size: 16px;
    background: cadetblue;
    line-height: 30px;
    margin: 0;
    color: #FFFFFF;
}
form{
    background: cadetblue;
}
div:nth-of-type(1) input{
    border: 3px solid black;
}
div:nth-of-type(2) input{
    border: 3px dashed #be0be2;
}
div:nth-of-type(2) input{
    border: 2px dashed #2be24e;
}

4.3、內外邊距

<!--外邊距可以使居中-->
<style>
    /*body總有一個(gè)默認的外邊距margin：8dp*/
    body{
        margin: 0;
    }
    /*  margin:0;一個(gè)參數為上下左右
        margin: 0 auto;上下為0，左右自動(dòng)，實(shí)現水平居中
        margin:0 1px 2px 3px;四個(gè)參數為上右下左，順時(shí)針
    */
    #app{
        width: 300px;
        border: 1px solid red;/*粗細 樣式 顏色*/
        margin: 0 auto;
    }
    h2{
        font-size: 16px;
        background: cadetblue;
        line-height: 30px;
        margin: 0;
        color: #FFFFFF;
    }
    form{
        background: cadetblue;
    }
   input{
       border: 1px solid black;
   }
    div:nth-of-type(1){
        padding: 10px;
    }

盒子的計算方式：這個(gè)元素到底多大？

?margin+border+padding+內容寬度

4.4、圓角邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- border-radius: 50px 20px;左上右下  右上左下-->
    <!--圓圈：圓角 = 寬度的一半 -->
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 10px solid red;
            border-radius: 100px 100px 0 0;
        }
        img{
            border-radius: 100px;
        }
    </style>
</head>
<body>
<div></div>
<img src="images/1.jpg" alt="">
</body>
</html>

4.5、盒子陰影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
           margin：0 auto;居中要求：外面是一個(gè)塊元素，塊元素有固定的寬度
    -->
    <style>

        div{
            width: 1000px;
            height: 500px;
            text-align: center;
        }
        img{
            border-radius: 100px;
            box-shadow: 10px 10px 100px yellow;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>

    <div>
        <img src="images/1.jpg" alt="">
    </div>

</body>
</html>

5、浮動(dòng)

5.1、標準文檔流

塊級元素：獨占一行

h1~h6 p div 列表...

行內元素：不獨占一行

span a img strong...

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

5.2、display

<!--display:
            block;塊元素
            inline;行內元素
            inline-block;是塊元素，但是可以?xún)嚷?lián)，在同一行
            none;不顯示
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: red solid 1px;
        display: inline;
    }
    span{
        width: 100px;
        height: 100px;
        border: red solid 1px;
        display: inline-block;
    }
</style>

這個(gè)也是一種能夠實(shí)現行內元素排列的方式，但是我們很多情況都使用float

5.3、float

左右浮動(dòng)

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px solid red;
}

.layer01{
    border: 1px dashed black;
    display: inline-block;
    float: left;
}

.layer02{
    border: 1px dashed green;
    display: inline-block;
    float: left;
}

.layer03{
    border: 1px dashed blue;
    display: inline-block;
    float: left;
}

.layer04{
    border: 1px dashed paleturquoise;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: left;
    clear: both;
}

5.4、父級邊框塌陷問(wèn)題

clear

clear:
        right; 右側不允許有浮動(dòng)元素
        left; 左側不允許有浮動(dòng)元素
        both;兩側都不允許有浮動(dòng)元素

解決方案：

增加父級元素高度

#father{
    border: 1px solid red;
    height: 800px;
}

增加一個(gè)空的div標簽，清除浮動(dòng)

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

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

overflow

在父級元素中增加一個(gè) overflow: hidden;

父類(lèi)添加一個(gè)偽類(lèi) after
```
#father:after{
    content: '';
    display: block;
    clear: both;
}
```
小結：
- 浮動(dòng)元素后面增加空的div
  - 簡(jiǎn)單，代碼中盡量避免空的div
- 設置父元素的高度
  - 簡(jiǎn)單，元素假設有了固定的高度，就會(huì )被限制
- overflow
  - 簡(jiǎn)單，下拉的一些場(chǎng)景避免使用
- 父類(lèi)添加一個(gè)偽類(lèi)：after（推薦）
  - 寫(xiě)法稍微復雜一點(diǎn)，但是沒(méi)有副作用，推薦使用

5.5、對比

display

方向不可控制
float

浮動(dòng)起來(lái)會(huì )脫離標準文檔流，所以要解決父級塌陷的問(wèn)題

6、定位

6.1、相對定位

相對定位：position: relative;

相對于原來(lái)的位置，進(jìn)行指定的偏移,相對定位的話(huà)，它任然在標準文檔流中，原來(lái)的位置會(huì )被保留

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

<!DOCTYPE html>
<html lang="en">
<head>
    <!--相對定位：相對于自己原來(lái)的位置進(jìn)行定位-->
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 15px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
        }
        #first{
            background-color: #23ff66;
            border: 1px dashed #23ff98;
            position: relative;/*相對定位：上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #34cedd;
            border: 1px dashed #34ceff;
        }
        #third{
            background-color: #ff8299;
            border: 1px dashed #ff82fc;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一個(gè)盒子</div>
    <div id="second">第二個(gè)盒子</div>
    <div id="third">第三個(gè)盒子</div>
</div>

</body>
</html>

練習：方塊定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: red 1px solid;
            padding: 10px;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: pink;
            line-height: 100px;
            text-align: center;
            color: #FFFFFF;
            display: block;
        }
        a:hover{
            background: #6284FF;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            top: -300px;
            right: -100px;
        }
    </style>
</head>
<body>

    <div id="box">
        <a href="#" class="a1">鏈接1</a>
        <a href="#" class="a2">鏈接2</a>
        <a href="#" class="a3">鏈接3</a>
        <a href="#" class="a4">鏈接4</a>
        <a href="#" class="a5">鏈接5</a>
    </div>

</body>
</html>

6.2、絕對定位

定位：基于xxx定位，上下左右

沒(méi)有父級元素定位的前提下，相對于瀏覽器定位
假設父級元素存在定位，通常相對于父級元素進(jìn)行偏移
在父級元素范圍內移動(dòng)

相對于父級或者瀏覽器的位置，進(jìn)行指定的偏移,絕對定位的話(huà)，它不在在標準文檔流中，原來(lái)的位置不會(huì )被保留

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

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 15px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #23ff66;
            border: 1px dashed #23ff98;
        }
        #second{
            background-color: #34cedd;
            border: 1px dashed #34ceff;
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: #ff8299;
            border: 1px dashed #ff82fc;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一個(gè)盒子</div>
    <div id="second">第二個(gè)盒子</div>
    <div id="third">第三個(gè)盒子</div>
</div>

</body>
</html>

6.3、固定定位 fixed

<!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: #6284FF;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*fixed,固定定位*/
            width: 50px;
            height: 50px;
            background: #2be24e;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

6.4、z-index

圖層~

z-index：默認是0，最高無(wú)限制

<!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/2.jpg" alt=""></li>
        <li class="tipText">大家好</li>
        <li class="tipBg"></li>
        <li>時(shí)間：2099-1-1</li>
        <li>地點(diǎn)：月球一號基地</li>
    </ul>
</div>

</body>
</html>

opacity: 0.5;/背景透明度/

#content{
    width: 380px;
    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;
}
/*父級元素相對定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 200px;
}
.tipBg{
    background: #05e29b;
    opacity: 0.5;/*背景透明度*/
}
.tipText{
    z-index: 999;
}

7、動(dòng)畫(huà)

8、總結

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

CSS3

1、初識CSS

1.1、什么是CSS

1.2、發(fā)展史

1.3、快速入門(mén)

1.4、css的三種導入方式

2、選擇器

2.1、基本選擇器

2.1.1、標簽選擇器

2.1.2、類(lèi)選擇器 class

2.1.3、id選擇器

2.2、層次選擇器

2.2.1、后代選擇器

2.2.2、子選擇器

2.2.3、相鄰兄弟選擇器

2.2.4、通用選擇器

2.3、結構偽類(lèi)選擇器

2.4、屬性選擇器（常用）

3、美化網(wǎng)頁(yè)元素

3.1、為什么要美化網(wǎng)頁(yè)

3.2、字體樣式

3.3、文本樣式

3.4、超鏈接偽類(lèi)和陰影

3.5、列表

3.6、背景圖像

3.7、漸變

4、盒子模型

4.1、什么是盒子

4.2、邊框

4.3、內外邊距

4.4、圓角邊框

4.5、盒子陰影

5、浮動(dòng)

5.1、標準文檔流

5.2、display

5.3、float

5.4、父級邊框塌陷問(wèn)題

5.5、對比

6、定位

6.1、相對定位

6.2、絕對定位

6.3、固定定位 fixed

6.4、z-index

7、動(dòng)畫(huà)

8、總結

1、初識CSS

1.1、什么是CSS

1.2、發(fā)展史

1.3、快速入門(mén)

1.4、css的三種導入方式

2、選擇器

2.1、基本選擇器

2.1.1、標簽選擇器

2.1.2、類(lèi)選擇器 class

2.1.3、id選擇器

2.2、層次選擇器

2.2.1、后代選擇器

2.2.2、子選擇器

2.2.3、相鄰兄弟選擇器

2.2.4、通用選擇器

2.3、結構偽類(lèi)選擇器

2.4、屬性選擇器（常用）

3、美化網(wǎng)頁(yè)元素

3.1、為什么要美化網(wǎng)頁(yè)

3.2、字體樣式

3.3、文本樣式

3.4、超鏈接偽類(lèi)和陰影

3.5、列表

3.6、背景圖像

3.7、漸變

4、盒子模型

4.1、什么是盒子

4.2、邊框

4.3、內外邊距

4.4、圓角邊框

4.5、盒子陰影

5、浮動(dòng)

5.1、標準文檔流

5.2、display

5.3、float

5.4、父級邊框塌陷問(wèn)題

5.5、對比

6、定位

6.1、相對定位

6.2、絕對定位

6.3、固定定位 fixed

6.4、z-index

7、動(dòng)畫(huà)

8、總結