web前端：8_flex布局

weixin_45906368

已于 2023-07-13 11:51:16 修改

阅读量103

点赞数

文章标签：前端

于 2023-07-12 16:56:42 首次发布

本文链接：https://blog.csdn.net/weixin_45906368/article/details/131683739

版权

1，flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>Document</title>
   <style>

    .box{
        /* flex布局 默认先从左到右，再从上到下 */
        display: flex;  

        /* 主轴方向 */
        /*  1，行，从左往右。默认 */
       /* flex-direction: row;  */
       /* 2， 列，从上往下  */
        /* flex-direction: column;  */
        /* 3，列反转，从下往上*/
        /* flex-direction: column-reverse;   */
        /*  4，行反转，从右往左 */
        /* flex-direction: row-reverse; */


        /* 主轴对齐方式 */
        /* 1，终点对齐 */
        /* justify-content: flex-end; */
        /* 2，均分布局 */
        /* justify-content: space-around; */
        /* 3,两端布局 */
        /* justify-content: space-between; */



        /* 副轴对齐方式 */
        /* 1,居中对齐 */
        /* align-items: center; */
        /* 2，靠轴尾对齐 */
        /* align-items: flex-end; */

        /* wrap换行 */
        /* flex-wrap: wrap;  不换行的划 flex会自动调节盒子大小适应父盒子大小 */



        width: 500px;
        height: 500px;
        background-color: #096;
    }

    .box div{   /*选中box属性下的div标签*/
        width: 200px;
        height: 200px;
        background-color: red;
        order: 3;
    }

    .box div:nth-child(2){
        background-color: pink;
        order: 8;
    }

    .box div:nth-child(3){
        background-color: purple;
        order: 1;  /*order 可调节子盒子顺序  数越小排越前*/
    }

   </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

2，背景切换项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        body{
            /* image 图片路径  repeat 是否重复  0 0 position图片位置  cover size图片缩放 */
            background:url(img/6.jpg) no-repeat  0  0/cover;
        }

        ul,li{
            list-style: none;
        }

        .album{
            display: flex;
            height: 250px;
            background-color: rgba(0,0,0,.3);   /* .3 透明度设置*/
            justify-content: space-around;  /*主轴均分布局*/
            align-items: center;        /*副轴居中，上下对齐*/
        }

        .album img{
            width: 200px;
            height: 150px;
        }
    </style>
  
</head>
<body>
    <ul class="album">
        <li> <img src="img/1.jpg" alt=""></li>
        <li> <img src="img/2.jpg" alt=""></li>
        <li> <img src="img/3.jpg" alt=""></li>
        <li> <img src="img/4.png" alt=""></li>
        <li> <img src="img/5.jpg" alt=""></li>
    </ul>
    
</body>
</html>

3,消息轰炸器

"""
项目名称：消息轰炸器
项目描述：通过win32api实现对qq窗口，发送多条消息实现轰炸
项目环境：vscode &&  pywin32
作者所属： zxr
"""
#工具
import win32gui as gui  #gui图形用户界面  窗口程序
import win32con as con  #control 控制

#1，找到要发送的人（聊天窗口）
#怎么找窗口：1，特征（一般不知道，所以可以不写）  2，名字（窗口名）
#找窗口（特征，名字） 通过名字找到一个窗口，并获取它的把柄  窗口句柄
handle = gui.FindWindow(0,'小时')
for i in range(20):
    #2，准备发送的内容
    #gui.SendMessage(窗口，指令)  n给一个窗口发送一个指令
    # con.WM_PASTE 黏贴操作  找到小时这个窗口，给它发送一个黏贴指令
    gui.SendMessage(handle,con.WM_PASTE)


    #3,回车发送
    # con.WM_KEYDOWN 按下一个按键   con.VK_RETURN 回车键
    gui.SendMessage(handle,con.WM_KEYDOWN,con.VK_RETURN)