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

上篇:二、Flask学习之CSS

3.8hover

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

3.9after

html 复制代码
<!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
  1. fixed(固定在窗口的某个位置)

    案例:

    HTML 复制代码
    <!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

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

    HTML 复制代码
    <!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是透明色

相关推荐
知识分享小能手4 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
茯苓gao7 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾7 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
DKPT8 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
aaaweiaaaaaa8 小时前
HTML和CSS学习
前端·css·学习·html
xcnn_8 小时前
前端入门——案例一:登录界面设计(html+css+js)
前端·css·html
ST.J8 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
看海天一色听风起雨落9 小时前
Python学习之装饰器
开发语言·python·学习
speop10 小时前
llm的一点学习笔记
笔记·学习
非凡ghost10 小时前
FxSound:提升音频体验,让音乐更动听
前端·学习·音视频·生活·软件需求