返回顶部

收藏

一个google mail中的圆角table

更多
<html>
    <head>
        <style>
            .hX {
                cursor: pointer;
                display: inline-table;
                margin-right: 4px;
                margin-top: 3px;
                vertical-align: top;
            }       
            .cf {
                border-collapse: collapse;
            }
            .ha {
            color: #000000;
            font-family: arial,sans-serif;
            font-size: 100%;
            }

            .hY .hM, .hQ .hM {
                height: 1px;
            }
            .hT, .hW, .hS {
                width: 1px;
            }

            .hR .hM {
                padding-bottom: 1px;
            }

            .hU, .hV {
                -moz-font-feature-settings: normal;
                -moz-font-language-override: normal;
                -x-system-font: none;
                font-family: verdana,arial,sans-serif;
                font-size: 9px;
                font-size-adjust: none;
                font-stretch: normal;
                font-style: normal;
                font-variant: normal;
                font-weight: normal;
                line-height: normal;
            }
            .hO {
                padding-bottom: 1px;
                padding-left: 4px;
                padding-right: 4px;
                padding-top: 1px;
            }   
            .hN {
                padding-left: 4px;
                padding-right: 6px;
            }                   
        </style>
        <script>

            window.onload = function(){
                var div = document.getElementById('div');
                var tabHtml = tabArray.join(' ');
                div.innerHTML = tabHtml;

                var planTab = document.getElementById('planTab_1');
                var r = planTab.rows;

                var up0 = r[0].cells[1];
                var down0 = r[2].cells[1];
                var left0 = r[1].cells[0];
                var center0 = r[1].cells[1];

                var up1 = r[0].cells[3];
                var down1 = r[2].cells[3];
                var center1 = r[1].cells[3];
                var right1 = r[1].cells[4];

                center0.onmouseover =                
                center1.onmouseover = 
                function(){
                    var style1 = "background-color:rgb(0, 102, 51);color:rgb(241, 245, 236)";
                    this.style.cssText = style1;
                    if(this == center0){
                        up0.style.cssText = style1;
                        down0.style.cssText = style1;
                        left0.style.cssText = style1;

                    }else if(this == center1){
                        up1.style.cssText = style1;
                        down1.style.cssText = style1;
                        right1.style.cssText = style1;                      
                    }
                };

                center0.onmouseout =
                center1.onmouseout = 
                function(){
                    var style1 = "background-color: rgb(241, 245, 236);color:rgb(0, 102, 51);";
                    this.style.cssText = style1;
                    if(this == center0){
                        up0.style.cssText = style1;
                        down0.style.cssText = style1;
                        left0.style.cssText = style1;                   
                    }else if(this == center1){
                        up1.style.cssText = style1;
                        down1.style.cssText = style1;
                        right1.style.cssText = style1;                  
                    }
                };          
            }

            var tabArray = [
                    '<table id="planTab_1" cellpadding="0" class="cf hX">                                          ',
                    '   <tbody>                                                                                      ',
                    '       <tr class="hY hM">                                                                         ',
                    '           <td class="hT hM"></td>                                                                  ',
                    '           <td style="background-color: rgb(241, 245, 236);" class="hU hM"></td>                    ',
                    '           <td style="background-color: #f1f5ec" class="hS hM"></td>                                ',
                    '           <td style="background-color: rgb(241, 245, 236);" class="hV hM"></td>                    ',
                    '           <td class="hW hM"></td>                                                                  ',
                    '       </tr>                                                                                      ',
                    '       <tr class="hR">                                                                            ',
                    '           <td style="background-color: rgb(241, 245, 236);" class="hT hU hM"></td>                 ',
                    '           <td style="background-color: rgb(241, 245, 236); color: rgb(0, 102, 51);" class="hU hM"> ',
                    '               <div alt="一元一本" title="一元一本" name="planName" class="hN">一元一本</div>         ',
                    '           </td>                                                                                    ',
                    '           <td style="background-color: #006633" class="hS hM"></td>                                ',
                    '           <td style="background-color: rgb(241, 245, 236); color: rgb(0, 102, 51);" class="hV hM"> ',
                    '               <span alt="删除" title="删除" name="dw0_11_01" class="hO">X</span>                     ',
                    '           </td>                                                                                    ',
                    '           <td style="background-color: rgb(241, 245, 236);" class="hW hV hM"></td>                 ',
                    '       </tr>                                                                                      ',
                    '       <tr class="hY hM">                                                                         ',
                    '           <td class="hT hM"></td>                                                                  ',
                    '           <td style="background-color: rgb(241, 245, 236);" class="hU hM"></td>                    ',
                    '           <td style="background-color: #f1f5ec" class="hS hM"></td>                                ',
                    '           <td style="background-color: rgb(241, 245, 236);" class="hV hM"></td>                    ',
                    '           <td class="hW hM"></td>                                                                  ',
                    '       </tr>                                                                                      ',
                    '   </tbody>                                                                                     ',
                    '</table>                                                                                      '
            ];
        </script>
    </head>
<body>
    <div id="div"></div>
</body>

</html>
//该片段来自于http://outofmemory.cn

标签:css,基础

收藏

0人收藏

支持

0

反对

0

»更多 您可能感兴趣的代码
  1. 2012-11-05 21:59:42java获得随机数代码 by 怪兽狂殴奥特曼
  2. 2014-05-25 20:47:04水平居中一个不确定宽度的区块 by GauSir
  3. 2014-05-26 16:46:34文字缩略 by tsl0922
  4. 2014-06-29 11:57:59rgba兼容 by arden
  5. 2014-08-05 11:10:42通用文字和图片链接样式 by 猩猩总统
  6. 2014-05-25 16:12:14Bootstrap带输出框的分页样式 by 奔小康
  7. 2014-05-25 21:00:35User Modify让你的文本可编辑 by huwei
  8. 2014-05-26 16:59:04漂亮的链接菜单 by arden
  9. 2014-07-27 21:28:26图片填充文本 by 猩猩总统
  10. 2014-09-13 14:27:24body顶端阴影 by 龙堂修罗
  11. 2014-05-25 16:18:32代替魔鬼的text-indent:-9999px的方式。 by arden

发表评论