Created
April 27, 2016 10:30
-
-
Save qzm/61c66dcbb4d19092039ff1a457dedde4 to your computer and use it in GitHub Desktop.
tabs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Tab</title> | |
| <style> | |
| ul { | |
| text-align: center; | |
| width: auto; | |
| } | |
| li { | |
| /* 去除间隔 */ | |
| margin-right: -4px; | |
| display: inline-block; | |
| width: 100px; | |
| height: 50px; | |
| background-color: #5f5f5f; | |
| color: #eee; | |
| list-style-type: none; | |
| text-align: center; | |
| line-height: 50px; | |
| } | |
| /* 点击效果 */ | |
| li.active { | |
| color: #fff; | |
| background-color: #4CAF50; | |
| } | |
| /* 左侧圆角 */ | |
| li:first-child { | |
| -webkit-border-radius: 5px 0 0 0; | |
| -moz-border-radius: 5px 0 0 0; | |
| -ms-border-radius: 5px 0 0 0; | |
| -o-border-radius: 5px 0 0 0; | |
| border-radius: 5px 0 0 0; | |
| } | |
| /* 右侧圆角 */ | |
| li:last-child { | |
| -webkit-border-radius: 0 5px 0 0; | |
| -moz-border-radius: 0 5px 0 0; | |
| -ms-border-radius: 0 5px 0 0; | |
| -o-border-radius: 0 5px 0 0; | |
| border-radius: 0 5px 0 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul> | |
| <li>Tab 1</li> | |
| <li class="active">Tab 2</li> | |
| <li>Tab 3</li> | |
| <li>Tab 4</li> | |
| <li>Tab 5</li> | |
| </ul> | |
| </body> | |
| </html> |
Author
qzm
commented
Apr 27, 2016
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment