0
我已經嘗試了一切從編輯填充/邊距到保存文件爲utf-8沒有BOM在其他帖子中建議的記事本,以讓他的差距消失。似乎沒有什麼工作,所以我來尋求幫助。無法擺脫標題和正文之間的差距
我使用python/Django框架中,我base.html文件文件看起來像這樣
{% load bootstrap3 %}
<!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">
<title>Michael Goytia</title>
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Static navbar -->
<nav class="navbar navbar-custom navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<!-- put three little bars in toggle button-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'personal_info:index' %}"style="color:#6C9F9F"><i class="fa fa-user-secret"></i>
<b>Michael Goytia</b></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{% url 'personal_info:about_me' %}"style="color:#6C9F9F"><i class="fa fa-user-circle-o"></i>
<b>About Me</b></a>
</li>
<li><a href="{% url 'personal_info:projects' %}"style="color:#6C9F9F"><i class="fa fa-paper-plane"></i>
<b>Projects</b></a>
</li>
<li><a href="{% url 'personal_info:contact' %}"style="color:#6C9F9F"><i class="fa fa-address-book"></i>
<b>Contact Information</b></a>
</li>
</ul>
</div><!--/.nav-collaspse -->
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div><!-- /container -->
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<style>
.navbar-custom
{
background:#013737;
border-radius:0;
}
.navbar-toggle .icon-bar
{
background-color:#6C9F9F;
}
.navbar-header .navbar-toggle
{
background-color:#0F5151;
}
footer{
background:#013737;
position:fixed;
left:0px;
bottom:0px;
height:80px;
width:100%;
}
body{
background:#438383;
padding: 0;
margin: 0;
}
.nav > li >a:hover{
background-color:#256A6A;
}
</style>
</body>
<footer>
</footer>
</html>
我認爲,問題存在於我的基地開發這個網頁.html文件,但是這裏是另一個頁面的示例html,使用base.html
{% extends "personal_info/base.html" %}
{% block content %}
<h1><b><u>Projects</u></b><h1>
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Github Information</center></b>
</h1>
</div>
<div class="panel-body">
<div class="github-card" data-github="goytia54" data-width="400" data-height="150" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Academic</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Personal</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<style>
.panel-custom .panel-heading{
background-color:#013737;
color:#6C9F9F;
border-radius: 50px 15px;
}
.panel-custom
{
background-color:#438383;
}
</style>
{% endblock content %}
我是新來的網絡發展,使任何幫助,我將非常感激。
你嘗試過使用某種正常化嗎?這是覆蓋所有的默認值。例如,您可以使用 * {margin:0;填充:0}。試試這個,可能會幫助你。 –
我試着在'.nav> li> a:hover {hover}背景顏色:#256A6A;}下面加'* {margin:0; padding:0;}',它什麼也沒做。 –
更新,加入'.container .page-header { color:#013737; font-family:Arial,Helvetica,sans-serif; font-size:400%; 填充:0; margin:0; }'到base.html我可以移動標題,但然後白線觸摸身體的邊緣,但仍然沒有消失 –