登录  /  注册
博主信息
博文 9
粉丝 0
评论 0
访问量 6632
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
1.模态框 2.flex布局 3.grid属性
choa fan
原创
520人浏览过

一、模态框

效果图

代码

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

二、Grid属性

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

三、flex布局

容器的属性

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

项目的属性

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

批改状态:合格

老师批语:注意主轴并非一定就是X,主要看项目的排列方向,交叉轴恒垂直于主轴
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学