人物介绍html➕css代码
时间: 2024-09-19 15:02:54 浏览: 41
公司人物简介网页模板是一款多种色彩组合的css3人物网站模板 .rar
HTML 和 CSS 可以结合使用来创建人物介绍页面,这是一种常见的网页布局方式。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>人物介绍</title>
<style>
.profile {
display: flex;
flex-direction: column;
align-items: center;
padding: 50px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.profile-image {
width: 200px;
height: 200px;
border-radius: 50%;
margin-bottom: 20px;
}
.name-title {
font-size: 24px;
color: #333;
text-align: center;
}
.bio {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="profile">
<img src="人物头像.jpg" alt="人物头像" class="profile-image">
<h2 class="name-title">姓名</h2>
<p class="bio">这里输入人物简介...</p>
</div>
</body>
</html>
```
在这个示例中,HTML部分定义了一个包含人物头像、姓名和简介的基本结构,CSS则用于设置样式,如背景颜色、字体大小和对齐方式等。`src`属性指定了人物头像的图片路径,实际项目中需要替换为你的人物头像URL。
阅读全文