帮我制作一个介绍孙燕姿的网页css
时间: 2023-10-07 21:14:17 浏览: 85
好的,以下是一个简单的示例CSS代码,用于制作介绍孙燕姿的网页:
```html
<!DOCTYPE html>
<html>
<head>
<title>孙燕姿介绍</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #333;
margin-top: 50px;
}
p {
text-align: justify;
color: #666;
font-size: 18px;
line-height: 1.5;
width: 80%;
margin: 0 auto;
margin-top: 30px;
}
img {
display: block;
margin: 0 auto;
margin-top: 50px;
max-width: 80%;
height: auto;
}
.social-links {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.social-icon {
margin: 0 20px;
width: 40px;
height: 40px;
background-color: #333;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
.social-icon:hover {
transform: scale(1.2);
background-color: #c2185b;
}
.social-icon i {
color: #fff;
font-size: 24px;
}
</style>
</head>
<body>
<h1>孙燕姿介绍</h1>
<img src="https://i.imgur.com/9VnYm7n.jpg" alt="孙燕姿">
<p>孙燕姿是一位台湾女歌手,出生于1978年7月23日。她以其独特的音乐风格和出色的演唱实力而闻名于华语乐坛。她曾获得多项音乐奖项,包括金曲奖、MTV亚洲音乐大奖等。</p>
<div class="social-links">
<a href="#"><div class="social-icon"><i class="fab fa-facebook-f"></i></div></a>
<a href="#"><div class="social-icon"><i class="fab fa-instagram"></i></div></a>
<a href="#"><div class="social-icon"><i class="fab fa-twitter"></i></div></a>
<a href="#"><div class="social-icon"><i class="fab fa-youtube"></i></div></a>
</div>
</body>
</html>
```
这段代码会生成一个包含孙燕姿照片和简介的网页,并且包含了一些社交媒体链接。
请注意,这只是一个简单的示例,您可以根据自己的需求自由修改样式和内容。
阅读全文