Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 1.模态框 2.flex布局 3.grid属性
Blogger Information
Blog 9
fans 0
comment 0
visits 7058
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1.模态框 2.flex布局 3.grid属性
choa fan
Original
567 people have browsed it

一、模态框

效果图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>模态框</title>
  9.     <style>
  10.         * {
  11.             padding: 0;
  12.             margin: 0;
  13.             /* 文字禁止选中 */
  14.             user-select: none;
  15.             box-sizing: border-box;
  16.         }
  18.         body {
  19.             display: flex;
  20.             justify-content: center;
  21.             align-items: center;
  22.             height: 100vh;
  23.         }
  25.         button {
  26.             outline: 0;
  27.             width: 100px;
  28.             height: 40px;
  29.             color: #13a5aa;
  30.             border-radius: 4px;
  31.             border: 1px solid rgb(43, 238, 205);
  32.             background-color: #c9fdff;
  33.             transition: all 0.3s;
  34.             cursor: pointer;
  35.         }
  37.         button:hover {
  38.             color: #fff;
  39.             border-color: #05f2fa;
  40.             background-color: #09e5ec;
  41.         }
  43.         .model-box {
  44.             display: none;
  45.             position: absolute;
  46.             top: 0;
  47.             left: 0;
  48.             width: 100%;
  49.             height: 100vh;
  50.             background-color: rgba(0, 0, 0, 0.45);
  51.         }
  53.         .content {
  54.             display: none;
  55.             position: absolute;
  56.             top: 100px;
  57.             left: calc(50% - 210px);
  58.             width: 420px;
  59.             height: 350px;
  60.             border-radius: 5px;
  61.             padding: 0 20px;
  62.             box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  63.             background-color: #fff;
  64.         }
  66.         .content .title {
  67.             display: flex;
  68.             justify-content: space-between;
  69.             height: 60px;
  70.             line-height: 60px;
  71.         }
  73.         .content .title span {
  74.             font-size: 18px;
  75.             color: #333;
  76.         }
  78.         .content .title i {
  79.             font-style: normal;
  80.             font-size: 24px;
  81.             color: #909399;
  82.             cursor: pointer;
  83.         }
  85.         .content .title i:hover {
  86.             color: #09e5ec;
  87.         }
  89.         .content form .form-input {
  90.             margin: 20px 0;
  91.         }
  93.         .content form .form-input label {
  94.             font-size: 14px;
  95.             color: #606266;
  96.             cursor: pointer;
  97.         }
  99.         .content form .form-input input {
  100.             outline: 0;
  101.             width: 100%;
  102.             height: 42px;
  103.             padding: 0 15px;
  104.             margin-top: 20px;
  105.             border: 1px solid #dcdfe6;
  106.             border-radius: 4px;
  107.         }
  109.         .content form .form-input button {
  110.             float: right;
  111.         }
  112.     </style>
  113. </head>
  115. <body>
  116.     <button
  117.         onclick="document.querySelector('.model-box').style.display='block';document.querySelector('.content').style.display='block'">登录</button>
  119.     <div class="model-box"
  120.         onclick="document.querySelector('.model-box').style.display='none';document.querySelector('.content').style.display='none'">
  121.     </div>
  123.     <div class="content">
  124.         <div class="title">
  125.             <span>登录弹窗</span>
  126.             <i
  127.                 onclick="document.querySelector('.model-box').style.display='none';document.querySelector('.content').style.display='none'">x</i>
  128.         </div>
  130.         <form action="">
  131.             <div class="form-input">
  132.                 <label for="username">请输入用户名</label>
  133.                 <input type="text" id="username">
  134.             </div>
  135.             <div class="form-input">
  136.                 <label for="password">请输入密码</label>
  137.                 <input type="text" id="password">
  138.             </div>
  139.             <div class="form-input">
  140.                 <button>登录</button>
  141.             </div>
  142.         </form>
  143.     </div>
  144. </body>
  146. </html>

二、Grid属性

  1. display: grid;
  3. /* 单元格宽度 */
  4. grid-template-columns: 1fr 2fr 1fr; /* 指定每列的宽度 fr(代表剩余空间) */
  5. grid-template-row: 100px 100px 100px; /* 指定每行的宽度 */
  7.  /* 单元格(item)间距 */
  8. column-gap: 24px; /* 设置列间距 */
  9. row-gap: 24px;  /* 设置行间距 */
  10. gap: 24px 24px; /* 统一设置间距 */
  12. /* 单元格对齐方式 */
  13. align-items: start | conter | end;
  14. justify-items: start | conter | end | space-between;
  16. /* 内容区相对于容器对齐方式 */
  17. align-content: start | conter | end;
  18. justify-content: start | conter | end;

三、flex布局

容器的属性

  1. display: flex;
  3. /* 决定主轴的方向（即项目的排列方向） */
  4. flex-direction: row | row-reverse | column | column-reverse;
  6. /* 决定是否换行，默认情况下，项目都排在一条线（又称"轴线"）上 */
  7.  flex-wrap: nowrap | wrap | wrap-reverse;
  9. /* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap */
  10. flex-flow: <flex-direction> || <flex-wrap>;
  12. /* 义了项目在X轴上的对齐方式 */
  13. justify-content: flex-start | flex-end | center | space-between | space-around(两侧间距相等);
  15. /* 定义项目在Y轴上如何对齐 */
  16. align-items: flex-start | flex-end | center | baseline | stretch(填充);
  18. /* 定义了多根轴线的对齐方式(多行对齐)。如果项目只有一根轴线，该属性不起作用 */
  19. align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目的属性

  1. /* 定义项目的排列顺序。数值越小，排列越靠前，默认为0 */
  2. order: <integer>;
  4. /* 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 */
  5. flex-grow: <number>; /* default 0 */
  7. /* 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 */
  8. flex-shrink: <number>; /* default 1 */
  10. /* 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小 */
  11. flex-basis: <length> | auto; /* default auto */
  13. /* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */
  15. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  16. /* align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch */
  17. align-self: auto | flex-start | flex-end | center | baseline | stretch;
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：注意主轴并非一定就是X，主要看项目的排列方向，交叉轴恒垂直于主轴
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post