html风景页面制作代码
时间: 2023-12-23 22:04:25 浏览: 183
HTML网页制作代码
5星 · 资源好评率100%
以下是一个简单的HTML风景页面制作代码,包括HTML、CSS和JavaScript:
```html
<!DOCTYPE html>
<html>
<head>
<title>风景页面</title>
<style>
body {
background-color: #87CEEB;
}
h1 {
text-align: center;
color: white;
font-size: 60px;
margin-top: 100px;
}
#image {
display: block;
margin: auto;
width: 80%;
height: auto;
margin-top: 50px;
margin-bottom: 50px;
border: 5px solid white;
box-shadow: 10px 10px 5px grey;
}
#caption {
text-align: center;
color: white;
font-size: 30px;
margin-bottom: 100px;
}
#button {
display: block;
margin: auto;
background-color: white;
color: #87CEEB;
font-size: 30px;
padding: 20px 40px;
border: none;
border-radius: 10px;
box-shadow: 5px 5px 5px grey;
cursor: pointer;
}
#button:hover {
background-color: #87CEEB;
color: white;
}
</style>
</head>
<body>
<h1>美丽的风景</h1>
<img id="image" src="https://picsum.photos/800/400" alt="风景图片">
<p id="caption">这是一张美丽的风景图片</p>
<button id="button" onclick="changeImage()">换一张</button>
<script>
function changeImage() {
document.getElementById("image").src = "https://picsum.photos/800/400?random=" + Math.floor(Math.random() * 1000);
document.getElementById("caption").innerHTML = "这是另一张美丽的风景图片";
}
</script>
</body>
</html>
```
阅读全文