简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >模态框基础

模态框基础

千里马遇伯乐
千里马遇伯乐原创
2022年03月24日 13:09:29788浏览

模态框css部分

  1. <style type="text/css">
  2.             * {
  3.                 margin: 0px;
  4.                 padding: 0px;
  5.                 box-sizing: border-box;
  6.             }
  8.             .box1 {
  9.                 width: 100%;
  10.                 height: 60px;
  11.                 background: brown;
  12.                 color: white;
  13.                 padding: 8px 16px;
  15.             }
  17.             .box1 h1 {
  19.                 padding-top: 15px;
  20.                 font-size: 25px;
  21.                 text-align: center;
  22.                 letter-spacing:10px;
  24.             }
  26.             .box1 button {
  27.                 position: fixed;
  28.                 right: 0;
  29.             }
  31.             /* .box2{
  32.                 display: none;
  33.             } */
  34.             .box2 input{
  35.                 width: 220px;
  36.                 height: 27px;
  37.                 border: 1px solid blue;
  38.                 border-radius: 5px;
  39.                 margin-left: 70px;
  40.             }
  42.             .btu {
  43.                 width: 220px;
  44.                 height: 26px;
  45.                 /* 去掉边框 */
  46.                 border: none;
  47.                 /* 设置圆角 */
  48.                 border-radius: 5px;
  49.                 background: seagreen;
  50.                 color: white;
  51.                 /* 外边距向左侧移动 */
  52.                 margin-left: 100px;
  53.                 margin-top: 15px;
  54.                 margin-bottom: 15px;
  55.             }
  57.             /* 模态框 */
  58.             .box2 fieldset {
  59.                 border-radius: 5px;
  60.                 border: none;
  61.                 width: 400px;
  62.                 height:300px ;
  63.                 background: rgb(243, 244, 245);
  64.                  /* 固定定位  */
  65.                  position: fixed;
  66.                 top: 200px;
  67.                 left: 600px;
  68.                 /* 模态框居中 */
  69.                 vertical-align:middle;
  71.             }
  72.             /* <!-- 半透明框 --> */
  73.             .box3 {
  74.                 /* 固定定位 */
  75.                 position: fixed;
  76.                 /* 定位四个角  全部清零  */
  77.                 top: 0;
  78.                 left: 0;
  79.                 right: 0;
  80.                 bottom: 0;
  81.                 background-color:#042d53;
  82.                 /* 半透明 */
  83.                 opacity: 0.5;
  85.             }
  86.             .box2 p {
  87.              font-weight: 100%;
  88.              font-size: 20px;
  89.                 color: #1b0212;
  90.                 background-color: chartreuse;
  91.                 text-align: center;
  92.                 font: 2em sans-serif;
  93.             }
  96.             .box4 input {
  97.                 background-color: rgb(241, 243, 241);
  98.                 margin-top: 15px;
  99.                 /* 输入框居中 */
  100.                 vertical-align:middle;
  101.                 margin-left: 100px;
  102.             }
  103.         </style>

模态框HTML部分

  1. <body >
  2.             <div class="box1">
  3.                 <h1>后台管理系统</h1>
  4.                 <button>登录</button>
  5.             </div>
  6.             <!-- 模态框 -->
  7.             <div class="box2">
  8.                 <!-- 半透明框 -->
  9.                 <div class="box3"></div>
  10.                 <form ction="">
  11.                     <fieldset>
  12.                         <div class="box4">
  13.                             <p>登录到后台管理系统</p><br>
  14.                             <input type="tetx" name="username" placeholder="用户名" /><br>
  15.                             <input type="password" name="password" placeholder="密码"><br>
  16.                             <button class="btu">登录</button>
  17.                             </div>
  18.                         </di>
  19.                     </fieldset>
  21.                 </form>
  23.         </body>

上一条：虚拟站点创建步骤下一条：模态框案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多