• web前端float布局、flex布局

    1、float布局

    1. html>
    2. <html>
    3. <head>
    4.   <title>Login Pagetitle>
    5.   <style>
    6.     body {
    7.       font-family: Arial, sans-serif;
    8.       background-color: #f3f3f3;
    9.     }
    10.     
    11.     .container {
    12.       max-width: 400px;
    13.       margin: 0 auto;
    14.       padding: 40px;
    15.       background-color: #fff;
    16.       border-radius: 5px;
    17.       box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    18.     }
    19.     
    20.     .form-group {
    21.       margin-bottom: 20px;
    22.     }
    23.     
    24.     .form-group label {
    25.       display: block;
    26.       margin-bottom: 5px;
    27.       font-weight: bold;
    28.     }
    29.     
    30.     .form-group input {
    31.       width: 100%;
    32.       padding: 10px;
    33.       font-size: 16px;
    34.       border-radius: 5px;
    35.       border: 1px solid #ddd;
    36.     }
    37.     
    38.     .form-group button {
    39.       width: 100%;
    40.       padding: 10px;
    41.       font-size: 16px;
    42.       border-radius: 5px;
    43.       background-color: #4caf50;
    44.       color: #fff;
    45.       border: none;
    46.     }
    47.     
    48.     .form-group button:hover {
    49.       background-color: #45a049;
    50.     }
    51.   style>
    52. head>
    53. <body>
    54.   <div class="container">
    55.     <h1>Loginh1>
    56.     <form>
    57.       <div class="form-group">
    58.         <label for="username">Username:label>
    59.         <input type="text" id="username" name="username" placeholder="Enter your username">
    60.       div>
    61.       <div class="form-group">
    62.         <label for="password">Password:label>
    63.         <input type="password" id="password" name="password" placeholder="Enter your password">
    64.       div>
    65.       <div class="form-group">
    66.         <button type="submit">Loginbutton>
    67.       div>
    68.     form>
    69.   div>
    70. body>
    71. html>
    72.

    展示效果

    2、flex布局

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Flex布局页面title>
    7.     <style>
    8.         body {
    9.             margin: 0;
    10.             padding: 0;
    11.             font-family: Arial, sans-serif;
    12.         }
    13.  
    14.         .container {
    15.             display: flex;
    16.             flex-direction: column;
    17.             align-items: center;
    18.             justify-content: center;
    19.             min-height: 100vh;
    20.         }
    21.  
    22.         .header {
    23.             background-color: #3498db;
    24.             color: #fff;
    25.             padding: 20px;
    26.             text-align:
    27.  center;
    28.         }
    29.  
    30.         .content {
    31.             flex: 1;
    32.             padding: 20px;
    33.             text-align: center;
    34.         }
    35.  
    36.         .footer {
    37.             background-color: #333;
    38.             color: #fff;
    39.             padding: 10px;
    40.             text-align: center;
    41.         }
    42.     style>
    43. head>
    44. <body>
    45.     <div class="container">
    46.         <header class="header">
    47.             <h1>网页标题h1>
    48.         header>
    49.         <main class="content">
    50.             <p>这是页面的主要内容。使用Flex布局可以轻松实现垂直居中和响应式布局。p>
    51.         main>
    52.         <footer class="footer">
    53.             <p>页脚信息 © 2023p>
    54.         footer>
    55.     div>
    56. body>
    57. html>

    运行结果

  • 相关阅读:
    anr和crash文件分析，特征码提取
    vue中如何导出doc文档
    基于改进全卷积一阶检测器的桥梁裂缝定位算法
    人工智能飞速发展的今天，IT行业能做些什么？
    Java 网络编程 —— 非阻塞式编程
    jvm面试题
    C++数组
    智能机器人无法智能对话_关于智能语音机器人使用中可能出现的问题
    jmeter登陆压测的时候遇到验证码原来可以这样做
    SpringBoot【开发实用篇】---- 整合第三方技术（缓存）
  • 原文地址：https://blog.csdn.net/weixin_64662394/article/details/133191311