07-西电审核--主要内容--主要信息区

HTML

<div class="main-info clearfix">
  <div class="left-aside fl"></div>
  <div class="carousel fl"></div>
  <div class="notice fr"></div>
</div>

CSS

.main-info {
  margin-top:8px;
}

左侧导航

<div class="left-aside fl">
  <a href="#">![](img/jiao-xue-oa.png)</a>
  <a href="#">![](img/zhuang-tai-shu-ju.png)</a>
  <a href="#">![](img/xue-yuan-ping-gu.png)</a>
  <a href="#">![](img/zhi-liang-bao-gao.png)</a>
</div>

CSS

.main-info .left-aside {
  width:248px;
}
.main-info .left-aside a{
   display: inline-block;
   margin-bottom: 6px;
}
.main-info .left-aside img{
   vertical-align: top;
}

图片轮播

HTML

<div class="carousel fl">
  <a href="#">![](img/carousel.png)</a>
</div>

CSS

.main-info .carousel {
  margin-left: 27px;
}

通知公告

<div class="notice fr">
  <div class="info-header"></div>
  <div class="info-detail"></div>
</div>

<div class="info-header clearfix">
  <div class="fl">
    <h2>通知公告</h2>
    <span class="spacer"></span>
    <span class="sub-title">NOTICE</span>
  </div>
  <div class="fr">
    <a class="more" href="#">更多</span>
  </div>
  <div class="underline"></div>
</div>

.info-header {
   padding-top: 16px;
   padding-bottom: 11px;
   border-bottom: 1px solid #333;
   color:#676767;
   position: relative;
}
.info-header h2 {
  display: inline-block;
  font-size: 20px;
}
.info-header .spacer {
  display: inline-block;
  height:12px;
  border-left:1px solid #676767;
}
.info-header .sub-title {
  font-size: 12px;
}
.more {
  font-size: 12px;
  color:#989898;
}
.underline {
  width: 82px;
  border:1px solid #b0252a;
  position: absolute;
  bottom: 0;
}

背景颜色与字体颜色