css3技术

用ul标签来实现四行三列“表格式”布局_div+css布局教程

字号+ 作者:H5之家 来源:H5之家 2015-09-29 09:04 我要评论( )

用ul标签来实现四行三列“表格式”布局,学习用ul标签来实现四行三列“表格式”布局,用ul标签来实现四行三列“表格式”布局,查看用ul标签来实现四行三列“表格式

点击运行此代码,即可以看到效果。

div css xhtml xml Source Code to Run

Source Code to Run []


[ 可先修改部分代码 再运行查看效果 ]


虽然从技术上ul可以实现此效果。但我们不建议这样做。
在XHTML中,表格式的数据,应该还是以table来实现。
web标准,强调的是内容与表现的分离,并不是说完全弃用table,只是在布局方式上,应用div css。
碰到表格式数据,推荐依然用表格来实现。可以在css中,对表格的样式进行定久。

假如内容过多,出现走位的现象,可以用此方法来解决:

div css xhtml xml Example Source Code

Example Source Code []

ul li{
display:block;
float:left;
list-style-type:none;
border-top:#000 solid 1px;
border-left:#000 solid 1px;
width:65px;
height:28px;
overflow:hidden;
}


将li设置为块元素,并限制其高度与宽度,设置溢出为隐藏。:)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 用ul标签来实现四行三列“表格式”布局_div+css布局教程

    用ul标签来实现四行三列“表格式”布局_div+css布局教程

    2015-09-29 09:04

网友点评