发表于： 2017-03-27 23:54:39
2 794
一、今天完成的事情
不得不承认自己的自学能力很一般，还是得有自己学习的节奏。
1、将css Sprite雪碧图用在页面布局上。
2、完成模拟下拉选框。
3、使用ul,li 标签布置主内容。
二、明天计划的事情
完成任务6的提交，总结以前的知识要领，开始任务7。
三、遇到的问题
在使用html的select标签的时候，觉得原有的样式比较丑，想把它变的美观一点。Get两个方法。
1.方法一：
原理：将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。
在线示例地址：http://jsbin.com/rejebopahe/edit?html,css,output 方法一根据此篇文章进行修改：http://uplifted.net/programming/change-default-select-dropdown-style-just-css/
2.方法二：
原理：为其添加一个父容器，容器是用来覆盖小箭头的，然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见，即可覆盖即小箭头。然后再为父级容器添加背景图片即可。overflow: hidden并不能隐藏下拉框的显示。
在线示例地址：http://jsbin.com/yuxame/edit?html,css,output
注：旧版IE多用此方法。因为IE8/9并不支持 appearance:none CSS属性。
四、收获
1、学会模拟下拉选项，布置复杂的列表页。
2、掌握自己学习节奏很重要。
返回列表
评论