<div class="news-and-notice">
<div class="news">
<p>医院动态</p>
<div class="news-content">
<div class="hot-news">
<img src="./images/news_pic.png" alt="">
<div class="zgc">“全国首届健康预防与商业医疗保险论坛”在北京举办</div>
</div>
<ul>
<li><a href="#">年度医疗机构用血自查评分表和科室基本信息表</a><span>03-30</span></li>
<li><a href="#">关于上报北京市医疗机构临床用血信息的通知</a><span>03-30</span></li>
<li><a href="#">北京医院输血科通过验收并获批开展“临床基…</a><span>03-30</span></li>
<li class="spec"><a href="#">国家药品监督管理局关于修订都梁软胶囊非处…</a><span>03-30</span></li>
<li><a href="#">关于将多拉司琼注射剂等药品纳入本市基本医…</a><span>03-30</span></li>
<li><a href="#">关于调整完善本市基本医疗保险门诊特殊疾病…</a><span>03-30</span></li>
<li><a href="#">广东省药学会：关于印发《超药品说明书用药…</a><span>03-30</span></li>
<li><a href="#">人力资源社会保障部关于将36种药品纳入国家…</a><span>03-30</span></li>
</ul>
</div>
</div>
<div class="notice">
<p>医院公告</p>
<ol>
<li>
<div class="number">01</div>
<dl>
<dt><a href="">《养生堂》</a></dt>
<dd><a href="">公郭立新主任 特殊时期糖尿病人的新冠…</a></dd>
</dl>
</li>
<li>
<div class="number">02</div>
<dl>
<dt><a href="">《养生堂》</a></dt>
<dd><a href="">王少为主任 新型冠状病毒防控指引十八…</a></dd>
</dl>
</li>
<li>
<div class="number">03</div>
<dl>
<dt><a href="">《我要当医生》</a></dt>
<dd><a href="">谭玲副主任 李同舟 姚晨蕊药师</a></dd>
</dl>
</li>
<li>
<div class="number">04</div>
<dl>
<dt><a href="">《全民健康学院》</a></dt>
<dd><a href="">王建业院长 “医”路有你 健康同行</a></dd>
</dl>
</li>
<li>
<div class="number">05</div>
<dl>
<dt><a href="">《健康北京》</a></dt>
<dd><a href="">王建业院长 莫把衰老当病治</a></dd>
</dl>
</li>
</ol>
</div>
</div>
-------------------css---------------------
/* 医院动态和公告区域 */
.content .news-and-notice{
width: 1200px;
height: 376px;
/* background-color: #00978E; */
margin: 0 auto;
margin-top: 56px;
overflow: hidden;
margin-bottom: 20px;
}
.content .news-and-notice .news{
float: left;
width: 798px;
height: 376px;
}
.content .news-and-notice .news p{
width: 64px;
height: 21px;
font: 16px/19px Helvetica;
/* margin-bottom: 27px; */
}
.content .news-and-notice .news .news-content{
width: 838px;
height: 328px;
}
.content .news-and-notice .news .news-content .hot-news{
float: left;
width: 422px;
height: 328px;
margin-right: 15px;
position: relative;
}
.content .news-and-notice .news .news-content .hot-news .zgc{
width: 422px;
height: 40px;
position: absolute;
bottom: 0;
background: rgba(8,8,8,0.40);
font-size: 14px;
color: white;
text-align: center;
font-family: Helvetica;
line-height: 40px;
}
.content .news-and-notice .news .news-content ul{
float: left;
width: 400px;
}
.content .news-and-notice .news .news-content ul li{
font: 14px/38px Helvetica;
}
.content .news-and-notice .news .news-content ul li a{
float: left;
color: #000;
}
.content .news-and-notice .news .news-content ul li.spec a{
color: #00978E;
}
.content .news-and-notice .news .news-content ul li span{
float: right;
padding-right: 40px;
}
/* ----医院公告区域----- */
.content .news-and-notice .notice{
float: left;
width: 323px;
height: 376px;
}
.content .news-and-notice .notice p{
width: 64px;
height: 21px;
font: 16px/21px Helvetica;
margin-bottom: 20px;
}
.content .news-and-notice .notice ol li{
/* height: 57px; */
overflow: hidden;
margin-bottom: 11px;
}
.content .news-and-notice .notice ol li .number{
float: left;
background-color: #00978E;
color: white;
font-size: 30px;
width: 53px;
height: 57px;
text-align: center;
line-height: 57px;
margin-right: 9px;
}
/* .content .news-and-notice .notice ol li dl{
float: left;
height: 57px;
color: #000;
} */
.content .news-and-notice .notice ol li dl dt a{
color: #666;
}
.content .news-and-notice .notice ol li dl dd a{
color: #999;
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧