实现的效果
<!DOCTYPE html><html><head><meta charset="UTF-8"/><title>wen an qi</title><style type="text/css">*{margin: 0px; padding: 0px;}.nav{width: 310px;height:480px; margin: 0px auto;/*使整个菜单栏置顶并居中*/}.kuai{border-bottom:1px solid gray;/*设置灰色横线*/height: 92px;padding: 5px;margin: 0px 20px; }.h{display: inline;/*使块级元素变为行级元素：让“综合新闻”和“媒体天下”并排显示*/list-style:none;/*去掉无序列表自带的小圆点*/text-align: center;line-height: 60px;}.h1{background-color: white;color: orange;height: 60px;padding: 15px 46px 20px 46px;border-top: 10px solid #685479;}.h2{background-color: #685479;color: white;margin: -6.5px;width: 310px;padding: 20px 46px;}.dh{height: 420px;width: 310px;background-color: white;}.time{font:lighter 13px 宋体;color: gray;list-style:none;padding: 10px 0px;}.t{list-style:none;}.t:hover/*鼠标略过时字体颜色改变*/{color: orange;}</style></head><body bgcolor="#eee"><div class="nav"><ul><li class="h h1">综合新闻</li><li class="h h2">媒体天下</li><ul class="dh"><div class="kuai"><li class="time">.12.21</li><li class="t">同光大学召开就业工作会议</li></div><div class="kuai"><li class="time">.12.21</li><li class="t">【组图】同光大学国际学生学者新年晚会异彩纷呈</li></div><div class="kuai"><li class="time">.12.20</li><li class="t">同光大学召开第三次院长（系主任）会议</li></div><div class="kuai"><li class="time">.12.20</li><li class="t">同光大学服务经济与公共政策研究院揭牌成立</li></div></ul> </ul></div></body></html>
