留言板功能css美化

图片

留言

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>留言板</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  15.       li {
  16.         list-style: none;
  17.       }
  18.       a {
  19.         text-decoration: none;
  20.       }
  21.       body {
  22.         margin: auto;
  23.       }
  25.       .box {
  26.         width: 100vw;
  27.         display: grid;
  28.         grid-template-rows: 60px 100px 1fr;
  29.       }
  30.       .box .title {
  31.         height: 50px;
  32.         border-bottom: 1px solid #333;
  33.       }
  35.       .box .content input:hover {
  36.         box-shadow: 2px 2px 10px #06c;
  37.       }
  39.       .box .content {
  40.         display: grid;
  41.         grid-template-rows: 1fr 33px;
  42.       }
  43.       .box .content button {
  44.         width: 70px;
  45.         height: 32px;
  46.         line-height: 32px;
  47.         background-color: #009688;
  48.         color: #fff;
  49.         white-space: nowrap;
  50.         text-align: center;
  51.         font-size: 14px;
  52.         border: none;
  53.         border-radius: 2px;
  55.         margin-top: 10px;
  56.         place-self: start end;
  57.       }
  58.       .box .list {
  59.         margin-top: 20px;
  60.       }
  61.       .box .list li {
  62.         display: grid;
  63.         grid-template-columns: 1fr 50px;
  64.         place-content: space-between;
  65.       }
  66.       .box .list li {
  67.         padding: 3px 0;
  68.         background-color: #f4f4f4;
  69.         border-bottom: 1px solid #333;
  70.       }
  71.       .box .list li button {
  72.         background-color: orangered;
  73.         color: #fff;
  74.         white-space: nowrap;
  75.         text-align: center;
  76.         font-size: 14px;
  77.         border: none;
  78.         border-radius: 2px;
  79.       }
  80.       .box .list li button:hover {
  81.         box-shadow: 0px 0px 10px red;
  82.       }
  83.     </style>
  84.   </head>
  85.   <body>
  86.     <hr />
  88.     <div class="box">
  89.       <h1 class="title">留言板</h1>
  90.       <div class="content">
  91.         <textarea
  92.           name=""
  93.           class="ele"
  94.           cols="30"
  95.           rows="4"
  96.           placeholder="内容不能为空"
  97.           autofocus
  98.         ></textarea>
  99.         <button onclick="addMsg()">立即提交</button>
  100.       </div>
  102.       <ul class="list"></ul>
  103.     </div>
  104.     <script>
  105.       function addMsg() {
  106.         let ele = document.querySelector(".ele");
  108.         if (ele.value.trim().length === 0) {
  109.           alert("留言不能为空");
  110.           ele.focus();
  111.           return false;
  112.         }
  114.         const ul = document.querySelector(".list");
  115.         const li = document.createElement("li");
  117.         li_length = ul.children.length + 1;
  119.         li.innerHTML =
  120.           li_length +
  121.           "楼： " +
  122.           ele.value +
  123.           '<button onclick="del(this.parentNode);">删除</button>';
  125.         // console.log(li_length);
  127.         ul.insertAdjacentElement("afterBegin", li);
  129.         ele.value = null;
  130.         ele.focus();
  131.       }
  133.       function del(ele) {
  134.         if (confirm("是否删除")) {
  135.           ele.remove();
  136.         } else {
  137.           return false;
  138.         }
  139.       }
  140.     </script>
  141.   </body>
  142. </html>

更多相关文章

  1. 留言板功能
  2. 留言板与自动客服
  3. javascript-基础（四）实战
  4. Dom实战：留言板
  5. 留言板及自动客服回复功能的实例演示
  6. 留言板实践代码
  7. JS留言板实践
  8. php PHP实现基本留言板功能原理与步骤详解
  9. 一个简单的留言板

随机推荐

  1. 将ffmpeg编译到android 源码
  2. Android中Context到底是什么以及用法
  3. 各Android版本WifiStateMachine状态机
  4. android 防止键盘弹出的简单方法
  5. Monkey
  6. Android 屏幕常亮
  7. android indication
  8. Android中实现Gallery 点击放大
  9. Android UI开发第十七篇――Android Frag
  10. Android 深入研究LBS（基于位置的服务）