【接上篇】二、Flask学习之CSS(下篇)

时间:2024-01-25 10:40:21

上篇:二、Flask学习之CSS

3.8hover

hover是用来美化鼠标悬停的效果的,当鼠标停放在某个区域,就会执行对应的hover操作。可以操作本标签的内容,也可以操作本标签下某一个标签的内容

3.9after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style>
        .name1:after{
            content: "潘达";
        }
    </style>
</head>
<body>
    <div class="name1">panda</div>
    <div class="name1">Hello</div>
</body>
</html>

after是用来在某个标签的最后添加某些东西:

image-20240120163504702

3.10position

  • fixed
  • relative
  • absolute
  1. fixed(固定在窗口的某个位置)

    案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo1</title>
        <style>
            .back{
                position: fixed;
                height: 60px;
                width: 60px;
                border: 3px solid orange;
                bottom: 40px;/*距离底部40px*/
                right: 0;/*距离右部40px*/
            }
        </style>
    </head>
    <body>
        <div class="back">panda</div>
    </body>
    </html>
    
  2. relative和absolute

    一个标签相对于另一个标签的位置

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo1</title>
        <style>
            .name1{
                position: relative;
                height: 300px;
                width: 600px;
                border: 3px solid orange;
                top: 40px;
                left: 50px;
            }
            .name1 .name2{
                position: absolute;
                height: 30px;
                width: 60px;
                border: 3px solid blue;
                top: 40px;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <div class="name1">
                <div class="name2"></div>
        </div>
    </body>
    </html>
    

    效果:

    image-20240120165530446

3.11border

border是上下左右都加边框,board-left是左边框,board-right是右边框以此类推
transparent是透明色