Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 留言板案例,添加CSS美化
Blogger Information
Blog 21
fans 0
comment 0
visits 10041
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美化
放手去爱
Original
475 people have browsed it

留言板练习

  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>todoList: 留言板</title>
  8.   </head>
  9.   <style>
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.       box-sizing: border-box;
  14.     }
  15.     html {
  16.       font: size 100px;
  17.     }
  18.     input {
  19.       margin: 5px 0px 5px 25px;
  20.       padding: 5px;
  21.       width: 299px;
  22.       height: 30px;
  23.     }
  24.     input:focus {
  25.       background: #67e49f;
  26.     }
  27.     ul.list {
  28.       width: 310px;
  29.       border: 0.01px solid salmon;
  30.       border-radius: 5px;
  31.       margin-left: 20px;
  32.     }
  34.     ul.list > li {
  35.       margin: 2px 5px;
  36.       padding: 5px;
  37.       width: 300px;
  38.       height: 30px;
  39.       background: #525252;
  40.       color: #fcf8f8;
  41.       border-radius: 5px;
  42.       vertical-align: middle;
  43.     }
  44.     ul.list > li:hover {
  45.       width: 300px;
  46.       height: 30px;
  47.       background: #cf6b6b;
  48.       color: #fcf8f8;
  49.       border-radius: 5px;
  50.       vertical-align: middle;
  51.     }
  52.     ul.list > li button {
  53.       float: right;
  54.       width: 60px;
  55.       background: #525252;
  56.       border-radius: 5px;
  57.       color: #fcf8f8;
  58.     }
  59.     ul.list > li button:hover {
  60.       float: right;
  61.       width: 60px;
  62.       background: #67e49f;
  63.       border-radius: 5px;
  64.       color: #fcf8f8;
  65.     }
  66.   </style>
  67.   <body>
  68.     <input
  69.       type="text"
  70.       onkeydown="insertComment(this)"
  71.       placeholder="请输入留言"
  72.       autofocus
  73.     />
  74.     <ul class="list">
  75.       <!-- 其实每一条新留言,应该添加到ul的起始标签的后面: afterbegin -->
  76.     </ul>
  78.     <script>
  79.       const insertComment = function (ele) {
  80.         // 只有按下回车键才提交
  81.         if (event.key === "Enter") {
  82.           // 1. 非空判断
  83.           if (ele.value.length === 0) {
  84.             // 提示用户
  85.             alert("留言不能为空");
  86.             // 重置焦点
  87.             ele.focus();
  88.             // 直接返回
  89.             return false;
  90.           }
  92.           // 2. 添加留言
  93.           const ul = document.querySelector(".list");
  94.           ele.value += `<button onclick="del(this.parentNode)">删除</button>`;
  95.           ul.insertAdjacentHTML("afterbegin", `<li>${ele.value}</li>`);
  97.           // 3. 清空输入框
  98.           ele.value = null;
  99.         }
  100.       };
  102.       // 删除
  103.       const del = function (ele) {
  104.         return confirm("是否删除?") ? (ele.outerHTML = null) : false;
  105.       };
  106.     </script>
  107.   </body>
  108. </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