關於部落格
雨--是天空的眼淚 風--是蝴蝶的痴醉 雲--是水珠的嫵媚 光--是溫暖的慰藉 夜--是孤單的滋味 星--是墜跌的心碎 蹲下,是為了躍起。 後退,是為了向前跳得更遠。
  • 171475

    累積人氣

  • 4

    今日人氣

    0

    訂閱人氣

CSS 下拉式選單



所以就設計了一下CSS下拉式選單
因為這次有使用到一些圖檔
所以就附上原始檔 請點


其實CSS是很簡單的
只要英文字看的懂
要學就沒什麼難度了
如果硬要說困難的地方..
就只有2個
1.要考慮各大瀏覽器
2.創意


恩..
以下是程式碼
有不懂的就留言吧:)


檔名:list.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="css/list.css" type="text/css" media="all" />
<title>CSS下拉式選單</title>
<body>
<ol>
 <li class="list_menu"><a href="#">伺服端</a>
  <ul>
   <li><a href="#">PHP</a></li>
   <li><a href="#">ASP.NET</a></li>
   <li><a href="#">ASP</a></li>
  </ul>
 </li>
 <li class="list_menu"><a href="#">用戶端</a>
  <ul>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JavaScript</a></li>
  </ul>
 </li>
 <li class="list_menu"><a href="#">物件導向</a>
  <ul>
   <li><a href="#">C#</a></li>
   <li><a href="#">JAVA</a></li>
   <li><a href="#">C++</a></li>
  </ul>
 </li>
</ol>
</body>
</html>


檔名:list.css

@charset "utf-8";

/* 基本樣式 */

body {
	font-size: 75%;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5;
	color: #333333;
	background-color: #ffffff;
	text-align: center;
}

a:link, a:visited {
	text-decoration:none;
}

.list_menu {
	float:left;
	border-bottom: #aaa 1px solid;
	list-style: none;
	margin: 0px;
	padding: 5px;
	position: relative;
	background: url(../images/toolbar_b.jpg) left top repeat-x;
	z-index: 1;
}
.list_menu:hover {
	background: url(../images/toolbar_a.jpg) left top repeat-x;
	z-index: 1;
}

ol ul {
	display:none;
	position:absolute;
	left:0;
	top: 28px;
	padding:0;
	margin:0;
}
li:hover ul{
	display:block;
}

li {
	border-bottom: #fff 1px solid;
	list-style:none;
	margin: 0;
	padding: 5px;
	width: 80px;
	background: url(../images/gray.jpg) left top repeat;
	z-index: 1;
}
li:hover {
	background: url(../images/yellow.jpg) left top repeat;
}

文:葉小誠

相簿設定
標籤設定
相簿狀態