机务UI设计小节

1.CSS样式

.header {
    background-color:#7A8692;
    color:White;
    height:30px;
    font-size:16px;
    width:100%;
    line-height:30px;
    display:table;
    vertical-align:middle;
    padding-left:10px;
}
这里需要设置line-height值和height的值一致才行。

2.在div的最外层设置bg-color可以是的里层的div的颜色变化。但是如果仅仅是设置里层div的bg-color则无效。

3.只要是设定了width:100%，就意味着长度就是充满页面，如果在设置了margin-left和margin-right并不会改变他的长度，而是位置了margin-left，然后整体元素右移。所以如果希望元素的居中并左右留白，不能设置width:100%。可以选择不设置，自适应。

4.设置padding-left会导致div变长

5.如果想要为某一个HTML元素后面的class指定样式，切记一定要将他们紧挨着。

table td.tdCenter{ text-align:center;}

6.Label现在宽度为80，我改为了100，因为80只是够4个汉子+一个冒号，这样的设计之初就应该考虑最大容纳的字数，如果当时想到了只是需要4个，一定会发现有问题。所以做控件设计一定要考虑规格，不要只是考虑当前的情况，要考虑延展性。因为你现在所做的已经不再是你一个人的内容。

7.切记：只要是定义一个容器控件，比如“divFieldset”，“containter”等等，一定要旁白留出来，通过这种方式减轻里面控件定义样式的内容。

8.border-width不同于margin/padding，可以一次性指定四个边，如果只是想要指定一个边显示边框，可以是使用：border-width:0px; border-bottom-width:1px;这样的方式，比较方便。或者只是隐藏一边可以这样使用：border:1px solid #7A8692; border-top-width:0px;

9.我一直想要让Tab和下面的div重合，margin：0px之外还要设置padding:0px;(其实margin：0没什么意义，因为默认就是0px）只有这样上下两个控件的边沿才能真正意义的重合。

10.控件选中后会有一个虚线框（比如a），效果如下：

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
    cursor: pointer;
}

处理如下：

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
    cursor: pointer;
outline:0;
}