html自我爱好网页设计
时间: 2024-01-29 22:03:03 浏览: 34
以下是一个简单的HTML自我爱好网页设计的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的爱好</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #333333;
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
}
.hobby {
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.hobby img {
width: 100%;
max-width: 300px;
height: auto;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>我的爱好</h1>
<div class="hobby">
<ul>
<li>
<h2>摄影</h2>
<p>我喜欢用相机记录美丽的瞬间,尤其是大自然的风景和人物的表情。</p>
<img src="photography.jpg" alt="摄影">
</li>
<li>
<h2>旅行</h2>
<p>我喜欢探索不同的地方,体验不同的文化和风味。</p>
<img src="travel.jpg" alt="旅行">
</li>
<li>
<h2>阅读</h2>
<p>我喜欢阅读各种类型的书籍,尤其是小说和历史类的书。</p>
<img src="reading.jpg" alt="阅读">
</li>
</ul>
</div>
</body>
</html>
```
这个网页设计展示了三个爱好:摄影、旅行和阅读。每个爱好都有一个标题、描述和相关图片。整个网页使用了简单的HTML和CSS样式来布局和美化。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)