编辑“捷扬文章系统-显示效果截图”

<span style="border:1px solid #000; float:right; text-align:center; padding:6px;"><strong>导航：</strong>[[捷扬文章系统教程|返回上一页]]</span>
<div style="clear:both;"></div>
[[捷扬文章系统]]-显示效果截图

[[Image:捷扬文章系统文章显示效果截图1.gif]]

*左图片+右上标题+右下内容简介效果，样式定义：
<pre>
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;}
</pre>

[[Image:捷扬文章系统文章显示效果截图2.gif]]

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

[[Image:捷扬文章系统文章显示效果截图3.gif]]


<pre>
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;}
</pre>
*文章列表样式效果，样式定义如下：
<pre>
 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;}
</pre>

[[Image:捷扬文章系统文章显示效果截图4.gif]]

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

[[Image:捷扬文章系统文章显示效果截图5.gif]]

*图片+下标题效果，样式定义如下：
<pre>
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;}
</pre>
样式、[[web]]标准，大家都学学[[css]]，其实也没有想象的那么难。


==参考来源==
*[http://www.059it.com/ 参考来源1]


[[category:捷扬文章系统|J]]