<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>蚂省大学校园文化网</title>
<link rel="stylesheet" href="体育.css" >
</head>
<body>
<script src="JS/index.js"></script>
<div class='ribbon'>
<a href='home.html'><span>¤Home</span></a>
<a href='校园生活.html'><span>☀校园生活</span></a>
<a href='校园美食.html'><span>☺校园美食</span></a>
<a href='体育.html'><span>●体育</span></a>
<a href='活动资讯.html'><span>✉活动|资讯</span></a>
<a href='Login.html'><span>☜登录|注册</span></a>
</div>
<div class="wrap">
<div class="logo">
<img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/958/体育logo.png" alt="" class="cartoon_0" >
</div>
<div class="banner">
<div class="desc">
<div class="name">
<h1>体育</h1><br>
<div class="line"></div><br>
<p>健康 | 热爱 | 自信</p><br>
</div>
<p>将喜欢的一切留在身边，这便是努力的意义。
</p>
</div>
</div>
<div class="content">
<!-- 百叶窗部分 过渡动画-->
<ul class="box">
<li>
<img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/958/20221130095640.png"alt="">
<div class="text">
校园风采
</div>
</li>
<li>
<img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/958/20221130095714.png" alt="">
<li>
<img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/958/20221130095752.png" alt="">
</li>
</li>
<li>
<img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/958/体育百叶窗4.png" alt="">
</li>
<li>
<img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/958/体育百叶窗5.png" alt="">
</li>
<li>
<img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/958/体育百叶窗6.png" alt="">
</li>
</ul>
</div>
<!-- 留言板部分 -->
<div class="message">
<div class="message_content">
<div class="left">
<div class="ta">
<textarea class="text" name="text" id="text" cols="100" rows="100" placeholder="给我们留言吧！！！"></textarea>
</div>
<div class="anniu">
<button class="btn" name="btn">发布</button>
<button id="delete">删除</button>
</div>
</div>
<div class="right">
<div class="right-con">
<ul id="ul" class="ul">
</ul>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<div id="footer" class="mycolor">
<p>Like what you see? </p><br>
<p>Then give us a call and we'll chat through what</p><br>
<p>you need.We've got tea,coffee and biscuits!</p><br>
<p>欢迎光临蚂省大学校园文化网</p>
</div>
</div>
<script>
var btn=document.querySelector('button');
var text=document.querySelector('textarea');
// var ul=document.querySelector('ul');
var ul=document.getElementById('ul');
btn.onclick=function(){
if (text.value==''){
alert('您没输入内容');
return false;//终止操作
}
else{
var li=document.createElement('li');
li.innerHTML=text.value;
ul.insertBefore(li,ul.children[0]);
}
}
// 删除留言
// var ul2=document.querySelector('ul');
// var btn=document.querySelector('button');
var btnt=document.getElementById('delete');
btnt.onclick=function(){
if(ul.children.length==0){
this.disabled=true;
}
else{
ul.removeChild(ul.children[0]);
}
}
</script>
</body>
</html>
