用html编写一个圆角边框板块居中、颜色为粉色,板块中左上为医生相片,右侧为信息包括姓名、性别、学历、科室
时间: 2024-05-07 14:20:53 浏览: 88
以下是一个简单的HTML代码,可以实现你要求的效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>医生信息</title>
<style>
/* 样式表 */
.box {
width: 400px;
height: 200px;
margin: 0 auto;
background-color: #F5B0CB;
border-radius: 20px;
padding: 20px;
display: flex;
align-items: center;
}
.photo {
width: 120px;
height: 120px;
border-radius: 50%;
background-image: url("doctor.jpg");
background-size: cover;
background-position: center;
margin-right: 20px;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
}
.name {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.gender {
font-size: 18px;
margin-bottom: 5px;
}
.education {
font-size: 18px;
margin-bottom: 5px;
}
.department {
font-size: 18px;
}
</style>
</head>
<body>
<div class="box">
<div class="photo"></div>
<div class="info">
<div class="name">张医生</div>
<div class="gender">性别:男</div>
<div class="education">学历:博士</div>
<div class="department">科室:内科</div>
</div>
</div>
</body>
</html>
```
解释一下代码:
- 首先定义了一个类名为 `box` 的 div 元素,宽度为 400px,高度为 200px,水平居中,背景颜色为粉色,圆角边框为 20px,内边距为 20px,采用了 flex 布局,并且将其内部元素垂直居中对齐。
- 其中 `photo` 类名的 div 元素表示医生的照片,宽度和高度都为 120px,圆角为 50%,背景图片为 `doctor.jpg`,并且采用了 cover 模式使其完全覆盖 div 元素,水平居中对齐,同时与右侧信息部分相隔 20px。
- `info` 类名的 div 元素表示医生的信息,采用了 flex 布局,并且将其内部元素纵向排列并垂直居中对齐。
- `name`、`gender`、`education` 和 `department` 类名的 div 元素分别表示医生的姓名、性别、学历和科室,采用了不同的样式并且留有适当的间距。
阅读全文