资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
CSS 图片横向排列实现代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS 图片列表，横向</title> <style type="text/css"> <!-- * { margin:0; padding:0; font-size:12px; text-decoration:none; } #products { width:560px; margin:50px auto; } #products li { width:110px; height:154px; float:left; margin-left:30px; display:inline; } #products li a { display:block; } #products li a img { border:1px solid #666; padding:1px; } #products li span a { width:110px; height:30px; line-height:24px; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; } --> </style> </head> <body> <ul id="products"> <li><a href="#" _ewebeditor_ta_href="%23"><img src="http://files.glzy8.com/upload/2010-3/20100303232223253.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F2010-3%2F20100303232223253.jpg" alt="" width="100" height="75"/></a> <span><a href="#" _ewebeditor_ta_href="%23">VB定时关机源码示例</a></span> </li> <li><a href="#" _ewebeditor_ta_href="%23"><img src="http://files.glzy8.com/upload/2010-3/20100303232225693.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F2010-3%2F20100303232225693.jpg" alt="" width="100" height="75"/></a><span><a href="#" _ewebeditor_ta_href="%23">一个好用的C++日志生成类</a></span> </li> <li><a href="#" _ewebeditor_ta_href="%23"><img src="http://files.glzy8.com/upload/2010-3/20100303232225439.jpg" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F2010-3%2F20100303232225439.jpg" alt="" width="100" height="75"/></a> <span><a href="#" _ewebeditor_ta_href="%23">JS+CSS联合打造图文结合动感菜单</a></span> </li> </ul> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程