网页编程

<html>
<title>飞驰的火车</title>

<body>
<h1>飞驰的火车</h1>
<img src='img/AI-001.png'>
<br>
<a href='../班级萌宠/班级萌宠.html'>班级萌宠</a>
<p id="demo">点击按钮改变颜色</p>
<button onclick="changeColor()">点击我</button>
</body>

</html>

body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

h1 {
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

#demo {
  font-size: 18px;
  color: white;
}

button {
  padding: 12px 24px;
  font-size: 16px;
  background: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.2s;
}

button:hover {
  transform: scale(1.05);
}

function changeColor() {
  const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'];
  const randomColor = colors[Math.floor(Math.random() * colors.length)];
  document.getElementById('demo').style.color = randomColor;
}

console.log('欢迎使用CodeLearn编程工具！');