【紧急问题】求助老师：效果页面有问题
zhangshp
2015-06-03 02:31
老师好，请问下，我根据教程制作到这步时，有点问题，点击导航，页面可以切换，但是内容部分顶部有条空白，从左到右切换页面时，空白的部分越来越往下移动了，我的Demo地址：http://www.zhangshaoping.com/demo/ ，首页填写完内容传递后的页面：zhwj_result.php即为按照本教程制作的页面效果，麻烦老师帮我看看，哪里有问题
代码如下：
1.index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>智慧沃家幸福计算器</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="st-container">
<!-- nav begin -->
<input type="radio" name="radio-set" id="st-control-1" checked="checked" >
<a href="#st-panel-1">119.9元（6M）</a>
<input type="radio" name="radio-set" id="st-control-2" >
<a href="#st-panel-2">139.9元（6M）</a>
<input type="radio" name="radio-set" id="st-control-3" >
<a href="#st-panel-3">139.9元（10M）</a>
<input type="radio" name="radio-set" id="st-control-4" >
<a href="#st-panel-4">159.9元（10M）</a>
<!-- nav end content begin -->
<div class="st-scroll">
<section class="st-panel" id="st-panel-1">
内容一
</section>
<section class="st-panel" id="st-panel-2">
内容二
</section>
<section class="st-panel" id="st-panel-3">
内容三
</section>
<section class="st-panel" id="st-panel-4">
内容四
</section>
</div>
</div>
</div>
</body>
</html>
2.sytle.css
@CHARSET "UTF-8";
body{
font-family:Georgia,serif;
background:#ddd;
font-weight:bold;
font-size:15px;
color:#333;
overflow:hidden;
-webkit-font-smoothing:antialiased;
}
a{
text-decoration:none;
color:#555;
}
.clr{
width:0;
height:0;
overflow:hidden;
clear:both;
padding:0;
marging:0;
}
.st-container{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
font-family:"Josefin Slab", "Myriad Pro", Arial, sans-serif;
}
.st-container > input,
.st-container > a{
width:25%;
height:34px;
line-height:34px;
position:fixed;
bottom:0;
cursor:pointer;
}
.st-container > input {
opacity:0;
z-index:1000;
}
.st-container > a {
z-index:10;
font-weight:bold;
font-size:16px;
background:#e23a6e;
text-align:center;
color:#fff;
text-shadow:1px 1px 1px rgba(151,24,64,0.2);
}
#st-control-1,#st-control-1 + a {
left:0%;
}
#st-control-2,#st-control-2 + a {
left:25%;
}
#st-control-3,#st-control-3 + a {
left:50%;
}
#st-control-4,#st-control-4 + a {
left:75%;
}
.st-container input:checked + a,
.st-container input:checked:hover + a {
background:#821134;
}
.st-container input:checked + a:after {
content:"";
width:0;
height:0;
overflow:hidden;
border:20px solid transparent;
border-bottom-color:#821134;
position:absolute;
bottom:100%;
left:50%;
margin-left:-20px;
}
.st-container input:hover + a {
background:#AD244F;
}
/* 内容 */
.st-scroll,
.st-panel {
width:100%;
height:100%;
position:relative;
}
.st-scroll {
left:0;
top:0;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
transition:all 0.6s ease-in-out;
}
.st-panel {
background:#fff;
over-flow:hidden;
}
#st-control-1:checked ~ .st-scroll {
-webkit-transform:translateY(0%);
-moz-transform:translateY(0%);
-o-transform:translateY(0%);
-ms-transform:translateY(0%);
transform:translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
-webkit-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-o-transform:translateY(-100%);
-ms-transform:translateY(-100%);
transform:translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
-webkit-transform:translateY(-200%);
-moz-transform:translateY(-200%);
-o-transform:translateY(-200%);
-ms-transform:translateY(-200%);
transform:translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
-webkit-transform:translateY(-300%);
-moz-transform:translateY(-300%);
-o-transform:translateY(-300%);
-ms-transform:translateY(-300%);
transform:translateY(-300%);
}
1回答
-
- DefendingKin3704913
- 2016-07-28 19:53:03
可以试试在样式里设置整个页面的边距问题，body,html{margin:0;
padding:0;}
css3实现网页平滑过渡效果
54371 学习 · 372 问题
相似问题