前端新手项目练习之select控件

前端新手记录自己在网络上找到的前端练习项目。昨天去通州考试,早上五点出发赶第一班地铁,真是累的要死。

项目简介

一个简单的select控件,点击出现下拉菜单,可以进行选择。


前端新手项目练习之select控件_第1张图片
select控件.gif

html部分

主要包括一个表单和一个列表。


    

CSS部分

CSS部分比较特别的是一个所有背景放到了一张图片上,这样的好处是可以减少HTTP连接次数,提高网页加载速度。


background-position属性

设置背景图像(由background-image设置)的起始位置。

letter-spacing属性

letter-spacing 属性增加或减少字符间的空白(字符间距)。

text-decoration属性

规定添加到文本的修饰,本项目用来去除链接上默认的下划线。

javascript部分


主要是给元素添加事件,比较值得注意的时cancalBubble
属性,可以通过把他的值设置为true来阻止事件冒泡。

总结

比较简单的小项目,主要也是练习对DOM元素的事件的掌握和对select空间的学习。项目源码地址https://github.com/yunkai123/WebProjectStudy。

你可能感兴趣的:(前端新手项目练习之select控件)