讨论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