2010年8月11日 星期三

CSS 之 ul li 標籤運用(橫向的連結選擇方塊)



橫向的連結選擇方塊,如上圖所示,運用範圍很廣,很多網站都有用到,滑鼠指標移到連結內就變色。

剛開始我還以為是javascrpt,查了下網頁源碼,原來是css,哈哈,話不多說,下面是代碼:

head內的style代碼:

typeul {
margin:10px 130px 0 130px;
padding: 10px 10px 10px 10px;
font-size: 20px;
border: #CCCCCC 5px outset;
}

typeul li {list-style:none;display:inline;padding:5px;}
typeul li a {padding:5px;color:#0066FF;text-decoration:none;}
typeul li a:hover {background:#FF9900;color:#fff;}

由於部落格html會解析誤判,所以將head及body內容以圖片顯示:





大部份的css語法,像margin邊界、border邊框、padding留白、background底色、font-size字大小...等,大家都應該知道就不說明。

這邊只要知道一個css語法 display:inline,用來控制 li 標籤橫向列出文字就可以了。

有需要的人,就拿去用用,或學習一下。

.

沒有留言:

張貼留言