【緊急問題】求助老師：效果頁面有問題
老師好，請問下，我根據(jù)教程制作到這步時(shí)，有點(diǎn)問題，點(diǎn)擊導(dǎo)航，頁面可以切換，但是內(nèi)容部分頂部有條空白，從左到右切換頁面時(shí)，空白的部分越來越往下移動(dòng)了，我的Demo地址：http://www.zhangshaoping.com/demo/? ，首頁填寫完內(nèi)容傳遞后的頁面：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>智慧沃家幸福計(jì)算器</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">
內(nèi)容一
</section>
<section class="st-panel" ?id="st-panel-2">
內(nèi)容二
</section>
<section class="st-panel" ?id="st-panel-3">
內(nèi)容三
</section>
<section class="st-panel" ?id="st-panel-4">
內(nèi)容四
</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;
}
/* 內(nèi)容 */
.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%);
}
2016-07-28
可以試試在樣式里設(shè)置整個(gè)頁面的邊距問題，body,html{margin:0;
????????????????????????????????????????????????????????????????????????????????????????padding:0;}