zoukankan      html  css  js  c++  java
  • DIV+ul+LI实现表格效果以及div带滑动条

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

    1.先看看效果

    2.网页代码

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 
     3 
     4 <html xmlns="http://www.w3.org/1999/xhtml">
     5 <head>
     6 <title>divtest</title>
     7 <style>
     8 #t {
     9 width: 404px;
    10 margin: 5px auto;
    11 padding:0px;
    12 border-top: #0066cc 1px solid;
    13 border-left: #0066cc 1px solid;
    14 display:table;
    15 }
    16 #t li {
    17 float: left;
    18 width: 100px;
    19 height: 50px;
    20 list-style-type: none;
    21 border-right:#0066cc 1px solid;
    22 border-bottom: #0066cc 1px solid;
    23 text-align: center;
    24 line-height: 50px;
    25 }
    26 </style>
    27 </head>
    28 
    29 <body>
    30    
    31    <div style="overflow:scroll; height:100px; 200px">
    32     <ul>
    33     <li>dddddd</li>
    34     <li>dddddd</li>
    35     <li>dddddd</li>
    36     <li>dddddd</li>
    37     <li>dddddd</li>
    38     <li>dddddd</li>
    39     <li>dddddd</li>
    40     <li>dddddd</li>
    41     <li>dddddd</li>
    42     <li>dddddd</li>
    43     <li>dddddd</li>
    44     <li>dddddd</li>
    45     <li>dddddd</li>
    46     <li>dddddd</li>
    47     <li>dddddd</li> 
    48     <li>dddddd</li>
    49     <li>dddddd</li>       
    50     </ul>
    51    </div>
    52    <ul id="t">
    53 <li style="403px;">helloworld</li>
    54 <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li>
    55 </ul>
    56 
    57 </body>
    58 </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自动设置,其中前景色,背景色(虚点表示)颜色一致,其他效果(阴影以黑色填充),没有什么要求时,建议不设置此效果*/

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

  • 相关阅读:
    k8s访问服务时,解析不了域名
    docker常用常用删除操作
    Linux_修改hosts
    java-深克隆和浅克隆
    Mybatis 中$与#的区别
    mysql-修改字段类型和修改字段名称
    HttpMessageNotReadableException(一)
    log4j2的环境变量使用
    Linux中修改环境变量及生效方法
    转!!mysql order by 中文排序
  • 原文地址:https://www.cnblogs.com/annabook/p/3978970.html
Copyright © 2011-2022 走看看