作者cgcat (小绵羊赶集)
看板Web_Design
标题Re: [问题] 横向 icons的图片转换
时间Tue Jul 24 20:35:43 2007
※ 引述《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:
: }
: 哪有有错呢?
: 感谢
: 这边人都很好!!
书上那样写
text-indent:-9999px
是因为他要将
<a>about</a>
里面的about用不见
我将display:inline改地方
有出现我要的效果
但是
前面的about的文字也会一并出现
怎麽把它消掉呢?
而且我背景图出现的只剩下about出现的部份
就像这样
http://www.wretch.cc/album/show.php?i=circuit123&b=1&f=1476251773&p=11
这个地方要怎麽改善呢?
非常感谢
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 218.210.5.68