| The code is as follows: |
Copy code |
<Style type = "text/css"> . Demo-container # Tabnav {background: # d5d5d5; border-bottom: 1px solid #333; padding-bottom: 3px; width: 510px; margin: 0 auto} . Demo-container # tabnav ul {padding: 15px 0px 5px 0px; margin: 5px 0px 5px 0px; list-style: none; background: # f1f1f1; border-bottom: 1px solid #999; line-height: 120%} . Demo-container # tabnav ul li {display: inline; margin-left: 10px} . Demo-container # tabnav ul li a {background: # fff; padding: 5px 10px 5px 10px; border: 1px solid #999; line-height: normal} . Demo-container # tabnav ul li a: hover {background: # ccc; color: #666} . Demo-container # tabnav ul li A. here {background: # d5d5d5; padding: 5px 10px 5px 10px; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid # d5d5d5; color: # fff; font-weight: bold} . Demo-container # tabnav ul li a. here: hover {background: # d5d5d5} </Style> <Div id = "tabnav"> <Ul> <Li> < Href = "#"> homepage </a> </li> < Href = "#" class = "here"> technical article </a> </li> <Li> <a href = "#"> submit an article </a> </li> < Href = "#"> Contact Us </a> </li> </ul> </Div> |
The effect is as follows: