【接上篇】二、Flask学习之CSS（下篇）

发布时间：2024年01月20日

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是用来在某个标签的最后添加某些东西：

3.10position

fixed
relative
absolute

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>

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>

效果：

3.11border

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

文章来源:https://blog.csdn.net/m0_62627216/article/details/135718607
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！