对此完全感到困惑,因为代码似乎没有任何“错误”。我已经请几个人检查该网站,但我不断得到不同的答案。从加载时出现滚动的滚动文本(我显然不想要)到不显示图片:/
有谁能帮忙吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WEBSITE TITLE</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/page.css">
</head>
<body>
<div id="container">
<h1>WEBSITE TITLE</h1>
<h2><a href="mailto:EMAIL@ADDRESS.COM">EMAIL@ADDRESS.COM</a></h2>
<ul id="arrows">
<li><a id="arrow1" href="http://www.facebook.com">Arrow<span></span></a></li>
<li><a id="arrow2" href="http://twitter.com">Arrow2<span></span></a></li>
</ul>
<div id="photo01"></div>
<div id="navcontainer">
<ul id="navlist">
<li><span>List</span><ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
</ul></li></ul>
</div><!-- end #navcontainer -->
</div><!-- end #container -->
</body>
</html>
CSS看起来像这样:
body {
/*margin:0;*/ margin:10px;
background-image:url(background.png);
background-attachment:fixed;
font-family:'hoefler text',georgia,'times new roman',serif;
}
a {
color:#dadada;
text-decoration:none;
}
a:visited,a:hover {
color:#fff;
}
a:active {
color:#000;
}
a {
outline:0;
}
#container {
/*width:1000px;*/ min-width:1000px;
padding-bottom:20px;
/*margin:140px auto 0;*/
}
div #photo01
{
float:left;
position:absolute;
width: 690px;
height: 550px;
margin-top:150px;
margin-bottom:20px;
margin-left:880px;
background-image: url(img_01.jpg);
background-repeat: no-repeat;
/*background-position: 200px 300px;*/
}
h1,h2 {
position:absolute;
/*top:225px;*/ top:235px;
left:50px;
z-index:2;
/*width:1000px;*/ width:720px;
padding-top:25px;
margin:0;
color:#dadada;
font-weight:normal;
font-size:1.85em;
letter-spacing:0.2em;
line-height:1.1em;
text-transform:uppercase;
background-image:url(background.png);
}
h2 {
width:500px;
/*top:290px;*/ top:300px;
padding-top:20px;
font-size:1.0em;
background-image:url(background.png);
}
#arrows {
float:left;
width:64px;
padding:0;
/*margin-top:250px;
margin-bottom:50px;
margin-right:0px;
margin-left:-150px;*/ margin-top:402px;
margin-bottom:200px;
margin-left:50px;
list-style-type:none;
}
#arrows a {
position:relative;
display:block;
width:64px;
height:64px;
/*margin-bottom:10px;*/margin-bottom:5px;
text-indent:-9999px;
overflow:hidden;
background-image:url(arrows.png);
}
#arrows span {
position:absolute;
top:0;
left:0;
width:64px;
height:64px;
background-image:url(arrows.png);
opacity:0;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
}
#arrows span:hover {
opacity:1;
}
#arrow1 {
background-position:0 0;
}
#arrow1 span {
background-position:0 -64px;
}
#arrow2 {
background-position:-64px 0;
}
#arrow2 span {
background-position:-64px -64px;
}
#navcontainer {
clear:both;
overflow-x:hidden;
}
#navlist {
float:left;
line-height:30px;
padding:0;
margin:0;
list-style-type:none;
color:#dadada;
font-size:0.65em;
letter-spacing:0.2em;
line-height:1.1em;
text-align:left;
text-transform:uppercase;
}
#navlist:first-child {
position:relative;
cursor:pointer;
}
#navlist span {
position:absolute;
z-index:1;
width:100px;
line-height:40px;
padding-left:50px;
background-image:url(background.png);
color:#dadada;
}
#navlist ul {
padding:0;
margin:0 0 0 -1300px;
list-style-type:none;
-webkit-transition:all 2s ease;
-moz-transition:all 2s ease;
-o-transition:all 2s ease;
}
#navlist ul li {
float:left;
margin:0 3px;
}
#navlist:first-child:hover ul{
margin:0 0 0 150px;
color:#dadada;
}
#navlist a {
display:block;
line-height:40px;
padding:0 8px;
color:#dadada;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
}
#navlist a:hover {
color:#fff;
}