！声明文档类型

html lang='zh '

头

meta charset='UTF-8 '

meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1 '

元名称='视口'内容='宽度=设备宽度，初始比例=1.0 '

标题实用垂直选项卡射流研究…/title

元名称='关键字'内容='实用，垂直选项卡，js' /

元名称='描述'内容='实用垂直选项卡射流研究…。' /

链接rel='样式表type=' text/CSS ' href=' CSS/normalize。CSS '/

链接rel='样式表type=' text/CSS ' href=' CSS/default。' CSS '

style type='text/css '

html，body {

边距：0；

padd : 0；

宽度： ;

/*高度： ;*/

背景色： # eee

font-family : ' Raleway

}

ul，li {

边距：0；

padd : 0；

列表样式：无；

}。图标{

相对位置：

宽度： 32px

高度： 32px

显示器：块；

fill: rgba(51，51，51，0.5)；

margin-right : 20px；

-网络套件-transit : all。2s易出；

公交：全。2s易出；

}。icon.active {

填充填充： # E74C3C

}。图标。大

宽度： 64px

高度： 64px

fill: rgba(51，51，51，0.5)；

}

#wrapper {

宽度： 900 px

高度： 400px

位置：

top : 0；

底部： 0；

左： 0；

右： 0；

margin:自动

背景-color : # fff；

box-shadow: 0 1px 3px rgba(0，0，0，0.12)，0 1px 2px rgba(0，0，0.24)；

显示：-web工具箱；

display :-web kit-flex；

显示：-ms-flex盒；

显示： flex

-web kit-box-align : center；