0

我的一些问题是我正在使用来自这个 Lynda.com 视频的代码- Fireworks 的东西就像导入一样，其余的 CSS 我使用了他的东西，一直到颜色。然而我在某个地方搞砸了，我不知道在哪里。

代码如下。我的精灵和悬停显示正常，但它们显示为按钮块而不是线条。我已经在各个地方尝试过float:left，display:block甚至将我的精灵重新导出为水平而不是标准，但无济于事。

<code>
@charset "UTF-8";
body {
margin:0;
padding:0;
background:#000;
}

header nav {
width:100%;
background:#333;
text-align:center;
position:relative;
font:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
height:98px;
border-bottom:12px solid black;
}

header nav ul {
padding:0;
margin:0;
list-style:none;
}

header nav ul li {
position:relative;
width:110px;
height;90px
float:left;
border-bottom:12px solid #000;
border-left:1px solid #333
border-right:1px solid #666;
}

header nav ul li:hover {
border-bottom-color:#FFC926;
}

header nav ul li a {
width:110%;
color:#FFF;
text-decoration:none;
display:inline;
float:left;
padding-top:75px

}
.navsymbol li{    background:url("https://dl.dropboxusercontent.com/u/50029017/untitled%20folder/navsymbol.png") no-repeat;}
li.nav_Home{ width:342px; height:70px; background-position:-10px -10px; }
li.nav_Home:hover{ width:342px; height:70px; background-position:-362px -10px; }
li.nav_Contact{ width:342px; height:70px; background-position:-714px -10px; }
li.nav_Contact:hover{ width:342px; height:70px; background-position:-1066px -10px; }
li.nav_Design{ width:342px; height:70px; background-position:-1418px -10px; }
li.nav_Design:hover{ width:342px; height:70px; background-position:-1770px -10px; }
</code>

和html：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="nav.css">
</head>

<body>
<header>
<nav>
<ul class="navsymbol">
<li class="nav_Home"><a href="#"></a></li>
<li class="nav_Design"><a href="#"></a></li>
<li class="nav_Contact"><a href="#"></a></li>
</ul>
</nav>
</header>

</body>
</html>
4

3 回答 3

0

看起来你只是有一个错字：

header nav ul li {
position:relative;
width:110px;
height;90px /* should be- height:90px;*/
float:left;
border-bottom:12px solid #000;
border-left:1px solid #333
border-right:1px solid #666;
}

示例显然精灵已经变成 404，所以该示例现在不起作用......

于 2013-09-18T12:21:57.413 回答
-1

改变

header nav ul li {
position:relative;
width:110px;
height;90px /* should be- height:90px;*/
float:left;
border-bottom:12px solid #000;
border-left:1px solid #333
border-right:1px solid #666;
}

至

header nav ul li {
position:relative;
width:110px;
height:90px;
float:left;
border-bottom:12px solid #000;
border-left:1px solid #333
border-right:1px solid #666;
}

并插入到css文件

.navsymbol:after{
    clear:both;
}
.navsymbol:after,.navsymbol:before{
    display:table;
    content:"";
}
于 2013-09-18T12:27:40.300 回答
-2

在后台 url DEMO HEREhttp的地方使用https

.navsymbol li{    background:url("http://dl.dropboxusercontent.com/u/50029017/untitled%20folder/navsymbol.png") no-repeat;}
于 2013-09-18T12:07:48.017 回答