<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
}
.wrap {
width: 660px;
height: 230px;
border: 1px solid #c8b89f;
margin: 50px auto;
padding: 8px;
box-sizing: border-box;
background: url(./images/bg1.jpg) no-repeat left bottom
,url(./images/bg2.jpg) no-repeat right top;
background-color: #f9f4ee;
background-origin: content-box;
}
.wrap .top {
padding: 10px;
}
.wrap .top .big {
padding-top: 10px;
}
.wrap .top .box1 {
float: left;
}
.wrap .top .box1 p {
width: 110px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 25px;
color: #bf8a00;
border-right: 1px solid #c8b89f;
}
.clearfix:after {
content: '';
/*添加一个空内容*/
display: block;
/*转块*/
clear: both;
/*清浮动*/
}
.wrap .top .box2 {
margin-left: 130px;
}
.wrap .top .box2 p {
font-size: 14px;
line-height: 25px;
color: #4c3f37;
}
.wrap .top .box3 {
padding: 15px 20px;
font-size: 14px;
}
.wrap .top .box3 span {
line-height: 25px;
color: #817d7a;
}
.wrap .top .box3 span b {
color: black;
}
.wrap .top .box4 {
position: relative;
}
.wrap .top .box4 a {
position: absolute;
top: -30px;
right: 25px;
display: block;
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 13px;
background-color: #bf8a00;
color: white;
}
</style>
</head>
<body>
<div class="wrap">
<div class="top clearfix">
<div class="big clearfix">
<div class="box1">
<p>张先生</p>
</div>
<div class="box2">
<p>所在科室: 脑病科</p>
<p> 职位: 主任医师、教授</p>
</div>
</div>
<div class="box3">
<span>
<b>简介:</b>张龙生,男,主任医师,毕业于北京中医药
大学中医专业。现任北京中医药大学东直门医院东
区脑病科大主任。第三批国家中医优秀临床人才,
师从国家级名老中医薛伯寿教授、张炳厚教授、刘
景源教授、郝万山教授名老中医薛伯寿教授、张炳
厚教授、刘景源教授、郝万山教授...
</span>
</div>
<div class="box4">
<span><a href="#">了解详情</a></span>
</div>
</div>
</div>
</body>
</html>