Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS美化留言板案例
Blogger Information
Blog 28
fans 0
comment 0
visits 12964
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
CSS美化留言板案例
手机用户1594223549
Original
663 people have browsed it

一.CSS美化留言板

1.输出结果

2.代码部分

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>CSS美化留言板</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         body {
  15.             background-color: lightblue;
  16.             max-height: 1120em;
  17.             max-width: 1170px;
  18.             margin: 0 auto;
  19.             padding: 0 30px;
  20.         }
  22.         h3 {
  23.             margin: 20px 10px;
  24.             text-align: center;
  25.         }
  27.         input {
  28.             display: block;
  29.             width: 100%;
  30.             min-height: 200px;
  31.             margin-bottom: 20px;
  32.             padding: 5px 10px 250px;
  34.         }
  36.         .list > li {
  37.             display: flex;
  38.             place-content: space-between;
  39.             background-color: lightcoral;
  40.             line-height: 36px;
  41.             margin-bottom: 5px;
  42.             border-radius: 3px;
  43.             padding: 0 10px;
  44.         }
  45.         .list > li > button {
  46.             border-radius: 5px;
  47.             margin: 5px 0;
  48.             border: 1px;
  49.             width: 40px;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <h3>留言板</h3>
  55.     <input type="text" onkeydown="insertComment(this)" placeholder="请输入您的留言" autofocus/>
  56.     <ul class="list"></ul>
  57. </body>
  58. <script>
  59.     const insertComment = function (ele) {
  60.         if (event.key === 'Enter') {
  61.         // 1. 非空判断 event指事件对象
  62.         if (ele.value.length === 0) {
  63.             alert('留言不能为空')
  64.             // 重置焦点
  65.             ele.focus();
  66.             // 直接返回
  67.             return false;   
  68.         }
  70.         // 2. 添加留言
  71.         const ul = document.querySelector('.list');
  72.         ele.value += `<button onclick="del(this.parentNode)">删除</button>`;
  73.         ul.insertAdjacentHTML('afterbegin', `<li>${ele.value}</li>`);
  75.         // 3. 清空输入框
  76.         ele.value = null;
  78.       }
  79.     };
  81.     // 删除
  82.     const del = function(ele) {
  83.         return confirm('是否删除？') ? (ele.outerHTML = null) : false;
  84.     };
  85. </script>
  86. </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