CSS menu (...陸陸續續整理中)
請各位 新進的 使用者來試試看由 CSS 構成的選單
底下的原始碼 存成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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>無標題文件</title>
<style type="text/css">
#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}
#vertmenu h1 {
display: block;
background-color:#FF9900;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}
#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}
</style>
</head>
<body>
<div id="vertmenu">
<h1>Navigation</h1>
<ul>
<li><a href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="2">About Us</a></li>
<li><a href="#" tabindex="3">Computing</a></li>
<li><a href="#" tabindex="4">Web Sites</a></li>
<li><a href="#" tabindex="5">Games</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div>
</body>
</html>
CSS menu
這是依個很簡單CSS 選單...看起來感覺還不錯請搭配CSS 電子書一起研究 在IE7上面是失效的，可惜！ 是否可以請問一下，
#vertmenu ul li a:hover, #vertmenu ul li a:focus
a:hover 和 a:focus
便是指滑鼠移到上面去嗎?
回復 1# 的帖子
CSS新手，最近剛學寫網頁下載來玩看看 今天又有功課做了...
希望不難才好.... :) 支持下！ :) :) :) 新手^^
看不太懂...
來幫推^^
支持一下^^ 這麼多好的東西~ CSS 好像有點難耶~ 之前有看過一些 希望這次能進步點 謝謝
:) 好像蠻不錯的
下載下來看看
感謝大大的分享....... 下載下來看看，感謝大大的分享 感謝大大的分享拉 學css是網頁設計很重要的一環,也就是說是必學的課程,感謝大大你的分享 受益良多~~超酷!! 網站義工 大大，真的是新手救星啊^^讚!!
研究研究^^ 正在學習CSS，能看到此帖，真是太好了。 CSS新手，最近剛學寫網頁
下載來玩看看 有這個可以學習css,那要上手就方便多了 最近重起爐灶 再來研究CSS 大大讓我多學到一招
多謝了
頁:
[1]