Heim > Web-Frontend > CSS-Tutorial > CSS legt die Webnavigationsleiste fest

CSS legt die Webnavigationsleiste fest

高洛峰
Freigeben: 2017-03-27 17:55:56
Original
2539 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen zum Festlegen der Webnavigationsleiste mit CSS im Detail vorgestellt. Freunde, die sie benötigen, können darauf verweisen

html页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN"> 
<head profile="http://gmpg.org/xfn/11"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>FreeBSD</title>       
    <link rel="stylesheet" type="text/css" media="all" href="./css/style.css"> 
    <link rel="stylesheet" id="superfish-css" href="./css/superfish.css" type="text/css" media="all">    
</head> 
<body> 
    <div class="menu-header"> 
        <ul id="menu-%e5%af%bc%e8%88%aa" class="nav sf-js-enabled"> 
            <div id="home_btn"> 
                <a href="#">首页</a> 
            </div> 
            <li> 
                <a href="#">风雨</a> 
            </li>        
            <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"> 
                <a href="#">飘</a> 
            </li> 
        </ul> 
    </div>  
</body> 
</html>
Nach dem Login kopieren
css文件: 
/*** ESSENTIAL STYLES ***/ 
.nav, .nav * { 
    margin:         0; 
    padding:        0; 
    list-style:     none; 
} 
.nav { 
    line-height:    1.0; 
} 
.nav ul { 
    position:       absolute; 
    top:            -999em; 
    width:          13em; /* left offset of submenus need to match (see below) */ 
} 
.nav ul li { 
    width:          100%; 
} 
.nav li:hover { 
    visibility:     inherit; /* fixes IE7 &#39;sticky bug&#39; */ 
} 
.nav li { 
    float:          left; 
    position:       relative; 
} 
.nav a { 
    display:        block; 
    position:       relative; 
} 
.nav li:hover ul, 
.nav li.sfHover ul { 
    left:           0; 
    top:            36px; /* match top ul list item height */ 
    z-index:        99; 
} 
ul.nav li:hover li ul, 
ul.nav li.sfHover li ul { 
    top:            -999em; 
} 
ul.nav li li:hover ul, 
ul.nav li li.sfHover ul { 
    left:           13em; /* match ul width */ 
    top:            0; 
} 
ul.nav li li:hover li ul, 
ul.nav li li.sfHover li ul { 
    top:            -999em; 
} 
ul.nav li li li:hover ul, 
ul.nav li li li.sfHover ul { 
    left:           13em; /* match ul width */ 
    top:            0px; 
} 
 
/*** DEMO SKIN ***/ 
.nav { 
    float:  left; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 14px; 
} 
.nav a { 
    padding: 1em 1.1em 1em 1.1em; 
    text-decoration:none; 
    background: url("22.png") no-repeat -1px 0px; 
} 
 
 
.nav a, .nav a:visited  { /* visited pseudo selector so IE6 applies text colour*/ 
    color: #333; 
    font-weight: 800; 
} 
 
.nav li { 
    /*background: url("../images/menu_divider.png") no-repeat -1px 0px;*/ 
    /*background: url("11.png") no-repeat -1px 0px;*/ 
} 
 
.nav li:hover a { 
    color: #eee; 
} 
 
.nav li li a { 
    background: #333; 
     
} 
.nav li li a:hover { 
    text-decoration: underline; 
} 
.nav li ul { 
    background: #000; 
} 
 
.nav li:hover, .nav li.sfHover, 
.nav a:focus, .nav a:hover, .nav a:active { 
    outline: 0; 
    color: #fff; 
    background: #0088ff;/*鼠标划过或者激活*/ 
} 
 
.nav li ul li:hover, .nav li ul li.sfHover, 
.nav li ul li a:focus, .nav li ul li a:hover, .nav li ul li a:active { 
    outline: 0; 
    color: #fff; 
} 
 
.nav li.current_page_item, 
.nav li.current-cat { 
    background: #333; 
} 
 
.nav li.current_page_item a, 
.nav li.current-cat a { 
    color: #fff; 
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonCSS legt die Webnavigationsleiste fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage