推 cgcat:真是佛心來也!!感謝 07/28 14:23
討論CSS是清流 XD
先簡化一下HTML~
<div id="nav">
<ul>
<li><a href="">about</a></li>
<li><a href="">about</a></li>
<li><a href="">about</a></li>
<li><a href="">about</a></li>
<li><a href="">about</a></li>
</ul>
</div>
CSS改寫~
#nav {
width:400px;
margin-top:67px;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
margin:0;
padding:0;
text-indent:-9999px;
float: left;
}
#nav li a{
text-decoration:none;
display:block;
width:80px;
height:35px;
background:url(圖片路徑) no-repeat;
}
#nav li a:hover {
background:url(圖片路徑) no-repeat;
}
有兩個重點:
1. 連結區域設block(連結範圍才會依設定長寬生效)
2. li設float，才會有你要的橫向排列效果(寫在li或li a裡面皆可)
附帶一提id的問題
如果你只需要用同一個設定(不定義每個link的個別外觀)
就用#nav li去定義即可
ex.<div id="example"><h2>範例</h2></div>
要控制"範例"2字的外觀，只要設定#example h2的屬性
不好的寫法則是:
<div id="example"><h2 id="exampletitle">範例</h2></div>
然後用#exampletitle去定義屬性 囧"
※ 引述《cgcat (小綿羊趕集)》之銘言：
: 像這個網頁
: http://itisplay.com/#sitelinks
: 她的icons
: 是直向的
: 我是用 display:block
: 我以為橫向只要改成display:inline
: 就可以了
: 可是好像不是這麼一回事
: 有高手願意教學嗎
: 非常感謝!!
: 最近常常發問非常感謝這邊的高手都願意教授
: 再度感謝
: 假如說
: 我的圖片width:80px hight:35px
: 我的index
: <div id="nav">
: <ul>
: <li id="about"><a href="">about</a></li>
: <li id="about"><a href="">about</a></li>
: <li id="about"><a href="">about</a></li>
: <li id="about"><a href="">about</a></li>
: <li id="about"><a href="">about</a></li>
: </ul>
: </div>
: css部分
: #nav {
: width:400px;
: margin-top:67px;
: }
: #nav ul {
: margin:0;
: padding:0;
: list-style:none;
: }
: #nav li {
: margin:0;
: padding:0;
: width:80px;
: height:35px;
: text-indent:-9999px;
: }
: #nav li a{
: text-decoration:none;
: display:inline;
: width:80px;
: height:35px;
: }
: #nav li#about {
: background-image:url(file:///D|/design/web desige/x/WEB/image/about.jpg);
: background-repeat:no-repeat;
: }
: #nav li#about a:hover {
: background-image:url(file:///D|/design/web desige/x/WEB/image/about02.jpg);
: background-repeat:no-repeat:
: }
: 哪有有錯呢?
: 感謝
: 這邊人都很好!!
--
Blog http://blog.roodo.com/waking_life/
工作室 http://itisplay.com/
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 219.71.192.161