从0开始写一个网页(网页反馈篇)

先导入之前的背景和导航栏:

然后先做一个反馈的文本框:

<form>
                <p><h1>反馈:</h1></p>
                <p><textarea id="send_wall" cols="45" rows="5"></textarea></p>
                <p>
                    <img src="bgbox/submit.png" id="submit_button" @click="submit()" onmousedown="this.style.backgroundImage=url(bgbox/submit_down.png)" onmouseup="this.style.backgroundImage=url(bgbox/submit.png)">
                </p>
            </form>

css:

#talkwall{
            width:700px;
            height:500px;
            overflow-y:auto;
        }
        #Dividing{
            width:700px;
            height: 10px;
            margin-left: 10px;
        }
        #send{
            width:700px;
            height:290px;
            margin-left: 25px;
        }
        #send_wall{
            margin-top: -10px;
            font-size:25px
        }
        #submit_button{
            margin-top: -15px;
        }

展示:

加个好看的月亮:

<div id="moon">
        <img src="bgbox/moon.png" style="width: 300px;height: 300px;margin-top: -150px;margin-left: 100px;">
    </div>
#moon{
            width: 100px;
            height:100px;
        }

展示: 加入反馈板:

<div id="talkwall">
            <div id="talkwall_first">
                <li v-for="(item,i) in list" :key="item.wall" @click="del(i)">  
                    {
         
  { item.wall }}
                </li>
            </div>
        </div>
<script>
        var body = new Vue({
           
    
            el:"#body",
            data:{
           
    
                wall:,
                list:[
                    {
           
    wall:加油,打工人}
                ]
            },
            methods:{
           
    
                submit(){
           
    
                    var word = {
           
    wall:this.wall}
                    this.list.push(word)
                },
                del(i){
           
    
                    this.list.splice(i,1)
                }
            }
        })
    </script>

展示:

经验分享 程序员 微信小程序 职场和发展