• Register
• Log in

海树枫天 心灵港湾–Seamaple’s Blog

You’re almost as happy as you think you are.

• Home
• About Us

基于CSS的导航

Posted by admin on November 18, 2007 in 朝花夕拾 Views:565 views

译者：Sylvia_Queen

预览：

http://www.nundroo.com/navigation/

代码：

<style media=”all” type=”text/css”>

<!–

body {

margin: 26px;

padding: 0;

background: #fff url(back.png) no-repeat;

}

span {

display: none;

}

ul {

position: relative;

width: 800px;

background: url(bg_nav.png) no-repeat;

height: 113px;

list-style-type: none;

margin: 0;

padding: 0;

}

li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {

background: transparent;

position: absolute;

width: 110px;

height: 32px;

bottom: 0;

text-decoration: none;

}

/* adjusted values for IE6 */

* html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a

{ bottom: -1px; }

li#bu1 a { left: 21px; }

li#bu2 a { left: 122px; background: url(business_hover.gif) 0 0 no

-repeat; }

li#bu3 a { left: 223px; background: url(personal_hover.gif) 0 0 no

-repeat; }

li#bu4 a { left: 324px; background: url(information_hover.gif) 0 0

no-repeat; }

li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover { background-

position: 0 -32px; }

–>

</style>