首页
行业
前端
特效
人生
知识库
站内搜索：
首页
>>
前端
>> 内容
用DIV+CSS如何实现这种表格效果
时间：2006/9/24
表格效果table
<table width="500" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000"> <tr bgcolor="#FFFFFF"> <td height="50" colspan="3"> </td> </tr> <tr bgcolor="#FFFFFF"> <td height="50"> </td> <td height="50"> </td> <td height="50"> </td> </tr> <tr bgcolor="#FFFFFF"> <td height="50"> </td> <td height="50"> </td> <td height="50"> </td> </tr> <tr bgcolor="#FFFFFF"> <td height="50"> </td> <td height="50"> </td> <td height="50"> </td> </tr> </table>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
表格效果div+css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <style type=text/css> #div1 { width: 450px; border-top: #000 1px solid; border-left: #000 1px solid; } #div1 ul { width: 450px; margin: 0px; } #div1 li { float: left; width: 149px; height: 50px; list-style-type: none; border-right:#000 1px solid; border-bottom: #000 1px solid; text-align: center; line-height: 50px; } </style> <div id="div1"> <ul> <li style="width: 449px;">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
上一篇：
HTML技巧汇编
下一篇：
IE图片下空隙问题解决方法集合
用户评论
已有
0
人评论
阅读更多评论
相关文章
·
vivo最新一代屏幕指纹识别刁钻场景提速30% 10月底上市
·
NativeAPP（原生应用）、WebApp（Web应用）、HybridApp（混合应用）的优缺点对比分析
·
div嵌套时，背景图片不显示问题的解决方法
·
display的属性和visibility的对比讲解
·
ueditor完美配置版教程，只需要修改项目名称为自己的即可
·
MVC后台数据赋值给前端JS对象详解
·
EditPlus的常用快捷键总结
·
display:inline-block,加上overflow:hidden 导致附近元素塌陷下去怎么解决？
·
div模拟textarea文本域输入实现自适应高度（代码分析）
·
iview Tooltip换行及渲染的解决方案
返回顶部
