写这个是为了给自己一个好好的笔记，以免下次需要的时候又到处找，费神费事费时费力。开始吧！

1.先看看效果

2.网页代码

 <!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">

 <head>

 <title>divtest</title>

 <style>

 #t {

 width: 404px;

 margin: 5px auto;

 padding:0px;

 border-top: #0066cc 1px solid;

 border-left: #0066cc 1px solid;

 display:table;

 }

 #t li {

 float: left;

 width: 100px;

 height: 50px;

 list-style-type: none;

 border-right:#0066cc 1px solid;

 border-bottom: #0066cc 1px solid;

 text-align: center;

 line-height: 50px;

 }

 </style>

 </head>

 <body>

    <div style="overflow:scroll; height:100px; width:200px">

     <ul>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     <li>dddddd</li>

     </ul>

    </div>

    <ul id="t">

 <li style="width:403px;">helloworld</li>

 <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li>

 </ul>

 </body>

 </html>

div 滑动条

overflow:scroll 和overflow:auto;/*自动出现滚动条，如果要出现竖直滚动条则改成：overflow-y:auto，如果横向出现滚动条则改成：overflow-x:auto*/

scrollbar-face-color:#F00;/*滚动条凸出部分的颜色(前景色),包括两端的方形按钮、水平或竖直滑动的滑块的颜色*/
scrollbar-track-color:#FFF;/*滚动条的背景颜色,如果省略的话将出现虚点，颜色将采用face-color的颜色*/
scrollbar-arrow-color:#FFF;/*按钮(上下或者左右可以点击使滑块滚动的方形按钮)上三角箭头的颜色*/
scrollbar-3dlight-color:#0F0;/*滚动条亮边的颜色,形成3D效果，有层次感，肉眼观察在滚动条左边及上边出现一条有色线（竖直方向滚动）*/
scrollbar-darkshadow-color:#00F;/*滚动条强阴影的颜色,肉眼观察出现滚动条下边及右边*/
scrollbar-highlight-color:#F0F;/*滚动条空白部分的颜色,肉眼观察改变不明显，具体颜色改变出现在左边和上边空白处，介于face-color效果与3dlingt-color效果之间有个空白颜色（默认为白色）。此外，滚动条前景色有种凹陷的感觉，周边线条颜色凸起*/
scrollbar-shadow-color:#006600;/*立体滚动条阴影的颜色，具体出现在滑块及方形按钮的右边及下边，形成阴影效果，颜色介于face-color效果和darkshadow-color效果之间，不是很明显*/
scrollbar-base-color:#0f0;/*滚动条的基本颜色,当前面7个效果出现时，滚动条基本颜色设置肉眼很难观察到，如果不设置前面7个效果,系统将根据base-color自动设置，其中前景色，背景色(虚点表示)颜色一致，其他效果(阴影以黑色填充),没有什么要求时，建议不设置此效果*/

如果没有要做这个效果，也许我永远不知道！实践是检验真理的最好办法，真的不错！

DIV+ul+LI实现表格效果以及div带滑动条的更多相关文章

  1. 基于DIV+ul+li实现的表格(多示例)

    一个无序列表biaoge,前四个列表项我们赋予了类biaotou.因为这四个项是表格头部,应该与表格数据有所区别.所以单独赋予了类,可以方便控制.下面我们开始CSS代码的编写:由 www.169it. ...

  2. css案例学习之div ul li a 实现导航效果

    效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...

  3. DIV UL LI

    <style type="text/css"> .productDetailTabNav{ width:960px;} .productDetailTabNav ul{ ...

  4. div放在li标签中，无法撑开li标签的问题

    作为一个前端菜鸟,我又碰到问题了,今天把div放到li标签中,发现div并没有把li标签撑开,而是在li标签边界之外,具体情况如下图所示: 那么,怎样才能达到预期的效果(每个li中放置一个div标签, ...

  5. 设置DIV隐藏与显示，表格滑动条

    问题描述:         现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决:   (1)DIV块的隐藏与显示 如上所示, ...

  6. 为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性

    会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...

  7. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  8. JS和jQuery中ul li遍历获取对应的下角标

    首先先看代码: html代码部分: <div id="div"> <ul> <li>1111111</li> <li>2 ...

  9. ul li 水平居中

    li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中.但这样可能在宽屏与窄屏的显示不一致.使用这种方法主 ...

随机推荐

  1. 【android】夜间模式简单实现

    完整代码,请参考我的博客园客户端,git地址:http://git.oschina.net/yso/CNBlogs 关于阅读类的app,有个夜间模式真是太重要了. 那么有两种方式可以实现夜间模式 1: ...

  2. 20145316许心远《Java学习笔记（第8版）》课程总结

    20145316许心远<Java学习笔记(第8版)>课程总结 每周读书笔记链接汇总 ▪ 第一周读书笔记 ▪ 第二周读书笔记 ▪ 第三周读书笔记 ▪ 第四周读书笔记 ▪ 第五周读书笔记 ▪ ...

  3. java中静态变量，静态代码块，静态方法，实例变量，匿名代码块等的加载顺序

    转自:http://blog.csdn.net/mrzhoug/article/details/51581994 一.在Java中,使用”{}”括起来的代码称为代码块,代码块可以分为以下四种: 1.普 ...

  4. 20145327 《Java程序设计》第二周学习总结

    20145327 <Java程序设计>第二周学习总结 教材学习内容总结 JAVA类型:基本类型与类类型(也称参考类型). 基本类型分为:整数(short,int,long).字节(byte ...

  5. 20145331 《Java程序设计》第6周学习总结

              20145331 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入/输出 10.1.1串流 •Java将输入/输出抽象化为串流,数据有来源及目的地,衔 ...

  6. Python高阶函数（Map、Reduce、Filter）和lambda函数一起使用 ，三剑客

    Map函数 map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 举例说明 比如我们有一个函数f(x)=x2,要把这个函数作用 ...

  7. unicode下数据之间的转换

    首先mfc下字符串只有两种数据:char(一个字节)和wchar_t(两个字节),很多其他数据类型如TCHAR,WCHAR等都是这个两个基本类型的宏定义,BYTE是uchar 1.对话框打印char* ...

  8. MR案例：分区和排序

    现有一学生成绩数据,格式如下:<学号,姓名,学院,成绩>  //<id, name, institute, grade>. 需求描述:查询成绩大于等于60分的学生数据,按学院分 ...

  9. shell小脚本－－网速监控

    在windows中,我们可以在360等管家软件中显示网速,在linux下想要查看实时的网速怎么办呢?当然在linux下也有很多优秀的软件可以实时显示网络状况!但是在这里我们使用shell脚本来先完成网 ...

  10. Tornado异步(2)

    Tornado异步 因为epoll主要是用来解决网络IO的并发问题,所以Tornado的异步编程也主要体现在网络IO的异步上,即异步Web请求. 1. tornado.httpclient.Async ...