制作一个兴趣爱好介绍并带有背景图片的html网页代码
时间: 2023-12-09 22:56:32 浏览: 54
好的,以下是一个简单的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的兴趣爱好</title>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: #fff;
text-shadow: 2px 2px #000;
}
p {
color: #fff;
font-size: 18px;
margin-top: 20px;
}
ul {
list-style: none;
margin-top: 30px;
padding-left: 0;
text-align: center;
}
li {
display: inline-block;
margin-right: 20px;
}
img {
border-radius: 50%;
width: 200px;
height: 200px;
border: 5px solid #fff;
}
</style>
</head>
<body>
<h1>我的兴趣爱好</h1>
<p>我喜欢运动、旅游和摄影,下面是一些我喜欢的活动:</p>
<ul>
<li>
<img src="sport.jpg" alt="运动">
<p>跑步</p>
</li>
<li>
<img src="travel.jpg" alt="旅游">
<p>旅游</p>
</li>
<li>
<img src="photography.jpg" alt="摄影">
<p>摄影</p>
</li>
</ul>
</body>
</html>
```
这个代码会创建一个带有背景图片的网页,展示一些我喜欢的兴趣爱好,包括跑步、旅游和摄影。注意,你需要将代码中的图片文件(如background.jpg、sport.jpg等)替换为你自己的图片文件。