今天做页面布局的时候,我要写一个星级选择的控件,如图:
我首先定义了一个wrapper来定位,让它position为relative,然后里面存放一个存放颜色的div和整个星星的图片DIV,星星图片如图:
星星的展示实际上就是利用存放颜色的div的宽度来控制,如总共5星,现在展示3星,那么颜色div的宽度就为60%。
PS:颜色DIV和图片DIV都为position:absolute;
颜色展示完成之后,就是鼠标移动到上面去可以选择星星的个数,这个我是通过一个ul实现的,ul的位置和整个图片DIV一样,ul中间每个li的宽度和每个星星的宽度相同,然后利用代理ul这个元素实现li的选取,如选择了第二个Li,就代表选择2星,然后改变颜色DIV的宽度。
ul这个地方今天遇到了一点问题,就是Position:absolute定位的时候一直不正常,正常情况下我希望它和图片DIV重合,结果它一直在下面,找了很久,终于发现原来chrome中有这样一个:
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
原来chrome定义了UL的margin和padding,而我在自己的控件中没有指定padding和margin,坑爹啊真是。。。
现定义规则:
padding:0;
margin:0;
正常了,好,记录完成,手工,继续码起!!!