知識社群登入
位置: 知識社群 (iSites) 教學 > 討論區 > 討論
boxItem的連結顏色 ( 版面設計基礎說明 (css 設定))
(Ds028, 2010-08-10 12:33)
1樓
不好意思，想要請問boxItem的連結顏色是否可以做出與boxBody相異的顏色？
由於想做出主選單與子選單不同的顏色，因此在 #menu .boxBody 與 #menu .boxItem 之下分別設了 #menu .boxBody        a:link {color:#f989fd} 與 #menu .boxItem        a:link {color:#fff; text-decoration:none} 兩個連結色。
但似乎因為繼承問題讓boxBody與boxItem的連結色皆為boxBody的顏色，請問是否能讓boxItem的顏色不要繼承boxBody呢??
(鍾玉芳, yufchung@powercam.com.tw, 2010-08-10 17:10)
3樓
您好:
 
因為 #menu .boxItem a:link { } 僅針對連結字體變色
a:hover, a:visited 也需做顏色的設定
 
若所有超連結動作的字體顏色都相同 (如: 連結字體、點擊連結過的文字等)
可以直接輸入 #menu .boxItem a {color:#fff}
(Ds028, 2010-08-11 14:49)
4樓
謝謝您的答覆
但由於在不同區塊的超連結有不同色調的需求，因此在menu區塊有做額外的設定。
目前的問題在於想讓選單中的下拉選單字體顏色與一般選單有差異，因此作了如下設定：

#menu .box          {padding:0px -5px; margin-bottom:20px; white-space:nowrap; text-align:left; background:#111}
#menu .boxHeader    {font-weight:bold; font-size:14px; padding-left:25px; color:#abfc7a; background:url(http://openstudy.npue.edu.tw/sysdata/83/83/doc/335c2d16a0758961/attach/2729.png) no-repeat left bottom; height:33px}
#menu .boxBody      {font-weight:bold; margin:0; color:#555; padding-right:15px; padding-left:15px; background:url(http://openstudy.npue.edu.tw/sysdata/83/83/doc/335c2d16a0758961/attach/2701.png) repeat-y;}
    #menu .boxBody        a:link {color:#fff}
    #menu .boxBody        a:visited   {color:#fff}
    #menu .boxBody        a:hover     {color:#f00}
#menu .boxFooter    {background:url(http://openstudy.npue.edu.tw/sysdata/83/83/doc/335c2d16a0758961/attach/2702.png) no-repeat left bottom; height:37px}
#menu .boxItem      {width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
    #menu .boxItem        a:link {color:#fff; text-decoration:none}
    #menu .boxItem        a:visited   {color:#fff; text-decoration:none}
    #menu .boxItem        a:hover     {color:#f00}
#menu .tools        {font-size:10.5px; text-align:right}

而menu .boxItem部份的超連結似乎因繼承問題而被menu.boxBody的超連結設定取代掉，
想要請問有否讓他成為例外或其他解決方案？
(Ds028, 2010-08-11 15:09)
5樓
啊，剛剛打錯了，是：

#menu .box          {padding:0px -5px; margin-bottom:20px; white-space:nowrap; text-align:left; background:#111}
#menu .boxHeader    {font-weight:bold; font-size:14px; padding-left:25px; color:#abfc7a; background:url(http://openstudy.npue.edu.tw/sysdata/83/83/doc/335c2d16a0758961/attach/2729.png) no-repeat left bottom; height:33px}
#menu .boxBody      {font-weight:bold; margin:0; color:#555; padding-right:15px; padding-left:15px; background:url(http://openstudy.npue.edu.tw/sysdata/83/83/doc/335c2d16a0758961/attach/2701.png) repeat-y;}
    #menu .boxBody        a:link {color:#fff}
    #menu .boxBody        a:visited   {color:#fff}
    #menu .boxBody        a:hover     {color:#f00}
#menu .boxFooter    {background:url(http://openstudy.npue.edu.tw/sysdata/83/83/doc/335c2d16a0758961/attach/2702.png) no-repeat left bottom; height:37px}
#menu .boxItem      {width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
    #menu .boxItem        a:link {color:#888; text-decoration:none}
    #menu .boxItem        a:visited   {color:#888; text-decoration:none}
    #menu .boxItem        a:hover     {color:#f00}
#menu .tools        {font-size:10.5px; text-align:right}