在今天天氣剛剛好，且非常的天時地利人和時，我的留言區竟然出現BUG了!

廢話不多說，先來看看哪裡是BUG

是我的留言竟然跑到上面去了啦!

但其實好像也沒很意外，因為上面那行選單也是用ul、li來呈現的
選單製作:【DAY04 Menu設計(上)】、【DAY05 Menu設計(下)】
現在就要來抉擇，要犧牲哪一邊了

後來選擇修改的是上面的選單，畢竟比較簡單好改嘛
把有用到ul、li的全改成div，css那邊也稍微修改:hover的部分
就成功轉化成當初預想的樣子啦
其實改起來也沒多大工程，昨天還有點緊張不知道該怎麼辦呢!

成品展示:

最終程式碼:

.html

<div class="talk">
        <p class="lyb"><b>~留言區~</b></p>
        <div class="div1">
          <p class="p">留言請按下面輸入欄</p>
          <ul>
          </ul>
        </div>
        <textarea id="wbk" placeholder="輸入留言"></textarea>
        <input id="gobtn" type="button" value="發佈留言" />
</div>
<script>
        var p = document.getElementsByClassName("p")[0];
        var ul = document.getElementsByTagName("ul")[0];
        var wbk = document.getElementById("wbk");
        var btn = document.getElementById("gobtn");
        var num = 0;
        btn.onclick = function () {
          if (wbk.value.length != 0) {
            p.style.display = "none";
            var li = document.createElement("li");
            var em = document.createElement('em');
            var a = document.createElement("a");
            var span = document.createElement("span");

            li.innerHTML = wbk.value;
            li.insertBefore(em, li.firstChild);

            a.innerHTML = "點我删除";
            a.setAttribute("href", "javascript:void(0)");
            li.appendChild(a);

            wbk.value = "";
            ul.appendChild(li);
            fn2();
          } else {
            alert("請輸入内容")
          }
        }
        function fn2() {
          var aa = document.getElementsByTagName("a");
          for (var i = 0; i < aa.length; i++) {
            aa[i].onclick = function () {
              this.parentNode.parentNode.removeChild(this.parentNode);
              fn1();
            }

          }
        }
</script>

.css

.talk {
    width: 800px;
    min-height: 300px;
    border: 5px double #3943b7;
    margin: auto;
    margin-top: 20px;
    background-color: white;
    margin-bottom: 20px;
}
.talk .lyb {
    width: 90%;
    margin: auto;
    display: block;
    padding: 5px 0px;
    font-size: larger;
    top: 10px;
    position: relative;
}
.talk .div1 {
    width: 90%;
    border: 1px solid #3943b7;
    margin: 10px auto;
    top: 10px;
    position: relative;
    min-height: 100px;
}
.talk .div1 p {
    width: 85%;
    padding: 5px 0px;
    height: 30px;
    line-height: 30px;
}
.talk .div1 ul {
    width: 100%;
    margin: auto;
}
.talk .div1 ul li {
    width: 85%;
    height: auto;
    padding: 10px;
    list-style: none;
    margin: 5px;  
}
#wbk {
    resize: none;
    width: 90%;
    margin: auto;
    height: 80px;
    display: block;
    position: relative;
    top: 10px;
}
#gobtn {
    width: 40%;
    height: 50px;
    margin: auto;
    justify-content: center;
    display: flex;
    margin-top: 20px;
    margin-bottom: 10px;
    border: 5px royalblue double;
    cursor: pointer;
    position: relative;
    background-color: rgb(177, 255, 255);
    font-size: larger;
}
.talk a {
    float: right;
    color: rgb(5, 5, 14);
}

留言區告一段落了，那還剩下四天，還有甚麼是可以加的呢?
希望我可以在明天截稿前生出題目。

以上是我開賽的第二十六天，讓我們來期待第二十七天的到來吧!
加油、加油! 倒數4天。