帝国论坛帝国网站管理系统交流区模板/标签/插件共享交流[模板小教程]根据标题长度自适应排列一行显示几个标题 【本版专题贴子】  
 1/3     1 2 3 ›› ›|
主题:[模板小教程]根据标题长度自适应排列一行显示几个标题 [加入收藏夹]   

禾火木风
用户头衔:嘉宾

精华贴   :11
发贴数   :5478
经验值   :14181
注册时间:2006-03-02
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 1 楼]
[模板小教程]根据标题长度自适应排列一行显示几个标题
这个在门户网站用得比较多,就是根据标题长度自动调整一行显示几个文章标题。风讯和动易有个“智能化标签”,但效果不理想。现在要说的是通过CSS控制实现这一目的。

演示地址:
http://www.cmsmb.cn/demo/001.html

在以后,我将陆续写些这类的小教程。大家有哪方面的需求,可以发信息给我。

HTML代码:

<table width="350" border="0" cellpadding="0" cellspacing="10" id="demo">
    <tr>
     <td><ul>
       <li><a title="风讯自由标签教程" href="http://www.cmsmb.cn/cmsdoc/foosun/200703/71.html">风讯自由标签教程</a> </li>
       <li><a title="漂亮的FLASH幻灯新闻标签" href="http://www.cmsmb.cn/cmsdoc/foosun/200703/70.html">漂亮的FLASH幻灯新闻标签</a> </li>
       <li><a title="新闻列表增加样式列表" href="http://www.cmsmb.cn/cmsdoc/foosun/200703/69.html">新闻列表增加样式列表</a> </li>
       <li><a title="实现google的全站sitemap制作教程" href="http://www.cmsmb.cn/cmsdoc/ecms/200702/60.html">实现google的全站sitemap制作教程</a> </li>
       <li><a title="几个实用的“自由标签”样式代码" href="http://www.cmsmb.cn/cmsdoc/foosun/200702/59.html">几个实用的“自由标签”样式代码</a> </li>
       <li><a title="学习CSS布局心得" href="http://www.cmsmb.cn/tech/xhtml/200704/xhtml85.html">学习CSS布局心得</a> </li>
       <li><a title="网页一屏到底有多大" href="http://www.cmsmb.cn/tech/design/200704/design80.html">网页一屏到底有多大</a> </li>
       <li><a title="著名设计师的标志(Logo)设计观" href="http://www.cmsmb.cn/tech/design/200704/design79.html">著名设计师的标志(Logo)设计观</a> </li>
       <li><a title="css定位与定位应用详细说明" href="http://www.cmsmb.cn/tech/xhtml/200704/xhtml78.html">css定位与定位应用详细说明</a> </li>
       <li><a title="垂直三栏布局相同高度的方法" href="http://www.cmsmb.cn/tech/xhtml/200704/xhtml77.html">垂直三栏布局相同高度的方法</a></li>
      </ul></td>
    </tr>
   </table>


CSS代码:
#demo {
        border: 1px solid #ccc;
}
#demo ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
}
#demo ul li {
        float: left;
        padding: 0px 8px;
        background: url(http://www.cmsmb.cn/images/icon_d.gif) no-repeat left center;
        margin: 0px;
}
#demo ul li a {
        white-space: nowrap;
        line-height: 1.8;
}
#demo ul li a:hover {
        color: #f30;
}


上传以下图片:


[该贴被修改 2 次,最后修改时间 2007-04-17 17:44:55 ]


梦想设计 成就你的设计梦想
2007-04-17 17:39:54 已设置保密 顶部 回复 引用 报告 编辑 删除

stars
用户头衔:举人

精华贴   :0
发贴数   :164
经验值   :645
注册时间:2006-11-14
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 2 楼]

不错,支持一下.




2007-04-18 09:04:12 已设置保密 顶部 回复 引用 报告 编辑 删除

lyerx
用户头衔:进士

精华贴   :0
发贴数   :824
经验值   :2479
注册时间:2006-07-03
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 3 楼]

不错!




2007-04-18 11:48:54 已设置保密 顶部 回复 引用 报告 编辑 删除

wm_chief
用户头衔:管理员

精华贴   :21
发贴数   :48941
经验值   :114161
注册时间:2002-10-30
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 4 楼]




[零基础入门教程] [模板制作教程] [采集使用教程]
2007-04-18 12:12:39 已设置保密 顶部 回复 引用 报告 编辑 删除

huzi408
用户头衔:书生

精华贴   :0
发贴数   :13
经验值   :52
注册时间:2007-04-03
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 5 楼]

学习中。。。。




2007-04-18 15:56:46 已设置保密 顶部 回复 引用 报告 编辑 删除

zangbob
用户头衔:举人

精华贴   :0
发贴数   :351
经验值   :1452
注册时间:2006-12-25
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 6 楼]

WC干嘛抢我表情~~~~


相当的感谢秋枫啊。。。。




2007-04-19 12:36:37 已设置保密 顶部 回复 引用 报告 编辑 删除

desingegg
用户头衔:秀才

精华贴   :0
发贴数   :109
经验值   :483
注册时间:2007-01-05
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 7 楼]

好,做个记号




2007-04-19 19:33:05 已设置保密 顶部 回复 引用 报告 编辑 删除

xbang
用户头衔:进士

精华贴   :0
发贴数   :590
经验值   :2302
注册时间:2007-03-10
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 8 楼]





阿弥陀佛
2007-04-19 22:30:37 已设置保密 顶部 回复 引用 报告 编辑 删除

redboy996
用户头衔:书生

精华贴   :0
发贴数   :3
经验值   :11
注册时间:2007-07-29
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 9 楼]

晕,貌似这个技术含量不高撒




2007-07-29 08:43:37 已设置保密 顶部 回复 引用 报告 编辑 删除

eftax
用户头衔:举人

精华贴   :0
发贴数   :243
经验值   :974
注册时间:2006-02-11
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 10 楼]

好东西,收藏!!



资讯提供者!
http://www.VRCFO.com

2007-08-01 00:11:23 已设置保密 顶部 回复 引用 报告 编辑 删除
 1/3     1 2 3 ›› ›|

快速回复
内容

表情
使用EBB代码 使用smile代码 显示签名 自动分析url 自动分析img
     【进入高级模式】   (按 Ctrl+Enter 直接提交)
    顶部  加入收藏夹
关于帝国 | 广告服务 | 联系我们 | 法律声明 | 隐私条款 | 许可协议
Powered by: EBB Version 2.2.1