会员中心

 

   新闻中心

联合支付宝降低费率套餐、并可免费即时申请商家服务
支付宝为一点通商城系统用户推出1.5%担保交易接口,免费签约即可使用.
关于全面履行网站备案手续的公告
乡镇政府门户网站模块新增T021-T029模版
如何用DIV+CSS实现文章标题灵活排布

如何用DIV+CSS实现文章标题灵活排布
一点通智能建站软件   作者:SystemMaster 来源: 文字大小:[][][]

以前网页制作者在制作标题列表时,通常使用table的tr进行换行、使用td进行换列。这种方式在可预见标题长度并规划好网页布局的情况下,确实可以使网页布局美观。但是,由于不可预知管理员输入标题的长度,这种方式要么产生一大堆空白,要么产生很难看的换行,即便后台可以设置每行每列显示条数和截取文字,仍不能达到完美效果。

现在,DIV+CSS技术已经越来越普及,只要在模版中采用DIV+CSS技术进行制作,可以不必对程序进行修改,轻松实现标题紧密排布、自动双列多列显示标题。有HTML网页制作经验者可以通过修改模版,尝试这样的制作模式。

例一:标题紧密排布

新建一个模版tpl_auotlist.htm,模版内容为:

<!-start->
<ul style="margin: 0; padding: 0;">
<!-start->
<!-list->
<li style="margin: 0;padding:1px 5px 1px 3px; border: 0;float:left; color:#1f3a87; list-style-type:none; line-height:150%; text-align:left;">
<div style="white-space: nowrap"><a href="{ "  target="{ #target# }" { #bold# } { #red# } style="color:#333333;font-size:12px">{ #title# }</a></div>
</li>
<!-list->

<!-end->
</ul>
<!-end->

通过后台页面设置,选择一个文章列表插件,设置其采用tpl_autolist.htm ,可以看到紧密排列的效果。如下图

例二:标题双列排布

新建一个模版tpl_doublelist.htm,模版内容为:

<!-start->
<ul style="margin: 0; padding: 0;">
<!-start->
<!-list->
<li style="width=50%;margin: 0;padding:1px 5px 1px 3px; border: 0;float:left; color:#1f3a87; list-style-type:none; line-height:150%; text-align:left;">
<div style="white-space: nowrap"><a href="{ "  target="{ #target# }" { #bold# } { #red# } style="color:#333333;font-size:12px">{ #title# }</a></div>
</li>
<!-list->

<!-end->
</ul>
<!-end->

通过后台页面设置,选择一个文章列表插件,设置其采用tpl_doublelist.htm ,可以看到双列排列的效果。如下图:


该制作方法同样适合于文章列表,商贸系统的企业列表等所有标题列表。


关于我们 建站流程 联系方式 付款方式 文档下载 使用手册 备案中心 友情链接
一点通软件有限公司-版权所有 --Powered By SITE-DIY.COM Copyright © 2006-2008