我试图修改一个垂直scrool到水平scrool的网页。我在css文件中添加了overflow-y：hidden;在体内但似乎还不够。您对如何进行此修改有任何想法。
这里是HTML结构：
<span id="s1"></span>
<span id="s2"></span>
<span id="s3"></span>
<!-- the big container -->
<div id="wrap">
<!-- navigation -->
<ul id="nav">
<li><a href="#s1">Splash</a></li>
<li><a href="#s2">Lorem Schnapsum</a></li>
<li><a href="#s3">Credits</a></li>
</ul>
<!-- slide 1 -->
<div id="slide1">
<div class="slide_inside">
</div> <!-- /.slide_inside-->
</div> <!-- /#slide1 -->
<!-- slide 2 -->
<div id="slide2">
<div class="slide_inside">
</div> <!-- /.slide_inside-->
</div> <!-- /#slide2 -->
<!-- La slide 2 -->
<div id="slide3">
<div class="slide_inside">
</div> <!-- /.slide_inside-->
</div> <!-- /#slide3 -->
</div>
这里是CSS：
/* General */
body {
overflow-y: hidden;
margin: 0;
padding: 0;
color:#fff;
font: normal 90% "Trebuchet MS",Verdana,"Lucida Grande",Tahoma,Arial,Helvetica,Sans-Serif;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
overflow: hidden;
background: #000;
}
h2 {
margin-top:0;
font-size: 2em;
font-weight:bold;
color: #eca603;
}
a {
font-weight:bold;
color:#fff;
}
/* Wrapper */
#wrap {
position: relative;
top:0;
-webkit-transition: top 1.4s cubic-bezier(.49,.22,.52,1);
-moz-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
-ms-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
-o-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}
/* Nav */
#nav {
position: fixed;
top: 0; left:0; right: 0;
padding: 1em 0;
margin:0;
background: #000;
text-align:center;
font-size: 1em;
z-index:10;
}
#nav li {
display: inline;
margin:0;
}
#nav a {
display: inline-block;
margin: 0 3em;
color: #eee;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 0 5px #fff;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
/* slides */
#slide1, #slide2, #slide3 {
height: 1000px;
padding-top:100px;
-webkit-transition: background-position 1.4s cubic-bezier(.49,.22,.52,1);
-moz-transition: background-position 1.4s cubic-bezier(.49,.22,.52,1.35);
-ms-transition: background-position 1.4s cubic-bezier(.49,.22,.52,1.35);
-o-transition: background-position 1.4s cubic-bezier(.49,.22,.52,1.35);
transition: background-position 1.4s cubic-bezier(.49,.22,.52,1.35);
}
#slide1 { background:url(images/slide1-bg.jpg) center 0 no-repeat fixed; }
#slide2 { background: url(images/slide2-bg.jpg) center 0 no-repeat fixed; }
#slide3 { background: url(images/slide3-bg.jpg) center 0 no-repeat fixed; }
/* Slides contents */
.slide_inside {
width: 770px;
margin: 0 auto;
position: relative;
background-color: rgba(0, 0, 0, .6);
padding: 50px;
}
#slide1 .slide_inside {
text-align: center;
background-color: transparent;
}
#slide2 .slide_inside p {
width: 500px;
text-align: justify;
}
#slide3 .slide_inside {
margin-top: 50px;
}
/* Troopers & clone */
#trooper, #clone {
position: absolute;
left:-180px; top: 300px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
-moz-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
-ms-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
-o-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
transition: all 1.4s cubic-bezier(.49,.22,.52,1);
}
#clone {
left: -280px;
top: 400px;
}
/* targeted elements */
#s1:target ~ #wrap { top:0px; }
#s1:target ~ #wrap #nav li:first-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s1:target ~ #wrap #slide1 { background-position: 50% 0%; }
#s1:target ~ #wrap #slide2 { background-position: 50% -35%; }
#s1:target ~ #wrap #slide3 { background-position: 50% -60%; }
#s1:target ~ #wrap #trooper { left: -180px; top: 300px; -webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg); }
#s1:target ~ #wrap #clone { left: -280px; top: 300px;-webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg); }
#s2:target ~ #wrap { top:-1000px; }
#s2:target ~ #wrap #nav li:first-child + li a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s2:target ~ #wrap #slide1 { background-position: 50% 36%; }
#s2:target ~ #wrap #slide2 { background-position: 50% 0%; }
#s2:target ~ #wrap #slide3 { background-position: 50% -30%; }
#s2:target ~ #wrap #trooper { left: -180px; top: -100px; -webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-ms-transform: rotate(-7deg);-o-transform: rotate(-7deg);transform: rotate(-7deg); }
#s2:target ~ #wrap #clone { left: -350px; top: 50px; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg);transform: rotate(0deg); }
#s3:target ~ #wrap { top:-2150px; }
#s3:target ~ #wrap #nav li:last-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s3:target ~ #wrap #slide1 { background-position: 50% 60%; }
#s3:target ~ #wrap #slide2 { background-position: 50% 35%; }
#s3:target ~ #wrap #slide3 { background-position: 50% 0%; }
#s3:target ~ #wrap #trooper { left:-1500px;top:-1000px;-webkit-transform:rotate(-15deg);-moz-transform:rotate(-15deg);-ms-transform:rotate(-15deg);-o-transform:rotate(-15deg);transform: rotate(-15deg); }
#s3:target ~ #wrap #clone { left:-1000px;top: -800px;-webkit-transform: rotate(-15deg);-moz-transform: rotate(-15deg);-ms-transform: rotate(-15deg);-o-transform: rotate(-15deg);transform: rotate(-15deg); }
/* some social styles */
.fb-like { top: -5px; }
.or_follow { display: inline-block; vertical-align:top; margin-left: 135px; margin-right: 5px; }