用DIV+CSS如何实现这种表格效果

表格效果table

 
     
     
     

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

表格效果div+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;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 用DIV+CSS如何实现这种表格效果

    表格效果table                     [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 表格效果div+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-

  • div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容

    div+css+js模拟tab, 我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS 当然,你得会DIV才行. div+css+js模拟tab 框1111 框2222 框3333 框4444 这里是内容撒．111．． 这里是内容撒．111．． 这里是内容撒．111．． 这里是内容撒222．． 这里是内容撒．222．． 这里是内容撒．222．． 这里是内容撒．333．． 这里是内容撒．333．． 这里是内容撒．333．． 这里是内容撒．444．． 这里是内容撒．44

  • JS+DIV+CSS实现的经典标签切换效果代码

    JS+DIV+CSS实现的经典标签切换效果代码

    本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码.分享给大家供大家参考.具体如下: 这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-bq-cha-tab-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • div+css模拟表格效果代码

    DIV+CSS模拟表格效果 - by koyoz.com * {margin:0;padding:0} #main {margin:100px 0 0 200px} #main ul {width:520px;height:165px;list-style:none} #main li {border-left:1px solid #ccc;border-top:1px solid #ccc;float:left;width:102px;height:33px;text-align:center

  • JS+DIV+CSS实现仿表单下拉列表效果

    JS+DIV+CSS实现仿表单下拉列表效果

    本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果.分享给大家供大家参考.具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下: <!DOCTYPE

  • 效果直逼flash的Div+Css+Js菜单

    效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

  • JS+DIV+CSS排版布局实现美观的选项卡效果

    JS+DIV+CSS排版布局实现美观的选项卡效果

    本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • 比较漂亮的一个导航条的效果DIV+CSS

    比较漂亮的一个导航条的效果DIV+CSS

    导航条的一个效果DIV+CSS 现在应用于客齐集网站! 复制代码 代码如下: <style>  * {margin:0; padding:0; list-style:none;}  body{font-size:12px; margin:100px;}  #info{border:1px solid #BCFF1D; width:348px; background:#D6FF8C url(/upload/200732411541374.gif) no-repeat left top;  flo

  • JS+CSS实现DIV层的展开、收缩效果

    JS+CSS实现DIV层的展开、收缩效果

    本文为大家分享的第一个实例:JS控制DIV层的展开.收缩效果. <html> <head> <title>CSS+JS实现一个DIV层的展开/折叠效果</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica,

  • DIV+CSS经常用到的属性、参数及说明

    通用类 overflow:hidden;自动隐藏超出的内容,防止撑开层和表格的范围 !important 指定样式规则的应用优先权 文字类 color: #FF0000;文字颜色 font-family: "Arial", "Helvetica", "sans-serif";字体 font-size: 9px;字号 text-align:center; 居中(left为居左,right为居右) line-height:28px:行高(可用150%

随机推荐