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

上篇:二、Flask学习之CSS

3.8hover

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

3.9after

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1title>
    <style>
        .name1:after{
            content: "潘达";
        }
    style>
head>
<body>
    <div class="name1">pandadiv>
    <div class="name1">Hellodiv>
body>
html>

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

image-20240120163504702

3.10position

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

    案例:

    
    
    
        
        demo1
        
    
    
        
    panda
  2. relative和absolute

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

    
    
    
        
        demo1
        
    
    
        

    效果:

    【接上篇】二、Flask学习之CSS(下篇)_第1张图片

3.11border

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

你可能感兴趣的:(学习笔记,python,Web开发,flask,学习,css)