Html 删除顶部多余的空白
我已经做了一个网页使用引导旋转木马主题。顶部的空白区域仍然可见。我想把它去掉。我提供我的旋转木马CSS文件和我的HTML文件。我尝试过改变填充和边距，但似乎没有任何效果。 请帮忙Html 删除顶部多余的空白,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我已经做了一个网页使用引导旋转木马主题。顶部的空白区域仍然可见。我想把它去掉。我提供我的旋转木马CSS文件和我的HTML文件。我尝试过改变填充和边距，但似乎没有任何效果。 请帮忙 /* GLOBAL STYLES -------------------------------------------------- */ /* Padding below the footer and lighter body text */ body { padding-bottom: 40px; co
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
padding-top: 0;
margin-top: 0;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
padding-top: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 20px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: 10px;
margin-left: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}
/*全局样式
-------------------------------------------------- */
/*页脚下方的填充和较轻的正文文本*/
身体{
填充底部：40px；
颜色：#5A5A；
}
/*自定义导航栏
-------------------------------------------------- */
/*特殊类别。容器周围。导航栏，用于将其定位到位*/
.导航栏包装{
位置：绝对位置；
填充顶部：0；
边际上限：0；
排名：0；
右：0；
左：0；
z指数：20；
}
/*翻转填充以在狭窄视口中正确显示*/
.navbar包装器>.container{
右边填充：0；
左侧填充：0；
填充顶部：0；
}
.navbar包装器.navbar{
右侧填充：15px；
左侧填充：15px；
}
.navbar包装器.navbar.容器{
宽度：自动；
}
/*自定义旋转木马
-------------------------------------------------- */
/*旋转木马基类*/
旋转木马{
高度：500px；
边缘底部：60px；
}
/*由于定位图像，我们需要帮助解决标题问题*/
.旋转木马标题{
z指数：10；
}
/*由于img元素的定位而声明高度*/
.carousel.项目{
高度：500px；
背景色：#777；
}
.carousel-inner>.item>img{
位置：绝对位置；
排名：0；
左：0；
最小宽度：100%；
高度：500px；
}
/*营销内容
-------------------------------------------------- */
/*将旋转木马下方三列内的文本居中对齐*/
.市场营销。col-lg-4{
边缘底部：20px；
文本对齐：居中；
}
.市场推广h2{
字体大小：正常；
}
.市场营销。col-lg-4 p{
右边距：10px；
左边距：10px；
}
/*特写
------------------------- */
.特征分割器{
边距：80px 0；/*留出引导空间
更多*/
}
/*精简营销标题*/
.专题标题{
字体大小：300；
线高：1；
字母间距：-1px；
}
/*响应式CSS
-------------------------------------------------- */
@介质（最小宽度：768px）{
/*导航条定位*/
.导航栏包装{
边缘顶部：20px；
}
.导航栏包装器.容器{
右侧填充：15px；
左侧填充：15px；
}
.navbar包装器.navbar{
右边填充：0；
左侧填充：0；
}
/*导航栏从顶部分离，因此我们绕过拐角*/
.navbar包装器.navbar{
边界半径：4px；
}
/*增大传送带内容的大小*/
.carousel标题p{
边缘底部：20px；
字号：21px；
线高：1.4；
}
.专题标题{
字体大小：50px；
}
}
@介质（最小宽度：992px）{
.专题标题{
边缘顶部：120px；
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/Users/amandhapola/Desktop/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/Users/amandhapola/Desktop/bootstrap/docs/assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="/Users/amandhapola/Desktop/bootstrap/docs/examples/carousel/carousel.css" rel="stylesheet">
<link href="/Users/amandhapola/Desktop/nlog.css" rel="stylesheet">
<link href="/Users/amandhapola/Desktop/fb.css" rel="stylesheet">
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-t
op" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Resumeeeee !!!</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<!--<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/" data-toggle="modal" data-target="#myModal">Login</a></li>
<li><a href="../navbar-static-top/" data-toggle="modal" data-target="#myModal1">Signup</a></li>
</ul>
<!--<ul class="nav pull-right">-->
<!-- <ul class="nav nav-pills" style="float:right">-->
<!--</ul>-->
<!--</ul>-->
</div>
</div>
</div>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="/Users/amandhapola/Desktop/six.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Stay on the top.</h1>
<p>Get noticed by your super seniors</p>
<p><a class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal1" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img src="/Users/amandhapola/Desktop/four.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Get selected</h1>
<p>we make sure your supersenior recoomends you as fast as possile</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="/Users/amandhapola/Desktop/third.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One thing more for good measure.</h1>
<p>Get your resume viewed by many other people who are at the top of their level</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<img class="img-circle" src="/Users/amandhapola/Desktop/face1.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;">
<h2>Martin Rodriguez</h2>
<p>"I got Placed at Amazon .Thanks to Resume"</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="/Users/amandhapola/Desktop/face2.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;">
<h2>Tim Dunn</h2>
<p>"I got Placed at microsoft .Thanks to Resume"</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="/Users/amandhapola/Desktop/face3.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;">
<h2>Steve Mccharthy</h2>
<p>"I use Resume to hire from the abundant fresh talent around the world"</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Get Helped <br><span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Super Seniors will help you on your highway to success</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive" src="/Users/amandhapola/Desktop/super.jpg" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-5">
<img class="featurette-image img-responsive" src="/Users/amandhapola/Desktop/try.jpg" alt="Generic placeholder image">
</div>
<div class="col-md-7">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Try it for free.</p>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Get Placed At you Dream Company</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive" src="/Users/amandhapola/Desktop/logo.jpg" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>© 2014 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
</div><!-- /.container -->
<!-- sadasdasdasdasd -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="container">
<div class="row">
<div class="main">
<h3>Please Log In</h3>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<a href="#" class="btn btn-lg btn-primary btn-block">Facebook</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<a href="#" class="btn btn-lg btn-info btn-block">Google</a>
</div>
</div>
<div class="login-or">
<hr class="hr-or">
<span class="span-or">or</span>
</div>
<form role="form">
<div class="form-group">
<label for="inputUsernameEmail" class="abovelogin">Username or email</label>
<input type="text" class="form-control" id="inputUsernameEmail">
</div>
<div class="form-group">
<a class="pull-right" href="#" id="fpassword">Forgot password?</a>
<label for="inputPassword" class="abovelogin">Password</label>
<input type="password" class="form-control" id="inputPassword">
</div>
<div class="checkbox pull-right">
<label class="abovelogin">
<input type="checkbox">
Remember me </label>
</div>
<button type="submit" class="btn btn btn-primary">
Log In
</button>
</form>
</div>
</div>
</div>
</div>
<!-- sadasdasdasdasd -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="container" id="wrap">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action="r" method="post" accept-charset="utf-8" class="form" role="form"> <legend>Sign Up</legend>
<h4>It's free and always will be.</h4>
<div class="row">
<div class="col-xs-6 col-md-6">
<input type="text" name="firstname" value="" class="form-control input-lg" placeholder="First Name" /> </div>
<div class="col-xs-6 col-md-6">
<input type="text" name="lastname" value="" class="form-control input-lg" placeholder="Last Name" /> </div>
</div>
<input type="text" name="email" value="" class="form-control input-lg" placeholder="Your Email" /><input type="password" name="password" value="" class="form-control input-lg" placeholder="Password" /><input type="password" name="confirm_password" value="" class="form-control input-lg" placeholder="Confirm Password" />
<label id ="bdate">Birth Date</label> <div class="row">
<div class="col-xs-4 col-md-4">
<select name="month" class = "form-control input-lg">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select> </div>
<div class="col-xs-4 col-md-4">
<select name="day" class = "form-control input-lg">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select> </div>
<div class="col-xs-4 col-md-4">
<select name="year" class = "form-control input-lg">
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select> </div>
</div>
<label class="sidetext">Gender : </label> <label class="radio-inline" id="rbuttonmale">
<input type="radio" name="gender" value="M" id=male/>
Male
</label>
<label class="radio-inline" id="rbuttonfemale">
<input type="radio" name="gender" value="F" id=female /> Female
</label>
<br />
<span class="help-block">By clicking Create my account, you agree to our Terms and that you have read our Data Use Policy, including our Cookie Use.</span>
<button class="btn btn-lg btn-primary btn-block signup-btn" type="submit">
Create my account</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/Users/amandhapola/Desktop/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/Users/amandhapola/Desktop/bootstrap/docs/assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/Users/amandhapola/Desktop/bootstrap/docs/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
用于引导的旋转木马模板
切换导航
保持领先。
让你的超级前辈注意到你
被选中
我们会确保你的超级性感尽快让你恢复知觉
还有一件事值得注意。
让你的简历被许多其他处于他们级别的人浏览
马丁罗德里格斯
“我被安排在亚马逊。多亏了简历”
蒂姆邓恩
“我被安置在microsoft。多亏了简历”
史蒂夫·麦克哈蒂
“我使用简历从世界各地大量的新人才中招聘”
得到帮助
这会让你大吃一惊的。
超级长者将帮助您在通往成功的道路上前进
哦，是的，很好。你自己看看吧。
免费试用
最后，这个。将死。
进入你梦想的公司
&抄袭；2014年公司股份有限公司和middot&米德多
请登录
或
body {
margin:0
padding: 0 0 40px 0; /* zero padding except 40 pixels on bottom */
}
.navbar-wrapper {
margin:0;
}
.container {
margin-top: 0;
}
* {
margin:0;
padding:0;
}