我现在正在建立一个网站，目前我的一些网页之间几乎没有差距，我不知道是什么造成了这些网页。我希望这个网站上的某个人能够知道一种方法，使页面之间的过渡无缝顺畅。我提供了一个链接，以便您可以看到我在说什么。（您必须打开代码段中的完整页面才能看到我正在谈论的内容）
CSS和HTML
body{
background-color: white;
font-family:Orbitron;
color:white;
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
opacity: .7;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top: 5%;
}
.pageTwoblock{
background-color: #008B8B;
opacity: .7;
border-radius:5px;
}
p{
font-size: 2.5em;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top:5%;
}<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
<a href="#">Daniel Collins</a>
</li>
<li class="pull-right">
<a href="#">Contact Me</a>
</li>
<li class="pull-right">
<a href="#">Portfolio</a>
</li>
<li class="pull-right">
<a href="#">About Me</a>
</li>
</ul>
<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="#">Reddit</a>
<a class = "btn btn-default" href="#">GitHub</a>
<a class = "btn btn-default" href="#">Linkedin</a>
<a class = "btn btn-default" href="#">Facebook</a>
</div>
</div>
<div class= "pageTwo">
<div class= "col-md-6 pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p>
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree">
</div>
</body>
</html>
答案 0 :(得分：0)
我从页面样式中删除了inline-block。如果这解决了您的所有问题，请告诉我。对我来说看起来也一样。
body{
line-height: 0;
background-color: white;
font-family:Orbitron;
color:white;
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
height: 1000px;
width: 100%;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
opacity: .7;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
height: 1000px;
width: 100%;
padding-top: 5%;
}
.pageTwoblock{
background-color: #008B8B;
opacity: .7;
border-radius:5px;
}
p{
font-size: 2.5em;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
height: 1000px;
width: 100%;
padding-top:5%;
}<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
<a href="#">Daniel Collins</a>
</li>
<li class="pull-right">
<a href="#">Contact Me</a>
</li>
<li class="pull-right">
<a href="#">Portfolio</a>
</li>
<li class="pull-right">
<a href="#">About Me</a>
</li>
</ul>
<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="#">Reddit</a>
<a class = "btn btn-default" href="#">GitHub</a>
<a class = "btn btn-default" href="#">Linkedin</a>
<a class = "btn btn-default" href="#">Facebook</a>
</div>
</div>
<div class= "pageTwo">
<div class= "col-md-6 pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p>
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree">
</div>
</body>
</html>
答案 1 :(得分：0)
这些元素的底部有一个间隙，因为它们是for a in links:
if (a[0] == a[1] == a[2] == 'w'):
a = a[4:]
，默认情况下，内联块会在底部留下空格来跟踪字符。要删除它，请设置for a in links:
a = 'https://www.' + a
，如inline-block。
您也可以删除这些元素上的vertical-align以使其vertical-align: top，并且默认情况下它们将是display: inline-block; width: 100%;。
block100%