室內設計
 
尚佶網頁設計主選單
網頁美編設計製作
行動手機‧行動電視
網頁設計
網頁設計
最新訊息:
  網頁設計全球效應
  網頁設計的行銷效用?
作品設計歷程:
  昇華文件櫃有限公司
Shen Hua Filing Cabinet
File Cabinet
  戀戀紅葡萄酒酒莊 酒莊
  美和美吊扇公司
  HCB AUTO TOOLS
  鳳凰企業社
  國立中正大學行銷創意研究中心
  銘輝毛刷有限公司
  大業國中 嘉義市 97 海洋教育計畫
  鳳凰冰涼巾公司
  進泉瓜子
  金鴻勝酒廠
  集順汽車椅套
  嘉義市97教學卓越計畫
  鉅祥工具開發有限公司
更多作品 >>
 

 

 

 

 

 

 

 

filing cabinet file cabinet 新恩嘉義神經內科 新恩嘉義神經內科

 

 
 
網頁設計+創意=100%網站 arrow 網頁設計教學與製作技巧 arrow css網頁設計教學與網頁製作技巧. arrow 網頁設計製作教學分享 css menu 橫式下拉式選單(二)   
網頁設計製作教學分享 css menu 橫式下拉式選單(二) E-mail
2009/04/18, 週六

網頁製作 css 橫式下拉式選單 

網頁設計製作教學分享 css menu 橫式下拉橫式子選單(二) 

網頁設計或製作的同時,通常對於選單的顏色配置,也會使用較單一的顏色,這一個css menu 橫式下拉式選單的顏色配置就比較協調,是屬於較精緻型的配色。css選單有用圖下去配置的有用圖下去做的只要找到圖的位置,就可以更換。

top_23.jpg

 

 


 以下貼於<head>與</head>之間:

<style type="text/css">
#info {padding-bottom:100px;}

.pro_line2 {
height:36px;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
z-index:500;
}

.pro_line2 .select {
margin:0;
padding:0 0 0 20px;
list-style:none;
white-space:nowrap;
}

.pro_line2 li {
float:left;
background:url(line/blank_over.gif);
}

.pro_line2 .select a {
display:block;
height:36px;
float:left;
background: url(line/blank.gif);
padding:0 0 0 15px;
text-decoration:none;
line-height:25px;
white-space:nowrap;
color:#ddd;
}

.pro_line2 .select a b {
display:block;
padding:0 30px 10px 15px;
background:url(line/blank.gif) right top;
}

.pro_line2 .select a:hover,
.pro_line2 .select li:hover a {
background: url(line/blank_over.gif);
padding:0 0 0 15px;
line-height:27px;
cursor:pointer;
color:#fff;
}

.pro_line2 .select a:hover b,
.pro_line2 .select li:hover a b {
display:block;
padding:0 30px 9px 15px;
background:url(line/blank_over.gif) right top;
cursor:pointer;
}

.pro_line2 .sub {
display:none;
}

/* IE6 only */
.pro_line2 table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.pro_line2 .sub {
margin:0;
padding:0 0 0 60px;
list-style:none;
}
.pro_line2 .sub li {background:transparent;}

.pro_line2 .select :hover .sub {
height:18px;
display:block;
position:absolute;
float:left;
width:750px;
top:28px;
left:0;
text-align:center;
}

.pro_line2 .select :hover .sub li a
{display:block;height:18px; line-height:16px; float:left; background:transparent url(line/transparent.gif); padding:0 16px; margin:0; white-space:nowrap; border:1px solid #000; border-color:#888 #777 #666 #ddd; color:#888;font-size:10px;}

.pro_line2 .select :hover .sub li a:hover
{color:#000; background:#e8e8e8; border-color: #fff #333 #000 #fff; line-height:15px;}

</style>

 


 以下貼於<body>與</body>之間:

<div class="pro_line2">
<ul class="select"><li><a href="#nogo"><b>Home</b></a></li>
<li><a href="#nogo"><b>Joseph Turner</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul class="sub">
  <li><a href="#nogo">Fishermen at Sea</a></li>

  <li><a href="#nogo">The Shipwreck</a></li>
  <li><a href="#nogo">The Vale of Ashburnham</a></li>
  <li><a href="#nogo">Crossing the Brook</a></li>
 </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>John Constable</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul class="sub">

  <li><a href="#nogo">The Hay Wain</a></li>
  <li><a href="#nogo">Brighton Beach</a></li>
  <li><a href="#nogo">Malvern Hall</a></li>
  <li><a href="#nogo">Salisbury Cathedral</a></li>
  <li><a href="#nogo">Weymouth Bay</a></li>
 </ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>Henri Matisse</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul class="sub">
  <li><a href="#nogo">The Girl with Green Eyes</a></li>
  <li><a href="#nogo">The Dream</a></li>
  <li><a href="#nogo">Woman in Blue</a></li>
  <li><a href="#nogo">The Yellow Dress</a></li>

  <li><a href="#nogo">The Piano Lesson</a></li>
 </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>Paul Cezanne</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul class="sub">
  <li><a href="#nogo">The Large Bathers</a></li>
  <li><a href="#nogo">Onions and Bottles</a></li>

  <li><a href="#nogo">Mardi Gras</a></li>
  <li><a href="#nogo">Still Life</a></li>
  <li><a href="#nogo">Boy in a Red Waistcoat</a></li>
 </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

 

< 上一頁   下一頁 >
top_18.jpg
 
 
尚佶網頁設計 2011 © copyright 版權所有.All rights reserved.
 
©2011 Sungie