0
私はパット/マージンを編集してからUTF-8としてファイルを保存することまで、メモ帳にBOMを入れずに試しました。私は助けを求めるようになるので、何も動作していないようです。私は、問題は私のベースに存在すると信じて、私は私の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>のように見えているのpython/Djangoフレームワークを使用して、このWebページを開発しています
.htmlファイルですが、ここにbase.htmlを使用する別のページのサンプル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 { background-color：＃256A6A;}'の直下に '* {margin：0; padding：0;} 'を追加しようとしましたが、何もしません。 –
アップデート。 '.container .page-header { color：＃013737; font-family：Arial、Helvetica、sans-serif; font-size：400％; パディング：0; マージン：0; } 'をbase.htmlに移動します。ヘッダーを上に移動できますが、その後白い線はボディの端に触れていますが、まだ行っていません –