CSS3

HTML+CSS+JavaScript

結(jié)構(gòu)+表項(xiàng)+交互

如何學(xué)習(xí)？

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

1、初識(shí)CSS

1.1、什么是CSS

Cascading Style Sheet（層疊樣式表）

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

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

1.2、發(fā)展史

CSS1.0

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

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

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

1.3、快速入門

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

建議使用這種規(guī)范

CSS優(yōu)勢(shì)：

內(nèi)容和表現(xiàn)分離
網(wǎng)頁(yè)結(jié)構(gòu)表現(xiàn)統(tǒng)一，可以實(shí)現(xiàn)復(fù)用
樣式十分豐富
建議使用獨(dú)立于HTML的css文件
利于SEO，容易被搜索引擎收錄

1.4、css的三種導(dǎo)入方式

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

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

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

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

</body>
</html>

拓展：外部樣式兩種寫法：

鏈接式：

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

導(dǎo)入式：

@import是CSS2.1特有的

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

2、選擇器

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

2.1、基本選擇器

2.1.1、標(biāo)簽選擇器

選擇一類標(biāo)簽

語法：

?<標(biāo)簽名></標(biāo)簽名>

?標(biāo)簽名{

?聲明1：；

?聲明2：；

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

2.1.2、類選擇器 class

選中所有class屬性一致的標(biāo)簽，可以跨標(biāo)簽

語法：

?.類名{

?聲明1：；

?聲明2：；

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

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

</head>
<body>

    <h1 class="one">標(biāo)題1</h1>
    <h1 class="two">標(biāo)題2</h1>
    <h1 class="three">標(biāo)題3</h1>

</body>
</html>

2.1.3、id選擇器

全局唯一

語法：

?#id名{

?聲明1：；

?聲明2：；

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

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

</head>
<body>

    <h1 id="one" class="style1">標(biāo)題1</h1>
    <h1 class="style1">標(biāo)題2</h1>
    <h1 class="style1">標(biāo)題3</h1>
    <h1>標(biāo)題4</h1>
    <h1>標(biāo)題5</h1>

</body>
</html>

優(yōu)先級(jí)：不遵循就近原則，固定的：id選擇器>類選擇器>標(biāo)簽選擇器

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、子選擇器

只有當(dāng)前選擇的下一代

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

2.2.3、相鄰兄弟選擇器

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

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

2.2.4、通用選擇器

當(dāng)前選中元素的向下的所有元素

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

2.3、結(jié)構(gòu)偽類選擇器

偽類：條件

<!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:定位到父元素，選中當(dāng)前的第一個(gè)元素
        選中當(dāng)前元素的父級(jí)元素，選中父級(jí)元素的第n個(gè)，但第n個(gè)元素必須是是當(dāng)前元素，否則選不中
        */
        p:nth-child(3){
            background: cadetblue;
        }

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

        /*鼠標(biāo)移動(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結(jié)合

屬性名
屬性名 = 屬性值（正則）
**= 絕對(duì)等于 **
*= 包含
^= 以...開頭
$= 以...結(jié)尾

<!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.= 絕對(duì)等于   *=  包含
        4.^= 以...開頭
        5.$= 以...結(jié)尾
    */
    /*選中存在id屬性的元素  a[]{} */
        a[id]{
            background: #2be24e;
        }

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

    /* 選中href中以pdf結(jié)尾的*/
        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è)面漂亮才能吸引用戶
凸顯頁(yè)面主題
提高用戶體驗(yàn)

span標(biāo)簽：重點(diǎn)要突出的字，使用span套起來

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

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

3.2、字體樣式

   <!--
        font-family:    字體
        font-size:  字體大小
        font-weight:    字體粗細(xì)
        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/單詞;
對(duì)齊方式text-align: center;水平居中
首行縮進(jìn)text-indent: 2em;
行高h(yuǎn)eight: 300px;塊高

?line-height: 300px;行高

?行高和塊高度一致，就可以實(shí)現(xiàn)單行文本上下居中
裝飾劃線text-decoration:
文本圖片水平對(duì)齊 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;
        }
        
        /*下劃線*/
        .l1{
            text-decoration: underline;
        }
        
        /*中劃線*/
        .l2{
            text-decoration: line-through;
        }
        
        /*上劃線*/
        .l3{
            text-decoration: overline;
        }
        
        /*超鏈接去下劃線*/
        a{
            text-decoration: none;
        }
        
        /*水平對(duì)齊 參照物， 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年北京青青樹動(dòng)漫科技有限公司以系列動(dòng)畫電影的第一部《魁拔之十萬火急》為基礎(chǔ)，重新剪輯而成的TV動(dòng)畫。
        由王川執(zhí)導(dǎo)，田博、馬華等編劇，劉婧犖，竹內(nèi)順子等配音。
    </p>
    <p class="p3">
        TV版完整保留了電影的世界觀、人物設(shè)定、故事內(nèi)容和情節(jié)主線，但重制了片頭曲。
        《魁拔妖俠傳》是魁拔系列電影的前傳，主要講述的是有關(guān)卡拉肖克潘家族的故事，與電影關(guān)系并不大。
        目前大家所說的魁拔通常指魁拔系列動(dòng)畫電影。
    </p>
    
    <p>
        <img src="a.png" alt="">
        <span>jdlajsdajldjalsjd</span>
    </p>

</body>
</html>

3.4、超鏈接偽類和陰影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默認(rèn)顏色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠標(biāo)懸浮的狀態(tài)*/
        a:hover{
            color: orange;
            font-size: 20px;
        }
        /*鼠標(biāo)按住未釋放狀態(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開發(fā)手冊(cè)</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：數(shù)字
            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");
    /*默認(rèn)平鋪*/
}
.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：內(nèi)邊距
border：邊框

4.2、邊框

邊框的粗細(xì)
邊框的樣式
邊框的顏色

/*body總有一個(gè)默認(rèn)的外邊距margin：8dp*/
body{
    margin: 0;
}
#app{
    width: 300px;
    border: 1px solid red;/*粗細(xì) 樣式 顏色*/
}
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、內(nèi)外邊距

<!--外邊距可以使居中-->
<style>
    /*body總有一個(gè)默認(rèn)的外邊距margin：8dp*/
    body{
        margin: 0;
    }
    /*  margin:0;一個(gè)參數(shù)為上下左右
        margin: 0 auto;上下為0，左右自動(dòng)，實(shí)現(xiàn)水平居中
        margin:0 1px 2px 3px;四個(gè)參數(shù)為上右下左，順時(shí)針
    */
    #app{
        width: 300px;
        border: 1px solid red;/*粗細(xì) 樣式 顏色*/
        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;
    }

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

?margin+border+padding+內(nèi)容寬度

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、標(biāo)準(zhǔn)文檔流

塊級(jí)元素：獨(dú)占一行

h1~h6 p div 列表...

行內(nèi)元素：不獨(dú)占一行

span a img strong...

行內(nèi)元素可以被包含在塊級(jí)元素中，反之則不可以

5.2、display

<!--display:
            block;塊元素
            inline;行內(nèi)元素
            inline-block;是塊元素，但是可以內(nèi)聯(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è)也是一種能夠?qū)崿F(xiàn)行內(nèi)元素排列的方式，但是我們很多情況都使用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、父級(jí)邊框塌陷問題

clear

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

解決方案：

增加父級(jí)元素高度

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

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

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

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

overflow

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

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

5.5、對(duì)比

display

方向不可控制
float

浮動(dòng)起來會(huì)脫離標(biāo)準(zhǔn)文檔流，所以要解決父級(jí)塌陷的問題

6、定位

6.1、相對(duì)定位

相對(duì)定位：position: relative;

相對(duì)于原來的位置，進(jìn)行指定的偏移,相對(duì)定位的話，它任然在標(biāo)準(zhǔn)文檔流中，原來的位置會(huì)被保留

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

<!DOCTYPE html>
<html lang="en">
<head>
    <!--相對(duì)定位：相對(duì)于自己原來的位置進(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;/*相對(duì)定位：上下左右*/
            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>

練習(xí)：方塊定位

<!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、絕對(duì)定位

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

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

相對(duì)于父級(jí)或者瀏覽器的位置，進(jìn)行指定的偏移,絕對(duì)定位的話，它不在在標(biāo)準(zhǔn)文檔流中，原來的位置不會(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){ /*絕對(duì)定位，相對(duì)于瀏覽器初始位置*/
            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：默認(rèn)是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="images/2.jpg" alt=""></li>
        <li class="tipText">大家好</li>
        <li class="tipBg"></li>
        <li>時(shí)間：2099-1-1</li>
        <li>地點(diǎn)：月球一號(hào)基地</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;
}
/*父級(jí)元素相對(duì)定位*/
#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)畫

8、總結(jié)

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

CSS3

1、初識(shí)CSS

1.1、什么是CSS

1.2、發(fā)展史

1.3、快速入門

1.4、css的三種導(dǎo)入方式

2、選擇器

2.1、基本選擇器

2.1.1、標(biāo)簽選擇器

2.1.2、類選擇器 class

2.1.3、id選擇器

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

2.2.1、后代選擇器

2.2.2、子選擇器

2.2.3、相鄰兄弟選擇器

2.2.4、通用選擇器

2.3、結(jié)構(gòu)偽類選擇器

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

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

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

3.2、字體樣式

3.3、文本樣式

3.4、超鏈接偽類和陰影

3.5、列表

3.6、背景圖像

3.7、漸變

4、盒子模型

4.1、什么是盒子

4.2、邊框

4.3、內(nèi)外邊距

4.4、圓角邊框

4.5、盒子陰影

5、浮動(dòng)

5.1、標(biāo)準(zhǔn)文檔流

5.2、display

5.3、float

5.4、父級(jí)邊框塌陷問題

5.5、對(duì)比

6、定位

6.1、相對(duì)定位

6.2、絕對(duì)定位

6.3、固定定位 fixed

6.4、z-index

7、動(dòng)畫

8、總結(jié)

1、初識(shí)CSS

1.1、什么是CSS

1.2、發(fā)展史

2、選擇器

2.1、基本選擇器

2.1.1、標(biāo)簽選擇器

2.1.2、類選擇器 class

2.1.3、id選擇器

2.2、層次選擇器

2.2.2、子選擇器

2.2.3、相鄰兄弟選擇器

2.2.4、通用選擇器

2.3、結(jié)構(gòu)偽類選擇器

2.4、屬性選擇器（常用）

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

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

3.2、字體樣式

3.3、文本樣式

3.4、超鏈接偽類和陰影

3.5、列表

3.7、漸變

4、盒子模型

4.1、什么是盒子

4.3、內(nèi)外邊距

4.4、圓角邊框

4.5、盒子陰影

5、浮動(dòng)

5.2、display

5.3、float

5.4、父級(jí)邊框塌陷問題

5.5、對(duì)比

6.1、相對(duì)定位

6.2、絕對(duì)定位

6.3、固定定位 fixed

7、動(dòng)畫

8、總結(jié)