2.CSS入門基礎

m0_46110789發表於2020-10-11

CSS

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快速入門

練習格式

在這裡插入圖片描述

基本入門

建議使用這種規範

在這裡插入圖片描述

CSS的優勢

內容和表現分離
網頁結構表現同一可以實現複用
樣式十分豐富
建議使用獨立於html的css檔案
利用SEO 容易被搜尋引擎收錄

1.4CSS的三種匯入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--2.內部樣式-->
    <style>
        h1 {
            color: green;
        }
    </style>
    <link rel="stylesheet" href="CSS/css.css">
</head>
<body>
<!--優先順序:就近原則-->

<!--1.行內樣式 在標籤元素中 編寫一個style屬性 編寫樣式即可-->
<h1 style="color: red">我是標題</h1>
</body>
</html>

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

擴充外部樣式兩種寫法

連結式 html內

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

匯入式 @import是CSS2.1特有的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--匯入式-->
    <style>
        @import url("CSS/style.css");
    </style>
</head>
<body>
<h1>林巨集程</h1>
</body>
</html>

2選擇器

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

2.1基本選擇器

2.1.1標籤選擇權

選擇一類標籤標籤{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*標籤選擇器 會選擇到頁面上所有的這個標籤的元素
        */
        h1{
            color: red;
            background: aqua;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>學java</h1>
<h1>學java</h1>
<p>林巨集程</p>
</body>
</html>

2.1.2類選擇器

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

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

    <style>
        /*類選擇器的格式 .class的名稱*/
        /*可以多個標籤歸類 是同一個class*/
        .title1{
            color: red;
        }
        .title2{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 class="title1">標題1</h1>
<h2 class="title2">標題2</h2>
<h3 class="title1">標題3</h3>

<p class="title1">P標籤</p>
</body>
</html>

2.1.3ID選擇器

全域性唯一 #id{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id選擇器 id必須保證全域性唯一
          #id名稱{}
          不遵循就近原則
          id選擇器>類選擇器>標籤選擇器
        */

        #title1{
            color: red;
        }
        .style1{
            color: green;
        }
        h1{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 id="title1">標題1</h1>
<h1 class="style1">標題2</h1>
<h1 class="style1">標題3</h1>
<h1>標題4</h1>
<h1>標題5</h1>
</body>
</html>

優先順序

ID選擇器>類選擇器>標籤選擇權

2.2層次選擇器

總體程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*後代選擇器*/
        body p{
            color: red;
        }

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

        /*相鄰兄弟選擇器 只有一個 向下一個*/
        .active +p{
            background: antiquewhite;
        }

        /*通用兄弟選擇器 當前選中元素的向下的所有兄弟元素*/
        .active~p{
            background: green;
        }
    </style>
</head>
<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>
<p>p7</p>
<p>p8</p>

</body>
</html>

html結構

在這裡插入圖片描述

2.2.1後代選擇器

在某個元素後面所有標籤祖爺爺爺爺爸爸你

/*後代選擇器*/
body p{
    color: red;
}

在這裡插入圖片描述

2.2.2子選擇器

在某個元素指定的後一代標籤兒子

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

在這裡插入圖片描述

2.2.3向下弟弟選擇器

只有一個向下一個感覺應該叫弟弟選擇器因為他還只能向下選擇

/*相鄰兄弟選擇器 只有一個 向下一個*/
.active +p{
    background: antiquewhite;
}

在這裡插入圖片描述

2.2.4向下所有弟弟選擇器

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

/*通用兄弟選擇器 當前選中元素的向下的所有兄弟元素*/
.active~p{
    background: green;
}

在這裡插入圖片描述

2.3結構偽類選擇器

偽類:條件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用class id選擇器-->
    <style>
        /*ul的第一個子元素*/
        ul li:first-child{
            background: green;
        }

        /*ul的最後一個子元素*/
        ul li:last-child{
            background: red;
        }

        /*選中p1:定位到父元素 選擇當前的第一個元素 按照元素
          nth-child(1) 選擇當前p元素的父級元素 選中父級元素的第一個 並且是當前元素才生效
        */
        p:nth-child(1){
            background:blue;
        }

        /*
            nth-of-type(2)選中父元素下的p元素的第二個 按照型別
        */
        p:nth-of-type(2){
            background: yellow;
        }
        /*動畫特效 選中更改背景顏色*/
        a:hover{
            background:black ;
        }

    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <a href="">a1</a>
    <h1>h1</h1>

    <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: blue;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*
        格式
        標籤[屬性名=屬性值(正則)] {}

        a[id]{}
        存在id屬性的元素

        a[id=first]{} 包含id=first的元素
        =絕對等於
        */
        a[id=first]{
            background: green;
        }

        /*
         class中有links的元素
         *=包含這個元素
        */
        a[class*=links]{
            background: yellow;
        }

        /*選中href中以http開頭的元素
        ^=以這個開頭
        */
        a[href^=http]{
            background: red;
        }

        /* 選中以href中以pdf結尾的元素
        $=以這個結尾*/
        a[href$=pdf]{
            background: aqua;
        }

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


</body>
</html>

3美化網頁元素

3.1為什麼要美化

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

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: aqua;
        }

        h1 {
            font-size: 50px;
        }

        p {

        }

        .p1 {
            font-weight: lighter;
        }
    </style>
</head>
<body>
<h1>
    哼 &nbsp; 哼~~~
</h1>

<p class="p1">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</p>

<p>
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊!!!!!!!!!!!
</p>

<p>
    English is great
</p>
</body>
</html>

3.3文字樣式

color 顏色:
1.單詞
2.RGB:00~FF 紅綠藍三色調配 255 255 255
3.RGBA:00~FF 紅綠藍三色調配 255 255 255 A是透明度 0~1
text-align: 排版(如居中);
text-align: center;
text-indent: 縮排;
text-indent: 2em; em代表的是幾個字型的距離
line-height :行高
background: blue;
height: 300px;
line-height: 300px;
行高和塊的高度一致就可以上下居中
裝飾
text-decoration: underline;
文字圖片水平對齊
vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
    1.color 顏色:
        1.單詞
        2.RGB:00~FF 紅綠藍三色調配 255 255 255
        3.RGBA:00~FF 紅綠藍三色調配 255 255 255 A是透明度 0~1

    2.text-align: 排版(如 居中);
        text-align: center;
        vertical-align: middle;
    3.text-indent:  縮排;
        text-indent: 2em; em代表的是幾個字型的距離

    4.行高
        background: blue;
        height: 300px;
        line-height: 300px;
        行高和塊的高度一致 就可以上下居中

    5.裝飾
        text-decoration: underline;

-->
    <style>
        img,span{
            vertical-align: middle;
        }

        h1{
            color:rgba(0,255,255,0.2) ;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blue;
            height: 100px;
            line-height: 100px;
        }

        .l1{
            /*下劃線*/
            text-decoration: underline;
        }
        .l2{
            /*中劃線*/
            text-decoration: line-through;
        }
        .l3{
            /*上劃線*/
            text-decoration: underline;
        }
        a{
            /*超連結去下劃線*/
            text-decoration: none;
        }
    </style>
</head>
<body>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>

<h1>
    哼 &nbsp 哼~~~
</h1>

<p class="p1">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</p>

<p class="p2">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊!!!!!!!!!!!
</p>

<p class="p3">
    English is great
</p>

<p>
    <img src="image/a.jpg" alt="圖片錯誤">
    <spna>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</spna>
</p>
</body>
</html>

3.4文字陰影和超偽連結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*預設的顏色*/
        a {
            text-decoration: none;
            color: blue;
        }

        /*滑鼠懸浮的狀態*/
        a:hover {
            color: orange;
            font-size: 20px;
        }

        /*滑鼠按住未釋放的狀態*/
        a:active {
            color: green;
            font-size: 100px;
        }

        /*未訪問過連結*/
        a:link{
            color: aqua;
        }

        /*訪問過連結*/
        a:visited{
            color: gray;
        }

        /*text-shadow: 陰影顏色 水平偏移 垂直偏移 模糊半徑;*/
        #price{
            text-shadow: cornflowerblue 10px 0px 2px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="image/a.jpg" alt="圖片失效">
</a>

<p>
    <a href="#">驢</a>
</p>

<p>
    <a href="">作者 我</a>
</p>

<p id="price">
    $99
</p>
</body>
</html>

3.5列表

html程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部產品分類</h2>
    <ul>
        <li><a href="">圖書</a>&nbsp;&nbsp;&nbsp;<a href="">音響</a>&nbsp;&nbsp;&nbsp;<a href="">數字商品</a></li>
        <li><a href="">家庭電器</a>&nbsp;&nbsp;&nbsp;<a href="">手機</a>&nbsp;&nbsp;&nbsp;<a href="">數碼</a></li>
        <li><a href="">電腦</a>&nbsp;&nbsp;&nbsp;<a href="">耳機</a>&nbsp;&nbsp;&nbsp;<a href="">滑鼠</a></li>
    </ul>

</div>


</body>
</html>

css程式碼

#nav{
    width: 300px;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 30px;
    background-color: red;
}
/*ul li*/
/*
list-style: ;
none   去掉圓點 去掉數字
circle 空心圓
decimal 數字
square 正方形
*/

ul{
    background-color: gray;
}

ul li{
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
}

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

a:hover{
    color:orange;
}

3.6背景

背景顏色和背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 1080px;
            height: 1920px;
            border: 1px solid #ff0000;
            background-image: url("image/a.jpg");
            /*預設是全部平鋪的*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }

    </style>
</head>
<body>
<div class="div1"></div>
<br>
<div class="div2"></div>
<br>
<div class="div3"></div>

</body>
</html>

對淘寶導航做個模仿

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部產品分類</h2>
    <ul>
        <li><a href="">圖書</a>&nbsp;&nbsp;&nbsp;<a href="">音響</a>&nbsp;&nbsp;&nbsp;<a href="">數字商品</a></li>
        <li><a href="">家庭電器</a>&nbsp;&nbsp;&nbsp;<a href="">手機</a>&nbsp;&nbsp;&nbsp;<a href="">數碼</a></li>
        <li><a href="">電腦</a>&nbsp;&nbsp;&nbsp;<a href="">耳機</a>&nbsp;&nbsp;&nbsp;<a href="">滑鼠</a></li>
    </ul>
</div>


</body>
</html>

CSS

#nav {
    width: 300px;
}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 30px;
    margin: 0px;
    /* 顏色 圖片 圖片位置 平鋪方式*/
    background: lightseagreen url("image/a.jpg") no-repeat 200px -33px;
}

/*ul li*/
/*
list-style: ;
none   去掉圓點 去掉數字
circle 空心圓
decimal 數字
square 正方形
*/

ul {
    background-color: gray;
    margin: 0px;
    padding: 0px;
}

ul li {
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
    background-color: aqua;
    background-image: url("image/a.jpg");
    background-repeat: no-repeat;
    background-position: 200px -27px;
}

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

a:hover {
    color: orange;
}

3.7漸變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #0093E9;
            background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

        }
        
    </style>
</head>
<body>
    
</body>
</html>

4.盒子模型

4.1什麼是盒子模型

在這裡插入圖片描述

margin 外邊距

padding 內邊距

border 邊框

4.2邊框

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*body總有一個外邊距*/
            margin: 0px;
            padding: 0px;
            text-decoration: none;
        }
        #box{
            /*border 粗細 樣式 顏色*/
            width: 300px;
            border:1px solid red ;
        }

        form{
            background: aqua;
        }
        div:nth-of-type(1)>input{
            border: 3px solid black;
        }

        div:nth-of-type(2)>input{
            border: 3px dashed blue;
        }

        h2{
            font-size: 16px;
            background-color: aqua;
            line-height: 30px;
            margin: 0;
        }

    </style>
</head>
<body>

<div id="box">
    <h2>會員登入</h2>
    <form action="#">
        <div>
            <span>使用者名稱:</span>
            <input type="text">
        </div>

        <div>
            <span>密碼:</span>
            <input type="text">
        </div>

        <div>
            <span>郵箱:</span>
            <input type="text">
        </div>

    </form>
</div>
</body>
</html>

4.3內外邊距

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

公式:margin+border+padding+內容寬度

在這裡插入圖片描述

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

        #box {
            /*border 粗細 樣式 顏色*/
            /*外邊框的妙用 居中元素
              margin: 0 auto;

           */
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        h2 {
            font-size: 16px;
            background-color: aqua;
            line-height: 30px;
            margin: 0;
        }

        form {
            background: aqua;
        }

        input {
            border: 1px solid black;
        }

        div:nth-of-type(1){
            padding: 10px 2px;
        }

    </style>
</head>
<body>

<div id="box">
    <h2>會員登入</h2>
    <form action="#">
        <div>
            <span>使用者名稱:</span>
            <input type="text">
        </div>

        <div>
            <span>密碼:</span>
            <input type="text">
        </div>

        <div>
            <span>郵箱:</span>
            <input type="text">
        </div>

    </form>
</div>
</body>
</html>

4.4圓角邊框

圓角邊框

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

    <style>

        div{
            border: 10px solid red;
            width: 100px;
            height: 100px;
            /*圓圈:   圓角=半徑*/
            /*左上 右上 右下 左上 順時針方向*/
            border-radius: 50px 20px 10px 5px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

頭像模擬

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;
            width: 100px;
            height: 50px;
            background: red;
            /*圓圈:   圓角=半徑*/
            /*左上 右上 右下 左上 順時針方向*/
            /*先配置好width和height在配置邊距會容易很多*/
            border-radius: 50px 50px 0px 0px;
        }
        img{
            /*頭像畫素100*100  半徑是50 設定圓角50就是個圓  */
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div></div>
<img src="image/a.jpg" alt="">
</body>
</html>

4.5盒子陰影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--margin:0 auto
    要求 塊元素塊元素有固定的寬度
    -->
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*陰影顏色 水平偏移 垂直偏移 模糊半徑*/
            box-shadow: yellow 10px 10px 100px;
            margin: 0 auto;
        }

        img {
            border-radius: 50px;
            /*陰影顏色 水平偏移 垂直偏移 模糊半徑*/
            box-shadow: yellow 10px 10px 100px;
        }
    </style>
</head>
<body>

<div><img src="image/a.jpg" alt=""></div>

</body>
</html>

5浮動

5.1標準文件流

在這裡插入圖片描述

塊級元素獨佔一行

h1~h6 p div list...........

行內元素不獨佔一行

span a img strong....

行內元素可以包括在塊級元素中反之不行

5.2display

block-inline 就是將img這種塊級元素放在行內元素中因為圖片經常會另起一行想要多個圖片放同一行就是用這個

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: red solid 10px;
            display: inline-block;
        }
        span{
            /*block 塊元素
              inline 行內元素
              block-inline 是塊元素 但是可以內聯 在一行
              none 消失
            */
            width: 100px;
            height: 100px;
            border: red solid 10px;
            display: inline-block;

    </style>
</head>
<body>
<div>div塊元素</div>
<span>span行內元素</span>
<p>浮動的盒子可以向左浮動 也可以向右浮動 直到它的邊緣碰到包含框或另一個浮動盒子為止</p>
</body>
</html>

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

5.3float

1.左右浮動 float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: red solid 10px;
            float: right;
        }
        span{
            /*
            float:
            right 右浮動
            left 左浮動
            */
            width: 100px;
            height: 100px;
            border: red solid 10px;
            float: right;
        }
    </style>
</head>
<body>
<div>div塊元素</div>
<span>span行內元素</span>
<p>浮動的盒子可以向左浮動 也可以向右浮動 直到它的邊緣碰到包含框或另一個浮動盒子為止</p>
</body>
</html>

5.4父級邊框塌陷的問題

clear

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

解決方案

1.增加父級元素的高度

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

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

2.在最後增加一個空的div 清除浮動

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

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


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

3.overflow 在父級元素中增加一個overflow hidden屬性可以隱藏多出來的浮動元素

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

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

4.父類增加一個偽類 after(推薦)

推薦寫法複雜一些但是沒有副作用

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

5.5對比

display

方向不可控制
float

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

6.定位

6.1相對定位

相對定位 position:relative

相對於原來的位置進行制定的偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 相對定位
        相對於自己原來的位置進行偏移~
        -->
    <style>
        body{
            padding: 20px;
        }
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father {
            border: 1px solid #de1717;
        }

        .first {
            background-color: #3e6a55;
            border: 1px dashed #3e6a45;
            position: relative;/*相對定位:上下左右*/
            /*距離上離近20px*/
            top: -20px;
            /*距離上離開10px*/
            left: 10px;
        }

        .second {
            background-color: #548555;
            border: 1px dashed #5485e5;
        }

        .third {
            background-color: #d59255;
            border: 1px dashed #d59230;
            position: relative;
            /*距離下離開10px*/
            bottom: 10px;
        }
    </style>
</head>
<body>
<div id="father">
    <div class="first">第一個盒子</div>
    <div class="second">第二個盒子</div>
    <div class="third">第三個盒子</div>
</div>
</body>
</html>

/*距離上離近20px*/
            top: -20px;
            /*距離上離開10px*/
            left: 10px;

 /*距離下離開10px*/
            bottom: 10px;

練習

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

    </style>
</head>
<body>
<div id="box">
    <a href="a1" class="a1">連結1</a>
    <a href="a2" class="a2">連結2</a>
    <a href="a3" class="a3">連結3</a>
    <a href="a4" class="a4">連結4</a>
    <a href="a5" class="a5">連結5</a>

</div>
</body>
</html>

6.2絕對定位

定位基於XXX定位上下左右

沒有父級元素定位的前提下相對於瀏覽器定位
假設父級元素存在定位我們通常會相對於父級元素

在父級元素範圍內移動

總結 :相對於父級或瀏覽器的位置進行制定的偏移絕對定位的話它仍然在標準文件流中原來的位置會被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #de1717;
            position: relative;
        }
        .first{
            background-color: #3e6a55;
            border: 1px dashed #3e6a45;
        }
        .second{
            background-color: #548555;
            border: 1px dashed #5485e5;
            position: absolute;
            right: 20px;
            top: -1px;
        }
        .third{
            background-color: #d59255;
            border: 1px dashed #d59230;

        }
    </style>
</head>
<body>
<div id="father">
    <div class="first">第一個盒子</div>
    <div class="second">第二個盒子</div>
    <div class="third">第三個盒子</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;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4z-index圖層

opacity: 0.5;透明度

html

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

    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="image/a.jpg" alt=""></li>
        <li class="tipText">學習Java&nbsp;沖沖衝</li>
        <li class="tipBg"></li>
        <li>時間 2020.1.1</li>
        <li>地點:月球一號基地</li>
    </ul>
</div>

</body>
</html>

css

#content{
    width: 380px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px black solid;

}
ul,li{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
/*父級元素相對定位*/
#content>ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 140px;
}
.tipBg{
    background: black;
}
.tipText{
    z-index: 999;
    color: white;
    /*rgba也可以設定透明度*/
    opacity: 0.5;

}

7.動畫

略過使用JS更加方便

8總結

在這裡插入圖片描述

RabbitMQ基礎入門
2020-08-23
MQ
mongodb基礎入門
2020-01-21
MongoDB
MySQL 基礎入門
2020-05-05
MySql
ZooKeeper 基礎入門
2020-06-06
Elasticsearch 基礎入門
2019-03-04
Elasticsearch
Vim 入門：基礎
2019-04-20
Bootstrap基礎入門
2019-07-10
boot
Html基礎入門
2019-07-10
HTML
ElasticSearch基礎入門
2019-06-28
Elasticsearch
HTML 基礎入門
2019-02-16
HTML
Dart 基礎入門
2019-02-11
Dart
SQL入門基礎
2022-05-18
SQL
Nginx 基礎入門
2022-01-09
Nginx
Kafka基礎入門
2021-09-21
Kafka
Redis入門基礎
2018-08-09
Redis
Java 入門基礎
2018-11-29
Java
Maven入門基礎
2018-11-24
Maven
JavaScript入門基礎
2020-11-06
JavaScript
SQL基礎入門
2022-05-17
SQL
Zookeeper基礎入門
2022-03-01
goalng 基礎入門
2018-05-11
Go
TypeScript 基礎入門
2017-06-10
TypeScript
Mongoose基礎入門
2017-07-22
Go
systemtap基礎入門
2013-04-07
shell入門基礎
2024-04-15
前端基礎入門四（JavaScript基礎）
2019-05-20
前端JavaScript
React Hooks入門: 基礎
2019-03-02
ReactHook
Docker | 入門 & 基礎操作
2021-09-08
Docker
圖論入門基礎
2021-03-02
圖論
TypeScript 基礎入門（一）
2019-01-16
TypeScript
Git入門-基礎命令
2018-12-04
Git
HTML入門基礎（二）
2020-12-14
HTML
rabbitmq（一）-基礎入門
2020-11-08
MQ
Elasticsearch（1）：基礎入門
2020-09-22
Elasticsearch
TypeScript 之基礎入門
2021-12-06
TypeScript
Kafka基礎入門篇
2021-10-09
Kafka
SpringCloud基礎入門
2020-10-07
SpringGCCloud
JavaSE基礎入門（二）
2020-09-28
Java

2.CSS入門基礎

1什麼是CSS

1.1什麼是CSS

1.2發展史

1.3快速入門

練習格式

基本入門

CSS的優勢

1.4CSS的三種匯入方式

2選擇器

2.1基本選擇器

2.1.1標籤選擇權

2.1.2類選擇器

2.1.3ID選擇器

優先順序

2.2層次選擇器

總體程式碼

html結構

2.2.1後代選擇器

2.2.2子選擇器

2.2.3向下弟弟選擇器

2.2.4向下所有弟弟選擇器

2.3結構偽類選擇器

2.4屬性選擇器(常用)

3美化網頁元素

3.1為什麼要美化

3.2字型樣式

3.3文字樣式

3.4文字陰影和超偽連結

3.5列表

html程式碼

css程式碼

3.6背景

3.7漸變

4.盒子模型

4.1什麼是盒子模型

4.2邊框

4.3內外邊距

4.4圓角邊框

4.5盒子陰影

5浮動

5.1標準文件流

5.2display

5.3float

5.4父級邊框塌陷的問題

1.增加父級元素的高度

2.在最後增加一個空的div 清除浮動

3.overflow 在父級元素中增加一個overflow hidden屬性 可以隱藏多出來的浮動元素

4.父類增加一個偽類 after(推薦)

5.5對比

6.定位

6.1相對定位

練習

6.2絕對定位

6.3固定定位

6.4z-index圖層

7.動畫

8總結

相關文章

3.overflow 在父級元素中增加一個overflow hidden屬性可以隱藏多出來的浮動元素