CSS制作表格式按钮

最新推荐文章于 2021-08-03 23:45:38 发布

蓝色水

最新推荐文章于 2021-08-03 23:45:38 发布

阅读量859

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/orichisonic/article/details/51011654

版权

CSS 专栏收录该内容

80 篇文章 0 订阅

订阅专栏

仿照新手理财专题做新发基金专题的筛选的时候学会了用table和tablecell的样式来制作表格样式的图层，其实外面是两个div，里面分左中右来区分样式，css如下：

   #filter {
            position: relative;
            right: 20px;
            float: right;
            top: 8px;
        }

        #filterMenu {
            height: 148px;
            border-top: solid 1px #CFCED3;
            box-sizing: border-box;
            position: relative;
            margin: 0 auto;
            padding: 0 24px;
            overflow: hidden;
            /*border-bottom:solid 1px  #CFCED3;*/
        }
        .content {
            display: table;
            width: 100%;
            /*padding:20px 0;*/
            /*padding: 1.25rem 0.109375rem;*/
        }

        .filter {
          
           display: table-cell;
            width: 33%;
            box-sizing: border-box;
            text-align: center;
            vertical-align: middle;
        }

        .Left {
            display: table-cell;
            /*width: 100%;*/
            text-align: center;
            
            
        }

        .Middle {
            display: table-cell;
            /*width: 100%;*/
            text-align: center;
            vertical-align:top;
          padding:  0 15px;
           
        }

        .Right {
            display: table-cell;
            /*width: 100%;*/
            text-align: center;
            vertical-align:top;
         
              
        }

        .filterButton {
            width: 80px;
            height: 32px;
            border-radius: .2em;
            outline: solid 1px #CFCED3;
            
            display: block;
            vertical-align: middle;
            line-height: 2.0;
            margin: 13px auto;
        }

最后的filterButton用来描绘按钮，需要边角弧度以及线高，当然这些都需要把display变成block，否则边框贴着文字，这边margin用来设置上下间距，然后filter和Left结合来做左边部分，当然要设置他们的padding来做左边部分和中间部分以及右边部分的间距，这边尝试下来margin没有用处，具体也不知道原因，希望高手指点。HTML的如下：

   <!--write filtMenu here-->
        <div id="filterMenu">
            <div class="content">
                <div class="filter Left">
            <a id="all" class="filterButton"><span>全部</span></a>
            <a id="bondType" class="filterButton"><span>债券型</span></a>
             <a id="setToOpen"  class="filterButton"><span>定开债</span></a>
            </div>
            <div class="filter Middle">
            <a id="stockType" class="filterButton "><span>股票型</span></a>
            <a id="QDIIType" class="filterButton"><span>QDII</span></a>
            </div>
            <div class="filter Right">
            <a id="hybridType" class="filterButton "><span>混合型</span></a>
            <a id="breakevenType" class="filterButton"><span>保本型</span></a>
            </div>
                </div>
        </div>

这边特别要指出的我是按照px来设置高度和宽度，比较精确，到时候转换成自适应的REM，这边border边框用outline因为outline不占用空间。解释如下：

1.border
设置元素主要的边框属性，包括border-width、border-style、border-color，可缺省，无固定顺序。
e.g.

[css] view plaincopy
border: red 10px solid;
border: 5px blue;

border-style
统一设置元素各边框的格式，按照CSS顺序规则。可取的值如下表所示：

CSS顺序规则：当值有4个时，依次按照上、右、下、左设置；当值有3个时，依次按照上、左右、下设置；当值有2个时，依次按照上下、左右设置；当值只有1个时，则为4个方向设置为相同的值。以本属性为例：

[css] view plaincopy
border-style: soliddotted dashed double;
/*
上边框为实线
右边框为点状
下边框为虚线
左边框为双线
*/
border-style: solid dotteddashed;
/*
上边框为实线
左右边框为点状
下边框为虚线
*/
border-style: soliddotted;
/*
上下边框为实线
左右边框为点状
*/
border-style: solid;
/*
4个方向的边框都是实线
*/

border-style的默认值为border-style:none。
border-width
统一设置元素各边框的宽度，按照CSS顺序规则。只有当border-style不为none时才有效。不能设置为负值。值可以是thin（细）、medium（中等）、thick（粗），也可以是数值。默认为border-width: medium。
border-color
统一设置元素的各边框颜色，按照CSS顺序规则。当border-style为none或hidden时失效，所以在设置边框颜色前需要保证border-style的值不为none、hidden。值可以是任意CSS支持的颜色值。默认为border-color: transparent。
border-top、border-right、border-bottom、border-left
设置元素的上/右/下/左边框的主要属性，包括border-***-style、border-***-color、border-***-width，可缺省，无固定顺序。
border-top-style、border-right-style、border-bottom-style、border-left-style
设置元素上/右/下/左边框的样式，取值与border-style相同，默认为none。
border-top-width、border-right- width、border-bottom-width、border-left- width
设置元素上/右/下/左边框的宽度，取值与border-width相同。只有当border-***-style不为none时才有效，不能为负值，默认为medium。
border-top-color、border-right- color、border-bottom-color、border-left- color
设置元素上/右/下/左边框的颜色，取值与border-color相同。只有当border-***-style不为none和hidden时才有效。默认为transparent。
2.outline（轮廓）
在元素边框边缘的外围绘制一条包围元素的线，包括outline-color、outline-style、outline-width三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。
除了IE以外的浏览器都直接支持outline。只有规定了!DOCUMENT之后的IE8以上版本的浏览器才支持outline。
e.g.
[css] view plaincopy
outline: solid black;
outline: dotted thin #0000ff;

outline-style
设置元素轮廓的格式，其取值与border-style类似，但没有hidden值。默认为none，无轮廓。
outline-width
设置元素轮廓的宽度，其取值与border-width类似。只有当outline-style不为none时才有效。默认为medium。
outline-color
设置元素轮廓的颜色，其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。

总结：这两者的区别有:
1.outline是不占空间的，既不会增加额外的width或者height
2.outline有可能是非矩形的