Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 简单留言板练习
Blogger Information
Blog 17
fans 0
comment 0
visits 8215
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
415 people have browsed it

登录页面

  1. <!DOCTYPE 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>登录表单</title>
  7.     <style>
  8.         body{
  9.             /* 将浏览器的视口改变为 灰色 */
  10.             background-color:silver
  11.         }
  12.             .form{
  13.                 /* 设置为固定定位 */
  14.                 position: fixed;
  15.                 top: 15rem;
  16.                 left: 28rem; 
  17.                 background-color: skyblue;
  18.                 border-radius: .3rem;
  19.                 width: 300px;
  20.                 height: 130px;
  22.             }
  23.           .form .form-title{
  24.                 /* //设置为网格容器,三行1列,水平和垂直居中 */
  25.                 display: grid;
  26.                 grid-template-rows: repeat(3,1fr);
  27.                 place-items: center;
  28.                 outline: none;
  29.             }
  30.             .form .form-title legend{
  31.                 margin: auto 0;
  32.                 outline: none;
  33.                 /* 文本居中 */
  34.                 text-align: center;
  35.                 outline: solid skyblue;
  36.                 font-weight: bold;
  37.             }
  38.            .form .form-title .item{
  39.                 margin-bottom: .3rem;
  40.             }
  42.             .form .form-title .item input:hover{
  43.                 /* //鼠标移动到input控件中,改变样式 */
  44.                box-shadow: .1rem .1rem .1rem skyblue;
  45.                 outline: none;
  46.             }
  47.             .form .form-title .item input{
  48.                 border-radius: .2rem;
  49.             }
  51.             .form .form-title .item button{
  52.                 border-radius: .2rem;
  53.                 padding: 0 .6rem;
  55.             }
  56.             .form .form-title .item a{
  57.                 /* 下划线取消 */
  58.                 text-decoration: none; 
  59.                 border-radius: .2rem;
  60.                 padding: 0 .6rem .3rem;
  61.                 background-color: cadetblue;
  63.             }
  64.             .form .form-title .item a:hover{
  65.                 font-weight: bold;
  66.             }
  67.     </style>
  68. </head>
  69. <body>
  70.         <form action="php" method="POST" class="form">
  71.             <fieldset  class="form-title">
  72.                 <legend>请登录</legend>
  73.                 <div class="item">
  74.                         <label for="username">用户名:</label>
  75.                         <input type="text" name="username" id="username"  required placeholder="请输入用户名"  >
  76.                 </div>
  77.                 <div class="item">
  78.                      <label for="">email:&nbsp;</label>
  79.                     <input type="email" name="useremail" id="useremail" required placeholder="请输入邮箱" >
  80.                 </div>
  81.                <div class="item">
  82.                    <a href="#" onclick="add()">登录</a>
  83.                </div>
  87.             </fieldset>
  88.         </form>
  89. </body>
  90. <script>
  92.         function add(){
  93.             const username=document.querySelector("#username").value;
  94.             const useremail=document.querySelector("#useremail").value;
  95.             if(username!='123123' && useremail!="123123@qq.com"){
  96.                         alert("用户名或邮箱错误");
  97.                         return false;
  98.             }
  99.             window.location.href="dome4.html";
  109.         }
  111. </script>
  112. </html>

点击登录跳转到留言页面

留言板

  1. <!DOCTYPE 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>Document</title>
  7. </head>
  8. <style>
  9.     body{
  10.         background-color: silver;
  11.     }
  12.     .main{
  13.         width: 300px;
  14.         /* 固定定位 */
  15.         position: fixed;
  16.         top: 5rem;
  17.         left: 27rem;
  18.         background-color: white;
  19.         border-radius: .3rem;
  20.         display: grid;
  21.         grid-template-rows: repeat(2,1fr);
  22.         place-items: center;
  23.     }
  24.     .main .LeaveWord{
  25.             width: 200px;
  26.             margin-top: .2rem;
  27.             border:.1rem solid cadetblue;
  28.             border-radius: .1rem;
  30.     }
  32.     a{
  33.             margin-left: 1rem;
  34.         text-decoration: none;
  35.         padding: 0 .1rem;
  36.         background-color: skyblue;
  37.     }
  38.     li{
  39.         padding-right: 11rem;
  40.         list-style: none;
  41.     }
  42. </style>
  43. <body>
  44.         <div class="main">
  45.                 <input type="text" name="" id="" class="LeaveWord" placeholder="请输入留言" onkeydown="tianjia(event)">
  47.                 <ul class="list"></ul>
  53.         </div>
  54. </body>
  55. <script>
  56.         function tianjia(event){
  57.             //当按下的按键等于回车键是进入判断体
  58.             if(event.key=='Enter'){
  59.                 //获取输入框的值
  60.                 const inp=document.querySelector('input');
  61.                 const value=inp.value;
  62.                 // 创建 li元素
  63.                 const li=document.createElement('li');
  64.                 //将输入框的值赋给li,并加一个删除按钮
  65.                 li.innerHTML=value+"<a href=\"#\" onclick=\"del(this.parentNode)\" >删除</a>";
  66.                 //获取ul节点
  67.                 const ul=document.querySelector('.list');
  68.                 ul.insertAdjacentElement("afterbegin",li);
  69.                 inp.value=null;
  72.             }
  73.         }
  74.         function del(element){
  75.             console.log(element);
  76.             //删除当前元素的父节点
  77.             element.remove();
  79.         }
  81. </script>
  82. </html>

留言板页面效果

Correcting teacher：PHPzPHPz

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
0 comments
Author's latest blog post