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="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></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="#"></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;
}
背景颜色与字体颜色
