HTML--day04

1.伪类

伪类实际上是元素的某种状态。

元素：hover:鼠标悬浮上去的状态

A:link:链接未点击时候的状态

A:visited：链接被浏览过的状态

A:active：链接被点击时候的状态

Input:focus 输入框聚焦时候的状态，即有光标的状态。

2.伪元素

伪元素即是假的元素，通过元素内部创造假的元素，可以创造2中假的元素，1个是在元素内部的最前面，一个是在内部的最后面

元素：before,在元素内部的前面创建一个假的子元素

元素：after，在元素内部的后面创建一个假的子元素

案例1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            .d1:before{
                content: "0";
                display: block;
                width: 100px;
                height: 100px;
                background: skyblue;
            }
            
            .d1:after{
                content: "4";
                display: block;
                width: 100px;
                height: 100px;
                background: skyblue;
            }
        </style>
    </head>
    <body>
        <!--伪元素before-->
        <div class="d1">
            <div class="child">1</div>
            <div class="child">2</div>
            <div class="child">3</div>
        </div>
    </body>
</html>

聊天框案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .main{
                width: 800px;
                margin: 0 auto;
            }
            .ltk{
                width:600px ;
                height: 80px;
                background: skyblue;
                color:#fff;
                line-height: 80px;
                padding: 0 20px;
                margin: 10px auto;
                border-radius: 20px;
                position: relative;
            }
            
            .ltk:before{
                /*content必须要写*/
                content: "";
                display: block;
                width: 0;
                height: 0;
                border-top:10px solid transparent ;
                border-left:15px solid transparent ;
                border-right:15px solid skyblue ;
                border-bottom:10px solid transparent ;
                position: absolute;
                
                left: -30px;
                top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="ltk">
                今晚看电影？
            </div>
            
            <div class="ltk">
                记得带身份证？
            </div>
        </div>
    </body>
</html>