捷扬文章系统-显示效果截图

左图片+右上标题+右下内容简介效果，样式定义：

Example Source Code
.m_top dl{ width:378px; padding:3px; margin-left:10px; margin-top:2px;}
.m_top dl dt{float:right;width:280px;height:22px;}
.m_top dl dt a:link{font-size:13px !important; 
font-size:12px; font-weight:800;color:#06c;text-decoration:none;}
.m_top dl dt a:visited{font-size:13px !important; 
font-size:12px; font-weight:800;color:#06c;text-decoration:none;}
.m_top dl dt a:hover{text-decoration:underline;}
.m_top dl dd.pic{float:left;}
.m_top dl dd.pic a{display:block;border:1px solid #ddd;}
.m_top dl dd.pic a img{margin:2px;border:0;}
.m_top dl dd.pic a:hover{border:1px solid #999;}
.m_top dl dd.text{float:right;width:280px;font-size:
12px;line-height:19px;color:#666;text-indent:2em;}
.m_top dl dd.links{float:right;width:280px;margin-top:-6px;text-align:right;}
.m_top dl dd.links a{font-size:12px;line-height:15px;
color:#06c;text-decoration:none;}
.m_top dl dd.links a:hover{text-decoration:underline;}
.m_top dl:after {content:"."; display:block; height:0; 
clear:both; visibility:hidden;}

热点排行效果，样式定义如下：

Example Source Code
.news_list li{ float:left; width:100%; height:22px 
!important; height:14px;}
.news_list li.top3 em{ background:
#FFE4B7; border:1px solid #FFBB8B; color:#FF6800;}
.news_list em{ display:block; width:12px; height:12px; 
float:left; margin-right:2px; border:1px solid #B1E0F4; 
color:#6298CC; font-style:normal; font-size:10px; 
font-family:Arial; background:#E6F0FD; 
text-align:center; overflow:hidden; line-height:12px;}

文章列表样式效果，样式定义如下：

 Example Source Code
.m_box .main_con,.m_boxs .main_con{ clear:both; margin:6px;
 padding:0 6px 6px 6px;}
.m_box .main_con li,.m_boxs .main_con li{ float:left; 
width:100%; line-height:22px;}
.m_box .main_con li span,.m_boxs .main_con li span{ float:right;}

幻灯片效果，只需定义幻灯片的外框样式定义即可

图片+下标题效果，样式定义如下：

Example Source Code
.Ipic .main_con li{ float:left; width:106px; 
display:block; margin-right:6px;}
.link_pic img{ border:1px #CCCCCC solid; padding:1px;}

样式、web标准，大家都学学css，其实也没有想象的那么难。

参考来源

参考来源1