从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>
展示:
