jquery+css实现tab选择项代码
代码语言:html
所属分类:布局界面
代码描述:jquery+css实现tab选择项代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #222d3b; font-family: 'Raleway', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: 100px; text-align: center; } .transition { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } #switch { font-size: 0; background-color: #2a3a47; display: inline-block; color: #82909b; padding: 4px; vertical-align: middle; } #switch .choice { font-size: 16px; width: 100px; height: 30px; line-height: 30px; text-align: center; padding: 8px; display: inline-block; cursor: pointer; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; vertical-align: middle; } #switch .choice.on { color: #fff; background-color: #222d3b; } #switch .or { font-size: 10px; color: #fff; position: absolute; margin-top: 19px; margin-left: 108px; z-index: 1; } #switch ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0