用html编写一个圆角边框板块居中、颜色为粉色,板块中左上为医生相片,右侧为信息包括姓名、性别、学历、科室
时间: 2024-05-01 09:19:56 浏览: 16
以下是HTML代码:
```html
<div style="width: 400px; height: 200px; margin: 0 auto; border-radius: 10px; border: 2px solid pink;">
<img src="doctor.jpg" alt="医生照片" style="width: 100px; height: 100px; border-radius: 50%; margin: 20px; float: left;">
<div style="float: left; margin-top: 30px;">
<p style="font-size: 18px;">姓名:张三</p>
<p style="font-size: 18px;">性别:男</p>
<p style="font-size: 18px;">学历:博士</p>
<p style="font-size: 18px;">科室:神经内科</p>
</div>
<div style="clear: both;"></div>
</div>
```
解释:
1. 外层的 `div` 元素设置了宽度、高度、边框圆角和边框颜色,且使用了 `margin: 0 auto` 居中显示。
2. 左侧的医生照片使用了 `float: left` 向左浮动,并设置了宽度、高度和边框圆角。
3. 右侧的信息使用了 `float: left` 向左浮动,并设置了顶部外边距。
4. 为了让右侧信息不被医生照片覆盖,使用了 `clear: both` 清除浮动。