我想做一个这样的网站(因为我的英语很差，所以我放了一张图片)。
<html>
<body>
<div id="menu"> </div>
<div id="content1"> </div>
<div id="content2"> </div>
<div id="content3"> </div>
</body>
</html>
我希望你明白，我知道如何用 CSS 修复一个 div，但我不知道如何将我的网站分成不同的部分并制作滚动动画。
希望大家帮帮我!
最佳答案
如果我正确理解你的问题，这应该接近你想要的。
HTML:
<div id="menu">
<h1>This is the menu div</h1>
</div>
<div id="main-container">
<div id="content-container">
<div id="content1">
<h1>This is content 1</h1>
<a href="#" id="right1">Right</a>
</div>
<div id="content2">
<h1>This is content 2</h1>
<a href="#" id="left2">Left</a>
<a href="#" id="right2">Right</a>
</div>
<div id="content3">
<h1>This is content 3</h1>
<a href="#" id="left3">Left</a>
</div>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
text-align: center;
}
h1 {
margin: 0;
padding: 10px;
font-family: Helvetica, Arial, sans-serif;
font-size: 25px;
}
#menu {
width: 100%;
height: 20%;
}
#main-container {
width: 100%;
height: 80%;
overflow: hidden;
}
#content-container {
width: 300%;
height: 100%;
position: relative;
top: 0;
left: 0;
font-size: 0px;
transition: left 0.5s ease;
-o-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-webkit-transition: left 0.5s ease;
}
#content-container > div {
width: 33.33%;
height: 100%;
display: inline-block;
font-size: 15px;
}
#content1 {
background: red;
}
#content2 {
background: orange;
}
#content3 {
background: green;
}
JS:
$("#right1, #left3").on("click", function() {
// This fires when 'right' is pressed on content 1,
// or 'left' is pressed on content 3. In both cases
// we want to move to show content 2.
$("#content-container").css({left: "-100%"});
});
$("#left2").on("click", function() {
// This fires when 'left' is pressed on content 2.
// We want to move to show content 1.
$("#content-container").css({left: "0%"});
});
$("#right2").on("click", function() {
// This fires when 'right' is pressed on content 2.
// We want to move to show content 3.
$("#content-container").css({left: "-200%"});
});
解释一下，这个滑动效果是基于 CSS3 过渡的。 CSS 中的 *-transition 属性指定 left 属性应该以 0.5s 的长度动画，使用缓动。这意味着当您更改内容容器 div 的 left 属性时，浏览器会为更改设置动画以创建您想要的滑动效果，而不是立即执行。
页面的工作方式是将每个内容 div 设置为内容容器 div 宽度的 1/3，即 width: 33.33%。 content-container div 是页面宽度的 3 倍，即 width: 300%。里面的内容div是用display: inline-block并排的，用这个方法你需要在内容上设置font-size: 0px -container div 并在内容 div 中重新设置 font-size: (xyz)px。这是 inline-block 工作方式的一个怪癖，但通过执行上述操作，您可以删除 3 个内容 div 之间的水平空间。
最后，包含的 JS 使用 jQuery(但您可以不用它)为切换页面的链接创建事件处理程序。这些事件处理程序已被注释，因此应该是不言自明的，但基本上它们会根据需要显示的页面更改内容容器 div 的 left 属性。
这个 JSFiddle 显示它正在工作:http://jsfiddle.net/CN8z6/1/
关于html - 带有滚动动画的 3 部分分割网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23723175/