作者appleboy46 (小惡魔)
看板Web_Design
標題Re: [問題] 網頁右上角的快速功能一問
時間Wed Oct 7 10:40:20 2009
※ 引述《victer0327 (victory)》之銘言:
: Q1.
: 請問用哪種方式可以排序網頁右上角的快速功能???
: 圖示:
: |回首頁 |網站連結 |常問集 |網站地圖
: Home Contacts FAQ Sitemap
: <ul>及<li>似乎只能向下排列,是否只能使用table把它們定住呢???
: Q2.
: 另外想請問<ul>,<li>的排序會變成偏右的感覺(因為他預留的<ul>的空間)
: 如下圖示:
: ------
: | |
: | .0000 |
: | .0000 |
: | |
: | |
: | |
: | |
: ------
: 但我想幫底的div上色,到時就會很明顯偏一邊,請問有辦法解決嗎??
這兩個問題可以使用 css 來解決
1. 如果要 <ul> <li> 可以向右排序:
ul.button-bottom{
float:left;
position:relative;
left:50%;
list-style-type:none;
}
ul.button-bottom li{
float:left;
position:relative;
right:50%;
width:auto;
}
ul.button-bottom li a{
display:block;
margin-left: 5px;
margin-right: auto;
color:#FFFFFF;
padding:5px 10px 5px 5px; /* Links */
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
background-color:#0275c6;
font-size:100%;
line-height:120%;
font-weight:bold;
cursor:pointer;
position:relative;
}
ul.button-bottom li a:hover{
color: #336699;
background-color:#dff4ff;
border:1px solid #c2e1ef;
}
ul.button-bottom li a {
text-decoration:none;
}
這樣可以排出按鈕出來,demo 範例:
http://deptcrm.ccu.edu.tw/index.php/news/showNews/87 最底下的
<ul class="button-bottom">
<li><a href="/index.php/about/">系所簡介</a></li>
<li><a href="/index.php/about/future/">未來展望</a></li>
<li><a href="/index.php/teacher/">系所師資</a></li>
<li><a href="/index.php/about/assistant/">系務助理</a></li>
<li><a href="/index.php/about/map/">系所位置</a></li>
<li><a href="javascript:history.go(-1)">返回上頁</a></li>
</ul>
第二個問題,也是用 CSS 下去解決
也可以參考:
http://qrayg.com/learn/code/cssmenus/
--
PHP MVC CodeIgniter 繁體中文手冊:
http://tinyurl.com/mduyv8
PHP MVC CodeIgniter 繁體中文討論區:
http://tinyurl.com/yayzoz8
PHP MVC CodeIgniter 中文官方網站:
http://tinyurl.com/yatds8n
Appleboy Blog 電腦技術:
http://blog.Wu-Boy.com
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.123.107.202
※ 編輯: appleboy46 來自: 140.123.107.202 (10/07 10:41)
※ 編輯: appleboy46 來自: 140.123.107.202 (10/07 10:45)
推 victer0327:哇!!!謝謝超專業回答 10/07 11:49
推 victer0327:剛剛才發現,是我常去看的網站作者回我文耶!!!! 10/08 11:22