CSS啊嗯，前端學習小結（a4-a6）

阿新 • • 發佈：2021-02-17

技術標籤：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    video 
{
        height: 480px;
        width: 852px;
    }
    input::placeholder{
        color: violet;
    }
    ul li:nth-child(even){
        line-height: 40px;
        text-align: center;
        width: 1600px;
        height: 40px;
        list-style: none;
        background-color: blueviolet;
    }
    ul li:nth-child(odd) 
{
        list-style: none;
        background-color: violet;
    }
    ul li:nth-of-type(1){
        background-color: yellow;
    }
    /* ol li:nth-child(n){
        background-color: violet;
    } */
    ol li:nth-child(3n-1){

        /* 可套公式! */
        background-color: violet;
    }
    .e{ 
        width 
: 200px;
        height: 200px;
        background-color: violet;
    }
    .e::before{
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: palevioletred;
        content: 'wo';
    }
    .e::after{
        content:'shi' ;
    }
    .r1{
        /* CSS麻煩不要緊，要保證html的簡潔！ */
        background-color: salmon;
        width: 300px;
        height: 60px;
        border: 1px solid purple;
        line-height: 60px;
        font-weight: 700;
        color: royalblue;
    }
    .r1::before{
        float: left;
        content: 'aaa';
        margin-left: 20px;
    }
    .r1::after{
        float: right;
        content: 'bbb';
        margin-right: 20px;
    }
    .t{
        position: relative;
        width: 400px;
        height: 400px;
        background-color: violet;
    }
    .t::before{
        position:absolute;
        content: '';
        display: none; 
        /* 必須要寫！！！ */
        width: 400px;
        height: 400px;
        background-color: rgba(1, 1, 1, 0.4);
    }
    .t::before:hover{
        display: block;
    }
    .t:hover::before{
        /* 簡潔之美！ */
        display: block;
    }
    /* 以下為有意思的CSS3新特性！ */
    img{
    filter: blur(5px);
    }
    img:hover{
        filter: blur(0px);
    }
    .y{
        /* width: 100px; */
        /* height: 100px; */
        width: clac(100% - 100px);
        height: clac(10% + 30px);
        background-color: purple;
    }
</style>

<body>
    <video src="med/OMEN15.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" ></video>
    <audio src="music/Lotte Kestner - True Faith.mp3" controls="controls"></audio>


    <form action="">
        <input type="search" name="aaa" required="required" placeholder="MY3154" autofocus="autofocus">
        <input type="submit" value="GOGOGO!">
    </form>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ol>
    <div class="e">111</div>
    <div class="r1"></div>
    <div class="t"></div>
    <!-- 用了偽類選擇器，十分的簡潔！ -->
    <img src="pic/1.jpg" alt="">
    <div class="y"></div>
</body>
</html>

公式，CSS3新特性，偽類選擇器之類的，多百度看看
before,after 的區別在於是否在主題內容之前or之後。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a{
        float: left;
        width: 400px;
        height: 400px;
        background-color:purple;
    }
    .a1{
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
        transition:height 1.6s ,width .6s ;
    }
    .a1:hover{
        width: 400px;
        height: 400px;
    }
    .b{
        width: 400px;
        height: 400px;
        background-color: red;
        /* transition:height 1.6s ,width .6s ; */
        /* 下面那個更好！ */
        transition: all 1.6s;
    }
    .c{
        width: 10px;
        height: 40px;
        background-color: black;
    }
    .b:hover{
        width: 600px;
        height: 1000px;
    }
    .d{
        position: relative;
        width: 400px;
        height: 50px;border: 10px solid black;
        /* background-color: pink; */
        border-radius: 25px;
    }
    .d::before{
        content: '';
        position:absolute;
        margin: 5px 10px;
        /* width: 380px; */
        width: 0px;
        /* 這個必須要寫！！ */
        height: 40px;
        border-radius: 20px;
        background-color:chartreuse;
        transition: width 3s ease-in-out;
        /* 多看幾遍！！！ */
    }
    .d:hover::before {
        width: 380px;
    }
    .e{
        width: 200px;
        height: 200px;
        background-color: pink;
        background: url(pic/1.jpg) no-repeat;
        background-size: 400% ;
        transition: background-size 1.5s;
    }
    .e:hover{
        background-size: 100% ;
        /* 好彆扭的方法啊 */
    }
    .f{
        width: 200px;
        height: 200px;
        background-color: pink;
        background: url(pic/1.jpg);
        transition: background-position 1.5s;
    }
    .f:hover{
        background-position: center 100%;
    }
    .g{
        width: 200px;
        height: 200px;
        background-color: pink;
        background: url(pic/1.jpg) no-repeat;
        /* background-size: 400% ; */
        /* 註釋後過渡效果就無法起作用了 */
        transition: background-size 1.5s;
    }
    .g:hover{
        background-size: 100% ;
        /* transform: scale(1.5, 1.5); */
    }
</style>
<body>
    <div class="a1">123456789</div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <br>
    <div class="f"></div>
    <br>
    <div class="g"></div>
    <!-- 元素不會相應變換！ -->
</body>
</html>

幾個transition的使用，包括一個進度條的製作以及關於其空間佔用的研究。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .a1{
        background: url(pic/1.jpg);
        width: 200px;
        height: 200px;
        background-color: pink;
        transform:translate(50px,100px);
        /* transform: translate(x,y);不會影響其他佈局！ */
        transition: all 1s;
    }
    .a1:hover{
        transform: translate(300px,200px);
        width: 100px;
    }
    .a2{
        width: 400px;
        height: 400px;
        background-color: pink;
    }
    .a3{
        width: 100px;
        height: 100px;
        text-align: center;
        background-color: violet;
        transform: rotate(45deg);
        transition: all 1s;
        border-radius: 100px; 
        word-wrap:break-word;  
        word-break:break-all; 
    }
    .a3:hover{
        transform: rotate(180deg);
    }
    .a4{
        position: relative;
        width: 80px;
        height: 80px;
        background-color: pink;
    }
    .a4::after{
        content: '';
        position: absolute;
        /* background-color: brown; */
        top:0;
        left: 0;
        height: 12px;
        width: 12px;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        transform: rotate(45deg);
    }
</style>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3">123456789137878</div>
    <div class="a4"></div>
</body>
</html>