用html编写一个圆角边框板块居中、颜色为粉色,板块中左上为医生相片,右侧为信息包括姓名、性别、学历、科室
时间: 2024-05-05 07:22:11 浏览: 91
以下是一份使用 HTML 和 CSS 编写的圆角边框板块居中、颜色为粉色的示例代码,其中包括医生相片和信息:
```html
<div class="doctor-info">
<img src="doctor-photo.jpg" alt="医生相片">
<div class="doctor-details">
<p>姓名:张三</p>
<p>性别:男</p>
<p>学历:医学博士</p>
<p>科室:内科</p>
</div>
</div>
```
```css
.doctor-info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 80%;
margin: 0 auto;
background-color: pink;
border-radius: 10px;
padding: 20px;
}
.doctor-info img {
width: 150px;
height: 150px;
border-radius: 50%;
margin-right: 20px;
}
.doctor-details {
font-size: 20px;
font-weight: bold;
}
```
在这个示例中,我们使用了 flex 布局来将医生相片和详细信息放在同一行,并使用 align-items 和 justify-content 属性将它们居中对齐。我们还使用了 margin 和 width 属性来使整个板块居中,并使用 background-color 和 border-radius 属性来设置颜色和圆角边框。最后,我们使用了 img 和 p 元素来显示医生相片和详细信息,并使用 CSS 属性来设置它们的样式。
阅读全文