問題討論區


【CSS 語法】文章精華區


【分享】 雙斜角橫線效果



雙斜角橫線效果
會員二級
註冊日期:
2009/12/7 22:04
留言: 8
嘻嘻 我又來了這次帶來"雙斜角橫線的nav" 我不會貼圖所以只能用文字說明
適用瀏覽器 ie Firefox

DIV部分 - 基本設定

<div id="menu">
<a href="#"> Home</a>
<a href="#"> Contact Us</a>
<a href="#"> Web Dev</a>
<a href="#"> Web Design</a>
<a href="#"> Map</a>
</div>



CSS部分

menu容器設定
#menu {
width:9em; 寬度
margin:0 auto; 水平居中
font-family:Arial; 字體
font-size:14px; 字型大小
border:solid 1px #aaa; 細灰色邊框
}

連結設定 - 功能表選項
#menu a, #menu a:visited {
display:block; 設置為塊級元素
text-decoration:none; 無底線
color:#000; 黑色文字
height:1.4em; 高度
border:0.5em solid #fff; 白色
}

#menu a:hover {
color:#fff; 白色文字
background-color:#aaa; 深灰色背景色
border-color:#ddd #aaa; 上下邊框淺灰色,左右與背景色相同
}

附件:


rar nav.rar 大小: 0.77 KB; 下載次數: 666

jpg  SNAG-0000.jpg (39.01 KB)
2_4b82b520d8002.jpg 582X381 px

2010/2/22 3:07
 


回覆: 雙斜角橫線效果
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169
很棒的效果~ 解說也很清楚~

我把這一篇收到精華區嘍~

感謝熱心的小冷啦~

2010/2/23 0:50
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS