Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 一个简单的模态框
Blogger Information
Blog 13
fans 0
comment 0
visits 10460
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
一个简单的模态框
微光
Original
695 people have browsed it

1、效果展示

2、html代码

  1. <body>
  2.     <!-- 页眉 -->
  3.     <header>
  4.       <div class="logo">
  5.         <a href="">PHP中文网</a>
  6.       </div>
  7.       <div class="logo">
  8.         <a href="">登陆</a>
  9.       </div>
  10.     </header>
  11.     <!-- 模态框 -->
  12.     <div class="container">
  13.       <!-- 蒙版 -->
  14.       <div class="moban"></div>
  15.       <!-- 用户表单 -->
  16.       <div class="biaodan">
  17.         <h3>用户登录</h3>
  18.         <button>关闭</button>
  19.         <form action="">
  20.           <label for="username">用户名：</label>
  21.           <input type="text" id="username" name="username" />
  22.           <label for="passwd">密码：</label>
  23.           <input type="text" id="passwd" name="passwd" />
  24.           <label for="xueli">学历：</label>
  25.           <select name="xueli" id="xueli">
  26.             <option value="1">高中</option>
  27.             <option value="2" selected>大专</option>
  28.             <option value="3">本科</option>
  29.             <option value="4">硕士</option>
  30.             <option value="5">博士</option>
  31.           </select>
  32.           <button>登陆</button>
  33.         </form>
  34.       </div>
  35.     </div>
  36.   </body>

3、css代码

  1.      <style>
  2.       * {
  3.         margin: 0;
  4.         padding: 0;
  5.         box-sizing: border-box;
  6.       }
  7.       a {
  8.         text-decoration: none;
  9.         color: #ffffff;
  10.       }
  11.       /* 导航 */
  12.       header {
  13.         width: 100vw;
  14.         height: 3em;
  15.         padding: 1.5em;
  17.         font-size: 1.2rem;
  18.         background: linear-gradient(to right, cornflowerblue 50%, green 90%);
  19.         display: flex;
  20.         justify-content: space-between;
  21.         align-items: center;
  22.       }
  23.       /* 模态框 */
  24.       .moban {
  25.         position: fixed;
  26.         top: 0;
  27.         left: 0;
  28.         right: 0;
  29.         bottom: 0;
  30.         background-color: #000000;
  31.         opacity: 0.5;
  32.       }
  33.       .biaodan {
  34.         min-width: 20em;
  35.         background: cornflowerblue;
  36.         padding: 1em;
  37.         border-radius: 5%;
  38.         position: fixed;
  39.         top: 10em;
  40.         left: 35%;
  41.         right: 35%;
  42.       }
  43.       .biaodan > form {
  44.         display: grid;
  45.         grid-template-columns: 4em 1fr;
  46.         gap: 1em;
  47.         padding: 1.2em;
  48.       }
  49.       .biaodan > form > button {
  50.         grid-column: span 2;
  51.         height: 3em;
  52.         border-radius: 1em;
  53.       }
  54.       .biaodan > button {
  55.         position: absolute;
  56.         top: 1.3em;
  57.         right: 2em;
  58.       }
  59.       .container {
  60.         /* display: none; */
  61.       }
  62.     </style>
Correcting teacher：灭绝师太灭绝师太

Correction status：qualified

Teacher's comments：
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
1 comments
灭绝师太 2020-11-27 15:22:05
页面做的炫酷, 不用php做前后端交互,可惜了了.
1 floor
Author's latest blog post