机务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设计小节

处理如下:

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

机务UI设计小节

上一篇:django复习-3-请求与响应


下一篇:优化 Android 线程和后台任务开发