给大家带来用css完成表分外不雅的无序列表

显示全部楼层 · 发表于 2015-1-15 23:55:26

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
网页制造poluoluo文章简介：别看有的东东长得个表格样，实际上是披着表格皮的无序列表，为了巨大的语义，我们必要用CSS完成表分外不雅的无序列表。

介入测试的扫瞄器：IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2
操纵体系：Windows
出格提醒：这不是表格的摹拟。表格不管在语义、布局，仍是在效果完成上，都是没法替换的。本文只针对无序列表在表面方面的一个特别需求

别看有的东东长得个表格样，实际上是披着表格皮的无序列表，为了巨大的语义，我们必要用css完成表分外不雅的无序列表。
团体喜欢，这里接纳border和negativemargin来完成，十分复杂：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>表分外不雅的无序列表-原始形态</title><styletype="text/css">*{margin:0;padding:0;list-style:none;}ul{margin-left:1px;margin-top:1px;width:505px;}li{float:left;height:23px;border:1pxsolid#cfdae8;width:100px;margin-left:-1px;margin-top:-1px;}</style></head><body><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><br/><br/>像一个表格吧？^-^</body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
这是一个最复杂的模子，但是，实战老是严酷的：

宽度怎样自顺应分辩率？
单位格内容过量、构成换行怎样处置？
最纠结的成绩：5

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 给大家带来用css完成表分外不雅的无序列表

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子