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

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

项目简介

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

select控件.gif

html部分

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

    

        

            

                请选择游戏名称
                搜索
            
        
        

            
地下城与勇士
            
魔兽世界
            
DOTA2
            
大话西游II
            
QQ幻想世界
            
热血江湖
            
炉石传说
        
    

CSS部分

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

background-position属性

设置背景图像（由background-image设置）的起始位置。

letter-spacing属性

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

text-decoration属性

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

javascript部分

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

总结

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