用html编写一个圆角边框板块居中、颜色为粉色,板块中左上为医生相片,右侧为信息包括姓名、性别、学历、科室
时间: 2024-05-13 17:18:59 浏览: 10
以下是一个示例代码,可以满足您的需求:
```html
<div style="width: 400px; height: 200px; background-color: #ffcccc; border-radius: 10px; display: flex; align-items: center; justify-content: center;">
<img src="doctor_photo.jpg" alt="医生照片" style="width: 100px; height: 100px; border-radius: 50%; margin-right: 20px;">
<div>
<p>姓名:张三</p>
<p>性别:男</p>
<p>学历:博士</p>
<p>科室:内科</p>
</div>
</div>
```
在上面的代码中,我们使用了一个 `div` 元素来作为整个板块的容器。通过设置 `width` 和 `height` 属性,我们可以指定容器的宽度和高度。`background-color` 属性用于设置容器的背景色,这里使用了粉色。`border-radius` 属性用于设置容器的圆角半径,这里设置为 10px。
为了让容器中的内容居中显示,我们使用了 `display: flex; align-items: center; justify-content: center;` 这三个属性。其中,`display: flex;` 表示将容器变成一个弹性盒子,`align-items: center;` 表示将内容在垂直方向上居中对齐,`justify-content: center;` 表示将内容在水平方向上居中对齐。
在容器中,我们放置了一个图片元素和一个 `div` 元素。图片使用了 `img` 标签,并设置了 `src` 属性来指定图片的地址。同时,我们也设置了 `width` 和 `height` 属性来指定图片的大小,并设置了 `border-radius` 属性来让图片变成一个圆形。
在 `div` 元素中,我们使用了 `p` 标签来显示医生的信息。通过设置不同的文本内容,我们可以展示姓名、性别、学历和科室等信息。