如何將CSS應用於具有主頁面的導航欄？

我正在開發一個項目，但遇到了僅將CSS應用於導航欄的問題。我的項目包含如何將CSS應用於具有主頁面的導航欄？

母版頁
home.aspx
gallery.aspx

當我申請上master.pagemenu.css文件導航欄它會影響表的其餘部分以及其他內容網頁（home.aspx和gallery.aspx）我的代碼如下所示：

master.page

<body style="background-image: url('/WebSite5/bacground/Fruit-drinks-vector-pptbackgrounds.jpg')"> 
<form id="form1" runat="server"> 
<div> 
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">   
    <table align="center" class="style1"> 
     <tr> 
     <td style="text-align: center"> 
      <img alt="" class="style2" src="bacground/logo.png" /> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <uc1:menu ID="menu1" runat="server" /> 
     </td> 
     </tr> 
    </table>   
    </asp:ContentPlaceHolder> 
</div> 
<table class="style3"> 
    <tr> 
    <td style="text-align: center"> 
     <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server"> 
     </asp:ContentPlaceHolder> 
    </td> 
    </tr> 
</table> 
</form> 
</body>

menu.ascx

<table class="style1"> 
    <tr> 
    <td> 
     <ul id="nav">`enter code here` 
     <li class="home" aria-orientation="horizontal"><a href="#">Home</a></li> 
     <li class="Gallery"><a href="#">Gallery</a></li> 
     <li class="events"><a href="#">Events</a></li> 
     <li class="About US"><a href="#">About US</a></li> 
     <li class="contact"><a href="#">Contact</a></li> 
     </ul> 
    </td> 
    </tr> 
</table>

menu.css

#ul li { 
    list-style: none; 
    height: 44px; 
    float: left; 
    padding: 10px 5px; 
    width: 175px; 
} 

#ul li a { 
    width: 146px; 
    height: 40px; 
    line-height: 53px; 
    border-bottom: 4px solid #636393; 
    padding:0px; 
    color: #fff; 
    font-size:18px; 
    font-weight:lighter; 
    text-align:center; 
    text-decoration: none; 
    display: block; 
    -webkit-transition: .2s all linear; 
    -moz-transition: .2s all linear; 
    -o-transition: .2s all linear; 
    transition: .2s all linear; 
} 

#li:nth-child(1) a { 
    border-color: #636393; 
} 

#li:nth-child(2) a { 
    border-color: #B5222D; 
} 

#li:nth-child(3) a { 
    border-color: #D4953C; 
} 

#li:nth-child(4) a { 
    border-color: #609491; 
} 

#li:nth-child(5) a { 
    border-color: #87A248; 
} 

#li:nth-child(1) a:hover { 
    border-bottom: 35px solid #636393; 
    height: 9px; 
} 

#li:nth-child(2) a:hover { 
    border-bottom: 35px solid #B5222D; 
    height: 9px; 
} 

#li:nth-child(3) a:hover { 
    border-bottom: 35px solid #D4953C; 
    height: 9px; 
} 

#li:nth-child(4) a:hover { 
    border-bottom: 35px solid #609491; 
    height: 9px; 
} 

#li:nth-child(5) a:hover { 
    border-bottom: 35px solid #87A248; 
    height: 9px; 
}

請幫助我。

來源

2013-05-15 Umar Khan

要將CSS應用於一個元素，請使用id，ex。那麼在CSS中：

#nav { 
    color:yellow; 
} 
#nav li { 
    font-size:19pt; 
}

其餘的元素（沒有id == nav）不會受到影響。

例如： http://jsfiddle.net/igos/tJWq6/

來源

2013-05-15 09:21:38

如何將CSS應用於具有主頁面的導航欄？

回答

相關問題